模板字符串始于 ES6，是一种更易读且可嵌入变量的字符串表达方式。而在 ES12 中，模板字符串又引入了一种崭新的语法：模板专属标签。这种标签允许我们将模板字符串和一个函数挂钩，可以实现更为灵活的处理和优化。
什么是模板专属标签
模板专属标签其实就是函数，该函数接收到模板字符串后会对其进行特定处理。这个函数名必须放在模板字符串的``前面，并在该函数的参数中传递模板字符串。例如：
-- -------------------- ---- -------
-------- ------------- -------- -
------ ------------------- -
----- ---- - -------------------- - -- -- ---
----- ------ - -------------
------------------ -- -- -
----- ----- - --------------------- - ----------- - ----------
------------------ --------- - ----
---
------ ----------------
--
-
----- ---- - ------ --- - ---
----- --- - ------- -------- --- --- ------ ----- ------
-----------------模板字符串 functions 遵循和普通标准函数类似的语法。
优化模板字符串
模板专属标签能够让我们更加灵活地处理模板字符串，进而实现更多的优化。而在实际案例中，大多数的优化都涉及到 JavaScript 解析器在处理模板字符串时造成的性能问题。
问题一：换行符
假如在模板字符串中有换行符，例如：
const str = `这是一个
多行字符串`;
console.log(str);换行符会被转义为 \n，导致最终的字符串存在空格和换行。而在模板专属标签中，我们可以通过传递模板字符串前使用的标签名称来判断是否有换行符，从而解决这个问题。
-- -------------------- ---- -------
-------- ------------ ---------- -
--- --- - ---
--- ---- - - -- - - --------------- ---- -
-- -- - -- --- -- -----
-- ----------- --- -- ----------
--- -- -----------
-
------ ----
-
----- ---- - ------
----- --- - ---------- --------
---- -- - ---------- ---------
----------------- -- ------ ----
-- ---- -- - ---------- -------问题二：转义字符串
在模板字符串中，我们可以使用转义字符 \ 转义某些特殊字符。但在这个过程中，容易出现转义字符重复，导致 JavaScript 解析器产生额外的开销。而在模板专属标签中，我们可以将整个字符串都当做普通字符串处理，不进行额外的转义，最终由 JavaScript 解析器来解析。
-- -------------------- ---- -------
-------- ------------- ---------- -
--- ------ - ---
--- ---- - - -- - - --------------- ---- -
------ -- -----------
-- -- - -------------- -
------ -- ----------
-
-
------ -------
-
------------------- -------------- ---------问题三：函数优化
在模板字符串中，通常会利用模板字符串语法内的变量以及函数调用。但这样做可能导致每次模板字符串被使用时都要重新计算一次。而通过模板专属标签可以解决这个问题。将我们通常的模板字符串拆成若干片段，自定义一个方法，将模板字符串和输入参数传入自定义方法，处理模板字符串的结果就是模板字符串的处理结果。
如果加入缓存机制，我们甚至可以以时间换空间。
-- -------------------- ---- ------- -------- ----------------- ---------- - --- ---- - ---------- ----- ------- - ----------------- --- ----- - ----- - --------------------------------- ------ ------------------------------------------------ - ----- ----- - ---- ----- --- - ---- ----- --- ----------------------- ----------------- -- -------- ------- ---- ----- -- ------
总结
模板专属标签在优化模板字符串的过程中起到了至关重要的作用。优化之后的模板字符串性能得到了大幅提升，可以让前端工程师可以更好地处理模板字符串，提升代码质量和可读性。因此在日常开发过程中，我们应该更好地掌握模板专属标签的用法，并不断地优化代码，以提升系统性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d1e6e48841e9894b6a9c9