如何在 JavaScript 中進行字串插值
Kirill Ibrahim
2021年2月28日
2020年11月24日
JavaScript 有一個很好的功能，叫做字串插值，可以直接在字串中注入一個變數、一個函式呼叫和一個算術表示式。
在本文中，我們將介紹如何進行字串插值。下面我們會有程式碼示例，大家可以在機器上執行。
在 JavaScript 中利用 ES6 的新特性進行字串插值運算
在 ES6 釋出之前，JavaScript 中沒有字串插值功能。由於缺乏這一功能，導致了字串連線程式碼，如下圖所示。
例子
const generalInformation = (firstName, lastName, Country) => {
return "First Name " + firstName + " Last Name: " + lastName + ". "
+ Country + " is my country.";
}
console.log(generalInformation("Mark", "John", "US"));
輸出：
First Name Mark Last Name: John. US is my country.
字串插值是一個允許你直接將變數、函式呼叫和算術表示式注入到字串中的功能，而不需要對多行字串使用連詞或轉義字元。
在字串插值中，我們使用回標來表示模板字元，並使用格式–${ourValue} 來插入變數、函式呼叫和算術表示式等動態值。
例子
const generalInformation = (firstName, lastName, Country) => {
return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
}
console.log(generalInformation("Mark", "John", "US"));
輸出：
First Name: Mark Last Name: John. Country: US
我們現在知道了字串內插是一個多麼神奇的功能。
例子
讓我們注入一個函式呼叫和一個算術表示式。
const generalInformation = (firstName, lastName, Country) => {
return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
}
console.log(generalInformation("Mark", "John", "US"));
console.log(`${generalInformation("Mark", "John", "US")} He is a Worker in our company.`);
console.log(`sum of 10 and 6 is ${10+6}.`);
輸出：
First Name: Mark Last Name: John. Country: US
First Name: Mark Last Name: John. Country: US He is a Worker in our company.
sum of 10 and 6 is 16.
例子：
我們可以在字串插值中使用條件語句。
const isEvenOrOdd = (num) => {
console.log(`Number is ${num%2 === 0 ? 'even' : 'odd'}`);
}
isEvenOrOdd(5);
isEvenOrOdd(8);
輸出：
Number is odd
Number is even