ECMAScript 2019 中的字符串模板：使用 `${}` 实现变量替换

在 JavaScript 的历史上，字符串拼接一直都是一项非常常见的操作。在早期的版本中，我们通常使用加号 (+) 对多个字符串进行拼接，例如：

let name = "Tom";
let age = 20;
let message = "My name is " + name + " and I am " + age + " years old.";
console.log(message); // "My name is Tom and I am 20 years old."

这样的字符串拼接看起来笨拙而且容易出错。因此，在 ECMAScript 6 中，引入了字符串模板，可以更加方便地进行字符串操作。

使用 ${} 进行变量替换

字符串模板使用反引号（`）包裹起来，这使得我们可以使用${}来插入变量，例如：

let name = "Tom";
let age = 20;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // "My name is Tom and I am 20 years old."

这种方式比之前的字符串拼接更加直观和简洁，而且还可以在${}中做一些简单的计算和操作，例如：

let x = 10;
let y = 20;
let result = `The sum of ${x} and ${y} is ${x + y}.`;
console.log(result); // "The sum of 10 and 20 is 30."

更加复杂的字符串拼接

如果我们需要进行更加复杂的字符串拼接，我们可以在${}中使用函数调用、逻辑表达式等操作。例如：

let name = "Tom";
let age = 20;
let message = `${name} is ${age > 18 ? 'an adult' : 'a teenager'}.`;
console.log(message); // "Tom is an adult."

在这个例子中，我们使用了条件（三元）运算符，根据年龄的大小选择不同的文本。

总结

字符串模板为我们提供了一种更加方便和直观的字符串拼接方式，使代码更加简洁易懂。在以后的开发中，我们可以使用${}来插入变量，也可以在${}中使用函数调用、逻辑表达式等操作，从而进行更加复杂的字符串操作。

希望本文能够对广大的前端开发者有所帮助，在以后的开发中能够更加熟练地使用字符串模板。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2472048841e9894e9ddfe