如何在 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