在 ES6 中，我们可以使用 Template literals 来创建更加灵活的字符串。
什么是 Template literals？
Template literals 是一种新的字符串语法，它可以让我们在字符串中嵌入表达式和变量，并且可以在字符串中换行和使用其他特殊字符。
模板字面量是用反斜线 ` 包围的字符串，其中可以嵌入表达式，例如：
const name = '张三';
console.log(`我是${name}`);在这个例子中， `是模板字面量的开始和结尾，$是表达式的开始，{}是表达式的结束。
Template literals 的优点
Template literals 有以下几个主要优点：
- 更加直观：Template literals 使字符串的嵌入更加直观，不需要像以前那样使用拼接操作符；
- 更加灵活：Template literals 可以包含多行字符串、换行符等特殊字符；
- 更加安全：Template literals 避免了一些常见的字符串错误，如忘记引号、使用无效的转义字符等；
- 更加强大：Template literals 可以嵌入表达式和变量，从而可以实现更加丰富的字符串操作。
使用 Template literals
在使用 Template literals 时，我们可以在字符串中使用 ${} 来嵌入表达式和变量。例如：
const name = '张三';
const age = 18;
console.log(`我是${name}，今年${age}岁。`);在上面的例子中，我们使用 ${} 来嵌入了两个变量 name 和 age。
我们也可以在模板字面量中使用函数调用和表达式，例如：
const names = ['张三', '李四', '王五'];
console.log(`我是${names[0]}，${names.slice(1).join('和')}也在这里。`);在这个例子中，我们使用了一个数组的 slice 方法和 join 方法来构造一个包含除了第一个元素之外的元素的字符串。
使用模板字面量的进一步指导
嵌套模板字面量
我们可以在模板字面量内部使用嵌套模板字面量来创建更加复杂的字符串。例如：
const firstName = '张';
const lastName = '三';
console.log(`我的名字是${firstName}${lastName}，我来自${`中国的${'北京市'}`}`);在这个例子中，我们使用了嵌套的模板字面量来创建一个包含城市名称的字符串。
标签模板
我们可以使用标签模板来自定义模板字面量的处理方式。标签模板是一个函数，它接受字符串和表达式，并使用它们来构造最终的字符串。
例如，我们可以使用以下标签模板来将字符串中的所有空格替换为下划线：
-- -------------------- ---- -------
-------- ------------------ ---------- -
----- ------ - ---
--- ---- - - -- - - --------------- ---- -
------------------------
-- -- - -------------- -
-----------------------
-
-
------ -----------------
-
----- - - --------
----- - - --------
-------------------------- ------- -- -- -------------在这个例子中，我们使用了 rest 参数 ...values 来捕获所有的表达式值，然后使用一个循环来构造最终的字符串。
标签模板的进一步例子
标签模板还可以用于更加复杂的字符串操作，例如：
-- -------------------- ---- -------
-------- ------------- ---------- -
----- ------ - ---
--- ---- - - -- - - --------------- ---- -
------------------------
-- -- - -------------- -
-----------------------------------
-
-
------ ----------------
-
-------- --------------- -
------ ----------------------- --- -- -
------ ----- -
---- ---- ------ -------
---- ---- ------ -------
---- ---- ------ --------
---- ---- ------ ---------
---- ---- ------ --------
-------- ------ ----
-
---
-
----- ----- - ------ -------
----- ------- - ------- ----- --- ----------
-----------------
--------- -----
------
------
-----------------------
-------
------
----------
-------
-------
---
在这个例子中，我们定义了一个 html 标签模板，它可以将一些简单的文本转换为 HTML 标签。我们还定义了一个 escapeHtml 函数，用于将一些特殊字符转换为 HTML 实体。最后，我们使用 html 标签模板创建了一个包含标题和内容的 HTML 文档。
总结
模板字面量是 ES6 中引入的一种新的字符串语法，它可以让我们在字符串中嵌入表达式和变量，并且可以在字符串中换行和使用其他特殊字符。通过嵌套模板字面量和标签模板，我们可以实现更加灵活和强大的字符串操作。
示例代码
-- -------------------- ---- -------
----- ---- - -----
----- --- - ---
------------------------------------
----- ----- - ------ ----- ------
--------------------------------------------------------------
----- --------- - ----
----- -------- - ----
----------------------------------------------------------------
-------- ------------------ ---------- -
----- ------ - ---
--- ---- - - -- - - --------------- ---- -
------------------------
-- -- - -------------- -
-----------------------
-
-
------ -----------------
-
----- - - --------
----- - - --------
-------------------------- -------
-------- ------------- ---------- -
----- ------ - ---
--- ---- - - -- - - --------------- ---- -
------------------------
-- -- - -------------- -
-----------------------------------
-
-
------ ----------------
-
-------- --------------- -
------ ----------------------- --- -- -
------ ----- -
---- ---- ------ -------
---- ---- ------ -------
---- ---- ------ --------
---- ---- ------ ---------
---- ---- ------ --------
-------- ------ ----
-
---
-
----- ----- - ------ -------
----- ------- - ------- ----- --- ----------
-----------------
--------- -----
------
------
-----------------------
-------
------
----------
-------
-------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64730ffa968c7c53b0094e66