随着 JavaScript 的发展，字符串拼接一直是一个十分常见的操作。以往我们习惯使用 + 或者字符串拼接函数来实现。这种方式虽然简单易用，但在实际场景中也存在许多缺陷。为此，ECMAScript 6 引入了一个新的概念：Template String（模板字符串）。
Template String 简介
模板字符串是一种全新的字符串语法，它提供了更加方便灵活的字符串拼接方式，解决了以往字符串拼接操作的一些痛点。
模板字符串使用反引号 (`) 包含字符串内容，在字符串中使用 ${} 来嵌入 JS 表达式，从而实现字符串和变量的动态拼接。例如：
const name = 'David'; const age = 20; const message = `My name is ${name}, I am ${age} years old`; console.log(message); // => My name is David, I am 20 years old
可以看到，模板字符串中的变量使用 ${} 包括，可以简化我们以往在字符串拼接时需要进行的格式转换操作，从而提高了代码的可读性和可维护性。
此外，模板字符串可以自动识别换行符，使得多行字符串的定义更加自然，如下：
-- -------------------- ---- ------- ----- ---------------- - ------ --------- ----------- ------------------------------ -- ----- --------- --------- --展开代码
可以看到，使用模板字符串定义多行字符串和我们平常写的多行字符串是一致的。
Template String 的细节
虽然使用模板字符串可以方便地进行字符串拼接操作，但也需要注意一些事项，下面我们来谈谈模板字符串的一些细节。
可嵌套
模板字符串可以嵌套使用，如下：
-- -------------------- ---- ------- ----- ---- - -------- ----- ------- - - -- ---- -- -------- --- ---- ------ ------ - ------- -- ------ -- --------------------- -- -- ---- -- ------ --- ---- ------ --- - ------- -- ---- --展开代码
可以看到，嵌套使用模板字符串可以使代码更加整洁，也可以实现类似于组件化的效果。
不同类型数据的拼接
在模板字符串中，可以对字符串、数字、布尔值等各种类型的数据进行拼接。拼接时，会自动调用数据类型的 toString() 方法将数据转换为字符串。
-- -------------------- ---- ------- ----- ---- - -------- ----- --- - --- ----- ------ - ----- ----- ------ - ------ ------ ---- ------ ----- -------- - -------- -- ------ ----- ---- ------ -- ---------- ------ -- ----------- ---------------------- -- ----- -- -- ----- ---- ------ -- ----- ------ -- ------- ------- --展开代码
可以看到，在模板字符串中将对象类型的数据进行拼接，会自动调用对象的 toString() 方法。如果不想调用 toString() 方法，需要将对象转换为 JSON 格式后再拼接。
特殊字符处理
在模板字符串中，有些特殊字符需要通过转义符（\）进行处理，如下：
const message = `Hello, my name is \"David\".`; console.log(message); // => Hello, my name is "David".
在模板字符串中，还可以使用 Unicode 转义符号 \uXXXX，以及十六进制转义符号 \xXX。
const message = `\u4f60\u597d\u4e16\u754c`; console.log(message); // => 你好世界
标签模板
标签模板是模板字符串的一种高级用法，用于对模板字符串进行自定义处理。通过定义一个函数，将模板字符串作为参数传入函数中，解析出模板字符串中的各个部分并进行处理，最终将处理结果作为字符串输出。
标签模板的语法：fn + 模板字符串。例子如下：
-- -------------------- ---- ------- -------- ------------ ---------- - --- ------ - --- ------- - - -- - - -------------- ---- - ------ -- --------------------------- - ------ -- ---------------- - --- ------ ------- - ----- ---- - -------- ----- --- - --- --------------------- ---- -- -------- - -- ------ ----- ------- -- -- -- ---- -- -------- - -- ---- ----- ----展开代码
可以看到，在上面的代码中，我们定义了一个名为 render 的函数，函数的第一个参数为一个数组（数组的每一项是模板字符串中的普通字符串部分，values 数组中保存了所有的 JS 表达式的值）。在函数中，我们将这些数组合并，最后返回处理后的结果。
总结
Template String 是 ECMAScript 2019 中新增的一种字符串语法，它可以更加方便灵活地进行字符串拼接操作，提高了代码的可读性和可维护性。但是，在使用过程中需要注意一些细节问题，规避一些使用上的困难。希望本篇文章对大家有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648563df48841e989443e96a
