JavaScript 字符串插值

布满荆棘的人生 2023-09-30 08:06 14阅读 0赞

当您需要添加 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 应用程序往往很复杂并且有条件输出，因此当您需要将错误或某些变量值记录到屏幕上时，模板字符串肯定会帮助您。