自訂招牌

自訂招牌

學習練習

簡介

在 JavaScript 中,樣板字串(英文:template strings)可以讓你在字串裡嵌入運算式,這種做法也稱為字串插值。 這項功能擴充了內建String全域物件的功能。

在 JavaScript 裡,只要用反引號把文字包起來,就能建立樣板字串。 樣板字串除了能讓文字包含換行和其他特殊字元,還能嵌入變數和其他運算式。

const num1 = 1;
const num2 = 2;

`Adding ${num1} and ${num2} gives ${num1 + num2}.`;
// => Adding 1 and 2 gives 3.

在上面的例子中,反引號(``)是用來表示樣板字串。${...} 是取代時使用的佔位符。 任何非字串的型別都會被隱式轉換成字串。 這個主題會在型別轉換的概念裡介紹。 各種型別的運算式都可以用在樣板字串中。

const track = 'JavaScript';

`This track on exercism.org is ${track.toUpperCase()}.`;
// => This track on exercism.org is JAVASCRIPT.

當你需要把字串排成多行時:

`This is an example of using template
strings to accomplish multiple
lines`;

有了這些取代功能,你還可以在過程中加入邏輯,來決定輸出的字串應該是什麼。

其中一個例子是嵌入三元運算子。 這個運算子是撰寫 if/else 敘述的簡短形式。 語法是 condition ? consequent-expression : alternative-expression。 如果條件的值為 truthy,就會回傳冒號左側的運算元。 否則,三元運算式的結果就是冒號右側的運算元。

const grade = 95;

`You have ${grade > 90 ? 'passed' : 'failed'} the exam.`;
// => You have passed the exam.

說明

在這個練習中,你會撰寫程式碼,協助一家招牌公司為他們的招牌製作客製化訊息。

1. 製作場合招牌

實作buildSign(occasion, name)函式,它接受一個字串作為occasion參數,以及一個存放某人名字的字串作為name參數。 這兩個參數會嵌入樣板字串中,用來輸出招牌上的訊息。

buildSign('Birthday', 'Rob');
// => "Happy Birthday Rob!"

2. 製作生日招牌

實作buildBirthdaySign(age)函式,它接受一個年齡,並根據年齡決定招牌上訊息的一部分。 如果年齡是 50 或以上,招牌會稱呼使用者為 mature,否則會稱呼他們為 young。 預期的確切輸出如下:

buildBirthdaySign(50);
// => "Happy Birthday! What a mature fellow you are."

buildBirthdaySign(45);
// => "Happy Birthday! What a young fellow you are."

3. 製作畢業招牌

實作graduationFor(name, year)函式,它接受名字作為字串參數、年份作為數字參數,並使用字串插值產生招牌上的詞句,其中以換行分隔訊息中的兩行。

graduationFor('Hannah', 2022);
/* => "Congratulations Hannah!
       Class of 2022"
*/

4. 計算招牌的成本

實作costOf(sign, currency)函式,它接受一個存放招牌內容的字串,以及一個代表貨幣的字串。 招牌的基本價格是所給貨幣的 20。此外,每個字母要價 2。(空白也會計入計算。) 回傳的詞句包含製作招牌的成本,寫成小數點後兩位,後面接著貨幣字串。

costOf('Happy Birthday Rob!', 'dollars');
// => "Your sign costs 58.00 dollars."
透過 GitHub 編輯 連結會在新視窗或分頁中開啟
JavaScript Exercism

準備好開始 自訂招牌 了嗎?

註冊 Exercism,透過 37 個概念159 個練習 和真人引導來學習並精通 JavaScript,全部免費。