在前端开发中，经常需要拼接字符串来达到我们想要的效果，比如拼接 URL 参数、拼接 HTML 片段等。在 ECMAScript 2016 中，新增了模板字符串（Template Strings）的特性，大大简化了字符串拼接的过程。
模板字符串的语法
模板字符串使用反引号 ` 来定义，它支持在字符串中使用表达式，并且表达式的结果可以直接用于字符串拼接。
下面的代码演示了如何使用模板字符串来拼接两个字符串：
const str1 = 'Hello';
const str2 = 'world';
const message = `${str1} ${str2}`;
console.log(message); // 输出 'Hello world'上面的代码中，我们使用 `${str1} ${str2}` 的形式来拼接两个字符串。在 ${} 中，我们可以使用任意合法的 JavaScript 表达式，比如变量、函数调用等等。
如果我们需要在模板字符串中直接使用反引号，可以使用反斜杠来转义：
const str = '`';
const message = `\`${str}\``;
console.log(message); // 输出 '`'模板字符串的高级用法
除了基本的字符串拼接，模板字符串还提供了一些高级的用法，可以让我们更加灵活地处理字符串。
1. 多行字符串
在传统的 JavaScript 代码中，我们想要创建多行字符串需要使用加号 + 或者反斜杠 \，比较麻烦。而在模板字符串中，我们可以直接使用换行符来创建多行字符串：
const message = `这是一个 多行字符串`; console.log(message); // 输出 '这是一个\n多行字符串'
2. 标签模板
模板字符串还支持使用标签模板（Tagged Template），即在模板字符串前加上一个函数名，并将模板字符串及其中的表达式作为参数传入该函数中。该函数可以对字符串进行加工处理，并返回一个新的字符串。
下面的代码演示了如何使用标签模板来截取模板字符串中的表达式：
-- -------------------- ---- -------
-------- ------------ ---------- -
-------------------- --------
--- ------ - ---
--- ---- - - -- - - -------------- ---- -
------ -- -----------
------ -- -----------------------------------
-
------ -- ---------------------- - ---
------ -------
-
----- ---- - -------
----- --- - ---
----- ------- - ------ ---- -- -------- --- - -- ------ ----- ------
--------------------- -- -- --- ---- -- ----- --- - -- -- ----- -----在上面的代码中，我们定义了一个名为 tag 的标签函数，它接收两个参数：第一个是一个字符串数组 strings，包含了模板字符串中所有的静态字符串部分；第二个是一个可变参数 values，包含了模板字符串中所有的动态表达式的值。在函数内部，我们将静态字符串和表达式的值拼接在一起，并将表达式的值转换成大写。
最后，我们通过 `tag` 的形式将模板字符串和 tag 函数联系在一起，让 tag 函数对字符串进行加工处理，得到最终的结果。
总结
ECMAScript 2016 中新增的模板字符串让字符串拼接变得更加方便、灵活，并且支持一些高级的用法，如多行字符串、标签模板等。掌握模板字符串的使用，可以提高我们开发效率，让代码更加简洁、易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc3fcaf6b2d6eab321752b