ES6 中的模板标记函数是一种特殊的函数，可以处理模板字符串并返回一个处理后的字符串。模板标记函数有很多用途，比如可以用它轻松地生成 HTML 或 SQL 语句，也可以用它实现国际化等功能。
为什么要使用模板标记函数？
在 ES5 中，我们通常使用字符串拼接的方式来生成复杂的字符串，比如：
var name = "张三"; var age = 20; var str = "我的名字是" + name + "，今年" + age + "岁。"; console.log(str); // 输出：我的名字是张三，今年20岁。
这种方式虽然可以实现字符串拼接，但是当字符串变得复杂时就会变得难以维护和阅读。而使用模板标记函数可以轻松地处理复杂的字符串，并且让代码更加易读和易于维护。
如何使用模板标记函数？
使用模板标记函数的方式是在模板字符串前加上函数名，并且把整个模板字符串传递给该函数作为第一个参数。比如：
function myTagFunc(strings, ...values) {
console.log(strings); // 输出：["我的名字是", "，今年", "岁。"]
console.log(values); // 输出：["张三", 20]
}
var name = "张三";
var age = 20;
myTagFunc`我的名字是${name}，今年${age}岁。`;在上面的例子中，我们定义了一个名为 myTagFunc 的函数，并将其用作模板标记函数。在调用 myTagFunc 函数时，我们把整个模板字符串传递给了它，并且把模板字符串中用 ${} 包含的表达式拆分成了两个参数：一个是字符串数组，另一个是表达式的值（如果有多个表达式，那么就有多个值）。
模板标记函数可以返回任何类型的值，不一定是字符串。比如，我们可以使用它来实现国际化功能：
-- -------------------- ---- -------
--- --------- - -
--- -
------ ------- ---------
--
--- -
------ -------------
-
--
-------- ------------- ---------- -
--- -------- - ----- -- -----------
--- ------- - -----------
-- -------------------- -- ----------------------------- -
------- - -----------------------------
-
--- ------ - ----------
--- ---- - - -- - - -------------- ---- -
--------------------- - --------- - ----
-
------ ----------------
-
--- ---- - -----
----------------------- ----------- -- ---------在上面的例子中，我们定义了一个名为 i18n 的函数，并把它用作模板标记函数。它会根据当前语言环境选择相应的消息，并将表达式的值插入到消息中。
模板标记函数的高级用法
除了上面介绍的基本用法，模板标记函数还有很多高级用法。比如，我们可以在标记函数中使用标记模板来处理模板字符串：
-- -------------------- ---- -------
--- ---- - -----
--- --- - ---
-------- ------------------ ---------- -
-- ------
--- ------ - ---
--- ---- - - -- - - --------------- ---- -
------ -- -------------------------
-- ----------- -
------ -- ----------
-
-
------ -------
-
-------------------------------------------
-- ------------在上面的例子中，我们使用了一个标记模板来处理模板字符串。标记模板是一种特殊的标记，在函数名称和模板字符串之间加入即可。标记模板的作用是将模板字符串处理成标记函数的参数，并将它们传递给标记函数。
我们还可以使用模板标记函数来生成 HTML 或 SQL 语句：
-- -------------------- ---- -------
-------- ------------- ---------- -
--- ------ - -----------
--- ---- - - -- - - -------------- ---- -
------ -- --------------------- - --------- - ---
-
------ -------
-
-------- --------------- -
------ -----------
-------------- --------
-------------- -------
-------------- -------
-------------- ---------
-------------- ---------
-上面的例子中，我们定义了一个名为 html 的函数，并把它用作模板标记函数。该函数会将模板字符串中的 HTML 特殊字符进行转义，从而避免 XSS 攻击。在使用该函数时，我们只需要将需要转义的字符串插入到模板字符串中即可。
总结
模板标记函数是 ES6 中一个非常实用的特性，可以轻松地处理复杂的字符串，让代码更加易读和易于维护。当我们需要生成 HTML 或 SQL 语句，或者需要实现国际化等功能时，都可以使用模板标记函数来完成。在实际开发中，我们可以根据需求灵活运用模板标记函数的特性，从而写出更加高效和易于维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a7c2c48841e989489e6a0