在 ECMAScript 2015 中，我们已经见识了 template literals（模板字符串）这一新概念，它允许开发者使用更加自然的方式来创建字符串。现在，作为 ECMAScript 2017 的一部分，它已经被进一步增强。本文将详细介绍什么是模板字符串，以及它如何在实际应用中发挥作用。
什么是模板字符串？
在以前，我们经常使用单引号或双引号来构建字符串。例如：
----- ---- - ------- ------------------- - - ------
使用模板字符串，这段代码可以这样写：
----- ---- - ------- ------------------- ----------
使用反引号（`）包裹字符串，并使用 ${} 进行变量插值。这里的 ${} 可以是任意的 JavaScript 表达式，而不仅仅是变量名。
模板字符串的新增功能
模板字符串在 ECMAScript 2017 中得到了一些有用的扩展。下面将逐一介绍这些功能。
嵌套模板字符串
模板字符串中可以使用嵌套模板字符串。例如：
----- -------- - ---- -- ------- ---------- ----- ------- - --- ---- -- --------- --- --- ---- -- ---- ---------------------- ---------------------
输出结果为：
-- ---- -- ---- --- --- ---- -- ---- ------ ------
标签模板
标签模板允许对模板字符串进行定制化处理。语法为：标签名+模板字符串。
标签名是一个函数，它接受两个参数：一个字符串数组，表示模板字符串被分割后的各个部分；其余参数则是表达式的值。例如：
----- ----- - --------- ---------- -- - --------------------- -- -------- -- ---- -------------------- -- --------- ------ ---------- - --------- - ----------- -- --------- -- ------------------------ --------------
输出结果为：
-------- -- ---- --------- ------ ------
除此之外，标签模板还可以实现一些高级功能，例如：过滤 HTML、国际化处理等。
未使用的模板字面量标记
未使用的模板字面量标记是指：模板字符串中，用于分隔模板字面量的反引号（`）后面，却没有任何表达式或模板字面量的出现。例如：
----- -------- - ---------
在 ECMAScript 2017 中，未使用的模板字面量标记将返回一个 undefined 值，而不是之前的空字符串 （""）。这一改变对于定义纯字符串变量（不需要插入表达式）非常有用，并且使得未使用的字符串变量不会被误认为和其他空字符串变量相等。
模板字符串的使用场景
模板生成 HTML
使用模板字符串可以比拼接字符串更简洁、更安全地生成 HTML 片段。
-- ------ ----- -------- - ---------------------------------- ----- -------- - ---- ----- --------- - ---- ----- ----- - ----- ----------------- ----------------- ------------------- ------- ------ ----
代码清晰度
在一些场景下，使用模板字符串可以使代码更加清晰易懂。
----- ------- - ------ ------ -- - -- ----
----- ----------- - ----------- --- ---
----- ------------ - -----------------------------
------ -
---- -- ------------- - ------- - -----------
----- -- -------------- - ------- - -----------
--
--
---------------------------- ----------------------输出结果为：
---- -- ------ ----- -- ------
总结
通过本文，我们了解了模板字符串的基本概念和用法，以及 ECMAScript 2017 中对模板字符串的一些扩展。模板字符串是 JavaScript 中非常有用的一种功能，它使得字符串的处理更加直观、方便，我们应该在实际应用中广泛地使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654ec7c97d4982a6eb7dd646