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

你可能感兴趣的:(javascript,vue.js,前端)