前言
在 ECMAScript 2015 规范中，我们首次见到了模板字符串（Template Literals），它们为我们提供了一种以一种更加放松、更加易于阅读的方式，去动态地构建字符串。在 ECMAScript 6 中，这种语法已经成为了标准的一部分。而在 ECMAScript 2021 的规范中，又加入了一项新的功能 —— 模板字符串可以作为函数调用，而这个特性被称为“template literal tag functions”（模板字符串标记函数）。
在这篇文章中，我们将探讨这个新特性，并且了解一下如何在您的开发中最好地使用它。在我们开始之前，我们需要确保您已经对模板字符串和箭头函数有一些基本的了解。
模板字符串
在 ECMAScript 中，模板字符串由反引号``包裹，其中可以包含任意的表达式在 "${...}" 形式中。例如：
const name = 'Mary';
console.log(`Hello ${name}`);当运行这段代码时，它将输出：
Hello Mary
而在 ECMAScript 2021 中，我们可以使用这种语法，在模板字符串中包装函数调用，从而创建模板标记函数。
模板标记函数
模板标记函数是一个在模板字符串之前被指定的函数，在模板字符串运行之前被调用，并且它接收同样的字符串以及表达式输入。
当函数接收到输入时，它可以修改或操作字符串、表达式或两者都操作，最终输出修改后的字符串。
-- -------------------- ---- ------- -------- -------------------- --------------- - -- -------- ----- --------------------- - -------------- - -- -- --------- ------ ---------- - --------------------- - ----------- - ----- --- - -- --------------------------- ------ --- ---------- -- -- ---- ------ --- ---
在这个例子中，模板标记函数 tagFunction 接收了模板字符串和一个表达式。在这种情况下，我们将表达式加上了数字 1，然后再将它插入到字符串中。最后，我们得到了一个新的字符串，它包含了原始字符串以及经过微调的表达式。
模板标记函数的用途
可以使用模板标记函数从模板字符串中提取数据，然后以您自己设计的方式使用它。这真的极其灵活，它可以被用于任何您想要的事情。
例如，考虑我们如何为数字添加货币符号。使用下面的代码，我们可以用模板标记函数轻松地添加美元符号：
-- -------------------- ---- ------- -------- ----------------- --------------- - -- ------------ ----- ----- - ------------------- -- -- --------- -- -------- ----- -------- - ------------------- -------- ------ -- ---- - ------- - ----------------- ------------ -- -- ------ --------- - ----- ---- - ------ ------------------------ ---- -- ----------- -- -- ---- ---- -- --------
在这个例子中，我们定义了一个名为 currency 的模板标记函数，它将每个表达式加上 "$"，出现在原始字符串中的位置则会被连接起来。最终得到一个包含 "$" 符号的字符串。这些字符串可以用于任何我们想添加货币符号的情况。
总结
模板标记函数是一个非常有用的功能，它可以让您从模板字符串中提取数据，以您自己的方式使用它。它可以用于任意目的 —— 从添加货币符号到将 CSS 等效于 JavaScript 对象的嵌入式字符串变量一应俱全。
但是，请注意，在使用模板标记函数时，需要确保您的代码是安全的。向您的代码添加其他人编写的标记函数是非常危险的，因为它们可以对代码造成负面影响，甚至导致安全问题。
在使用模板标记函数时，请尽量使用可靠、可读、可维护且高质量的代码，这样您就可以轻松地获得所有的好处了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482c73948841e9894222d9c