介绍
在 ECMAScript 2017 中，JavaScript 引入了新的语言特性，称为“标记模版字面量”（Tagged Template Literals）。这个功能一开始是在 ECMAScript 6 中引入，但在 ECMAScript 7 中进行了更新，提供了更强大的语言特性。
模板字面量允许您创建适应特定模板的字符串。模板可以包含表达式，这些表达式在运行时会被解释并插入到字符串中。使用模板字面量可以将数据和 HTML 内容组合成一个字符串，这使得前端开发更加便捷。
如何使用
下面是一个例子，展示了如何使用模板字面量：
const fullName = '张三';
const age = 24;
const sentence = `我的名字是 ${fullName}，我今年 ${age} 岁了。`;
console.log(sentence);当您运行这段代码时，它将在控制台输出以下内容：
我的名字是张三，我今年24岁了。
在这里，我们使用模板字面量创建了一段包含表达式的字符串。在这个字符串中，我们使用了两个变量 fullName 和 age。这些变量被包含在 ${} 中，表示它们是模板字符串的表达式部分。
支持标记模板字面量
标记模板字面量允许您使用函数来处理模板字符串。这为组合字符串和数据提供了更丰富的可能性，例如处理 HTML 内容并将其与数据结合。
下面是标记模板字面量的示例：
-- -------------------- ---- ------- -------- -------------- ---------- - --------------------- -------------------- - ----- -------- - ----- ----- --- - --- ----------- --------------- ------ -----
在这个例子中，我们定义了一个名为 myTag 的函数。这个函数接受模板字符串的字符串字面量和每个表达式的值，然后在控制台中输出它们。
当我们调用这个函数时，我们将字符串字面量传递到函数中，并使用 ${} 包括表达式。在运行时，该函数将被调用，并接收由字符串和表达式组成的数组，然后将它们输出到控制台中。
包装字符串
标记模板字面量还可以用来创建包装字符串。例如，如果我们想要一个 HTML 片段作为字符串，我们可以使用标记模板字面量来处理它。
下面是一个例子，展示了如何使用标记模板字面量来包装一个 HTML 片段：
-- -------------------- ---- -------
-------- ------------- -------- -
--- ------ - ---
------- - - -- - - --------------- ---- -
------ -- -----------
---- - ------------ -
------ -- --------
-
-
------ -------
-
----- ---- - -----
----- --- - ---
----- --- - ------------- ------------------ ------ ---------
-----------------在这个例子中，我们定义了一个名为 html 的函数。这个函数接受模板字符串的字符串字面量和每个表达式的值。在这个函数中，我们通过迭代字符串并将其组合到一个字符串中来创建包装的 HTML 片段。
当我们调用 html 函数时，我们传递一个包含 HTML 片段模板的字符串字面量，以及每个表达式的值。在函数中，我们使用 args 数组轮流添加表达式字符串和数值。最后，我们返回组合的 HTML 片段。
总结
模板字面量是 ECMAScript 2017 中一个非常有用的语言特性。它可以帮助我们更方便地组合字符串和数据，以及快速生成 HTML 片段。通过使用标记模板字面量，您可以进一步将模板字符串和数据组合起来，以创建定制的字符串格式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0f47d83d39b488154fdda