JavaScript 字符串插值

当您需要添加 JavaScript 变量值和表达式来完成字符串时，您的第一个直觉可能是使用一元运算符连接字符串+，如下例所示：

const name = "Nathan";
const age = 29;
console.log("My name is " + name + " and I'm " + age + " years old.");
// "My name is Nathan and I'm 29 years old."
But JavaScript ES6 actually provides you with a cleaner 

但是 JavaScript ES6 实际上为您提供了一种更简洁的方法来将表达式添加到字符串中。您可以使用反引号和占位符符号来形成字符串，而不是使用单引号''或双引号来形成字符串。""\``\${expression}

使用反引号形成字符串称为模板文字或模板字符串，它的工作原理如下：

const name = "Nathan";
const age = 29;
console.log(`My name is ${name} and I'm ${age} years old.`);
// "My name is Nathan and I'm 29 years old."

模板字符串的工作方式与普通字符串文字（单引号和双引号）一样，只是在字符串中添加了嵌入 JavaScript 表达式。

在上面的代码示例中，打印的字符串中嵌入了变量name和值，但您实际上可以执行一些 JavaScript 表达式评估，如下所示：age

console.log(`10 - 5 equals ${10 - 5}`); // "10 - 5 equals 5"

您甚至可以使用三元运算符来评估条件，如下所示：

let name;
console.log(`Hello, ${name ? name : "World"}!`);
// "Hello, World!"

name = "John";
console.log(`Hello, ${name ? name : "World"}!`);
// "Hello, John!"

最后，当您需要将文字占位符语法"${}"写入模板字符串时，您需要通过在\语法之前放置反斜杠符号来转义占位符语法，如下所示：

console.log(`My name is \${John Smith}`);
// "My name is ${John Smith}"

如果没有反斜杠，JavaScript 会将文本"${John Smith}"视为表达式而不是文字值。

来自模板字符串的字符串插值是 ES6 JavaScript 最有用的特性之一。现代 Web 应用程序往往很复杂并且有条件输出，因此当您需要将错误或某些变量值记录到屏幕上时，模板字符串肯定会帮助您。