在 ECMAScript 2015 中，字符串模板是一个非常有用的功能，它允许我们在字符串中插入变量。ECMAScript 2017 引入了一种新的字符串模板：标签模板（Tagged Template）。与普通的字符串模板不同，标签模板允许我们自定义模板字符串的行为，使其更加灵活和强大。
标签模板是什么？
标签模板是一种特殊的函数调用，它使用反引号（`）包裹字符串，并在反引号前面加上一个函数名，例如：
myTag`Hello, ${name}!`;在这个例子中，myTag 是一个函数名，Hello, ${name}! 是一个模板字符串。
标签模板的函数接收一个数组和若干个参数。数组中的每一个元素都是模板字符串中插入变量的值，而参数则是模板字符串中没有插入变量的部分。例如，对于上面的例子，myTag 函数接收的参数如下：
function myTag(strings, name) {
// strings: ['Hello, ', '!']
// name: 变量值
}在函数内部，我们可以使用 strings 数组和参数来自定义处理模板字符串的行为。例如，我们可以将变量 name 转化成大写字母，然后返回一个新的字符串。
function myTag(strings, name) {
return `${strings[0]}${name.toUpperCase()}${strings[1]}`;
}
const name = 'world';
const result = myTag`Hello, ${name}!`;
console.log(result); // 输出：Hello, WORLD!标签模板的应用
标签模板有很多应用场景，下面我们介绍几个常见的用法。
1. 多语言支持
标签模板可以使多语言支持变得更加方便。我们可以将不同语言的字符串存储在一个对象中，然后使用标签模板来根据当前语言动态选择字符串。例如：
-- -------------------- ---- -------
----- -------- - -
--- -
--------- ------- ---------
--
--- -
--------- -------------
-
--
-------- ------------- ---------- -
----- ---- - ------------------ -- -----
----- ------- - ---------------
----- ------ - ---
--------------------- -- -- -
-----------------
-- -- - -------------- -
-----------------------
-
---
------ --------------------------------------- --- ----- -- ---------------
-
----- ---- - --------
----- ------ - -------------- ---------
-------------------- -- --------- ------ - ---------在这个例子中，i18n 函数接收一个字符串数组 strings 和若干个参数 values。函数根据当前语言选择对应的字符串，然后使用 strings 和 values 组合成一个新的字符串。最后，函数使用正则表达式替换字符串中的变量，将其替换成对应的值。
2. 安全的 HTML 渲染
在 Web 开发中，我们经常需要将用户输入的数据渲染成 HTML。然而，这样做存在安全风险，因为用户可能会注入恶意代码。标签模板可以帮助我们解决这个问题。
我们可以编写一个名为 html 的标签模板函数，它使用 DOMParser 将字符串转化成 DOM 对象，然后过滤掉所有不安全的标签和属性。例如：
-- -------------------- ---- -------
-------- ------------- ---------- -
----- -------- - -------------------- ---- -- -- --- - --- - ---------- -- ---- ----
----- ------ - --- ------------
----- --- - -------------------------------- -------------
----- --------- - ----- ------ ---- --------
----- ---------- - -------- -------
----- ------ - ------------------------------ -------------------------
--- -----
----- ----- - ------------------ -
----- --- - ---------------------------
-- -------------------------- -
----------------------------------
---------
-
--- ------ ---- -- ----------- -
-- ------------------------- -
----- ----- - ------------------------
-- ----------------------------- -
----------------------------------
------
-
-
-
-
------ -------------------
-
----- ---- - -----------------------------------
----- ------ - -------------- --------------
-------------------- -- ------------ -------------------------------------------------在这个例子中，html 函数接收一个字符串数组 strings 和若干个参数 values。函数将它们组合成一个 HTML 模板字符串。然后，函数使用 DOMParser 将字符串转化成 DOM 对象，并过滤掉所有不安全的标签和属性。最后，函数返回过滤后的 HTML 字符串。
总结
标签模板是 ECMAScript 2017 中一个非常有用的新特性，它可以使字符串模板更加灵活和强大。在实际应用中，我们可以使用标签模板来实现多语言支持、安全的 HTML 渲染等功能。如果你还没有学习过标签模板，那么现在就是时候开始学习了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66011dc6d10417a222c47465