ECMAScript 2021：新式字符串格式化工具：模板字面量
在前端开发中，字符串的拼接是非常常见的操作。在JavaScript中，我们通常使用加号（+）来连接字符串，或者使用字符串模板。字符串模板可以让我们更方便地拼接字符串、插入变量和执行表达式。在ECMAScript 2021中，新式字符串格式化工具——模板字面量（Template Literals）得到了进一步的升级，为我们的编码提供更加强大和灵活的选择。
什么是模板字面量？
模板字面量是一种新的字符串格式化语法，它使用反引号 `` 包含字符串内容，并允许我们在字符串中使用变量、表达式和函数调用等特性。与使用加号（+）或字符串模板相比，模板字面量更加简单明了和灵活，能够快速提高代码的可读性和维护性。
使用模板字面量
在使用模板字面量时，我们先需要准备一个反引号（``）包裹的字符串，然后在字符串中使用“${}”的形式插入变量、表达式、函数等，如下所示：
const lang = 'JavaScript';
console.log(`Hello ${lang}!`);
//输出：Hello JavaScript!在上面的代码中，我们使用模板字面量插入了一个变量lang，它的值为'JavaScript'。变量的插入使用${}格式，中括号内可以嵌套任意表达式，包括函数调用等。
模板字面量的高级用法
除了基本的变量、表达式插入之外，模板字面量还支持一些高级的用法，如下所示：
- 多行字符串
在JavaScript中，要打印多行文本通常需要使用字符串拼接或者使用“\n”等特殊符号。而在模板字面量中，我们可以直接在字符串中换行，形成多行文本，示例如下：
// javascriptcn.com 代码示例
const html = `
<div class="container">
<ul class="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
`;
console.log(html);在上面的代码中，我们使用模板字面量创建了一个包含多行HTML代码的字符串。
- 标签模板
标签模板指的是在模板字面量前加上一个函数名，如下所示：
const lang = 'JavaScript';
function getLang(strings, ...values) {
console.log(strings); //输出：[ 'Hello ', '!' ]
console.log(values); //输出：[ 'JavaScript' ]
return 'TypeScript';
}
console.log(getLang`Hello ${lang}!`);
//输出：TypeScript在上面的代码中，我们定义了一个名为getLang的函数，在使用模板字面量时，在模板字面量前加上函数名即可调用这个函数，并把模板字面量的各个部分拆分为字符串数组strings和值数组values，我们可以在函数内部对这些内容进行处理，最后返回新的值作为模板字面量的结果。
- 原始字符串
在模板字面量中，我们可以使用“String.raw”函数来创建原始字符串。原始字符串是指字符串中的特殊字符（如\n, \r等）不会被转义，而是按照源代码中的字面意思去解析，如下所示：
const path = String.raw`C:\user\admin\folder` console.log(path); //输出：C:\user\admin\folder
在上面的代码中，我们使用“String.raw”函数创建了一个包含特殊字符的字符串，这些字符不会被转义，正常显示出来。
总结
模板字面量是ECMAScript 2021中的新式字符串格式化工具，它可以让我们更方便地拼接字符串、插入变量和执行表达式，避免了使用加号（+）或者字符串模板的繁琐操作，提高了代码的可读性和维护性。通过本文的介绍
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f51457d4982a6eb8dc28a