在 JavaScript 中，字符串是一种非常基础和常用的数据类型。在开发过程中，我们经常需要进行字符串的拼接和格式化，以便更好地展示数据或者构造复杂的字符串。
在过去，我们通常使用字符串拼接符号 + 来完成字符串的拼接，例如：
const name = 'John'; const age = 25; const message = 'My name is ' + name + ', and I am ' + age + ' years old.'; console.log(message); // My name is John, and I am 25 years old.
这种方式虽然可以完成字符串的拼接，但是对于复杂的字符串拼接，代码会变得冗长且难以维护。同时，我们也需要手动处理字符串中的格式化问题，例如空格、换行等。
在 ECMAScript 2015 中，引入了 Template Literals（模板字面量）这个新特性，可以更加方便和灵活地完成字符串的拼接和格式化。
什么是 Template Literals
Template Literals 是一种新的字符串语法，使用反引号（）来表示一个字符串。在反引号中，我们可以使用 ${}` 语法来插入变量或者表达式。
例如：
const name = 'John';
const age = 25;
const message = `My name is ${name}, and I am ${age} years old.`;
console.log(message); // My name is John, and I am 25 years old.在这个例子中，我们使用了反引号（）来表示一个字符串，并使用 ${}` 语法来插入变量或者表达式。这样，我们就可以更加方便和灵活地完成字符串的拼接和格式化。
Template Literals 的优点
使用 Template Literals 有以下几个优点：
- 更加方便和灵活：使用
${}语法可以更加方便和灵活地完成字符串的拼接和格式化。 - 更加可读：使用 Template Literals 可以使代码更加简洁和易读，避免了使用
+符号进行字符串拼接时的冗长和难以维护。 - 更加安全：使用
${}语法可以避免一些常见的字符串拼接错误，例如类型不匹配等。
Template Literals 的示例
下面是一些使用 Template Literals 的示例：
插入变量
const name = 'John';
const age = 25;
const message = `My name is ${name}, and I am ${age} years old.`;
console.log(message); // My name is John, and I am 25 years old.插入表达式
const a = 3;
const b = 4;
const message = `The result is ${a + b}.`;
console.log(message); // The result is 7.多行字符串
const message = ` Hello, World! `; console.log(message); // // Hello, // World! //
嵌套使用
const name = 'John';
const message1 = `My name is ${name}.`;
const message2 = `And I am ${name === 'John' ? 'a' : 'not a'} programmer.`;
console.log(`${message1} ${message2}`); // My name is John. And I am a programmer.总结
Template Literals 是一种非常方便和灵活的字符串语法，可以更加方便和灵活地完成字符串的拼接和格式化。在实际开发中，我们可以使用 Template Literals 来提高代码的可读性和可维护性，避免一些常见的字符串拼接错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e1735a1886fbafa4e7047b