引言
在前端开发中，字符串拼接常常是必须要用到的，而在ES6之前，我们大多使用的是字符串连接符（+）来将字符串进行拼接。但是这种方式显然缺乏可读性和易维护性，尤其是在字符串内容较多时，拼接起来会让代码变得冗长且难以维护。而ES6带来的模板字符串（Template Strings）有着更好的可读性和易维护性，可以取代原有的字符串拼接方式。在ES9中，嵌入式模板字符串（Tagged Templates）进一步增强了模板字符串的功能，可以保留Indent（缩进）并且还能够拼接代码，这篇文章主要就是介绍它的使用方法及注意点。
嵌入式模板字符串
嵌入式模板字符串（Tagged Templates）是对模板字符串的一个增强，它允许开发者通过自定义函数的方式对模板字符串进行处理。举个例子，我们可以定义一个函数作为模板字符串的标签函数来处理字符串内容:
function tagged(stringArray, ...values) {
console.log(stringArray);
console.log(values);
}
tagged`this is a ${a} test!`;以上代码中，标签函数被定义为“tagged”，接收2个参数，第一个参数为一个由模板字符串各部分（包括插值表达式）拆分后组成的数组，第二个参数为插值表达式拆分后组成的新数组。在上述模板字符串中，字符串部分为"this is a "，插值表达式为${a}，字符串部分为" test!"。使用“tagged”函数对模板字符串进行处理，可以看到输出结果：
['this is a ', ' test!'] [a]
在嵌入式模板字符串中，我们可以使用ES6模板字符串的表达式语法${}来动态地插入变量，同时开发者还可以自定义一些规则来对模板字符串进行解析和处理，这种方式来自于此前我们提到的“标签函数”，我们可以用自定义的函数来作为模板字符串的标签函数来定义和解析规则。
除了可以自定义标签函数处理模板字符串外，我们还可以在开发过程中使用一些默认的标签函数，从而实现一些特定的功能。当我们使用默认的标签函数时，它可以接收的参数有着一定的约定：第一个参数必须是一个数组，包含了模板字符串中各部分的内容；从第二个参数开始则是各个插值表达式的值。
如何保留缩进
在日常的开发中，我们常常会遇到需要在字符串中保留 Indent（或叫缩进）的情况。比如在我们的React组件中，我们常常会需要在一个大括号中书写多行的 JSX：
-- -------------------- ---- -------
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
---
---- ----------------------- --- ---- -- -------
----
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--当我们需要将一个复杂的 JSX 渲染出来时，缩进就显得非常重要。在ES6之前，我们一般使用如下的方式来保留缩进：
-- -------------------- ---- -------
----- ---- - -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
---
---- ----------------------- --- ---- -- -------
----
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--
--------------------------------------- -----上述代码利用了正则表达式和 String.prototype.replace() 方法来实现保留缩进的需求。但这种方式显然比较麻烦，而且会导致代码变得不够简洁。在ES9中，嵌入式模板字符串就可以帮助我们更方便地保留缩进。以下是使用嵌入式模板字符串来保留 Render 函数缩进的例子：
-- -------------------- ---- -------
-------- --------------- ---------- -
------ ------------------------------- -- -
----- ------ - ----------------------
------ ---------------- --------------------- --- - --------------- -- ----
--------------
-
----- ---- - -------
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
---
---- ----------------------- --- ---- -- -------
----
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--
------------------以上代码中，我们使用了可读性更高的方式，利用了 Array.prototype.map() 方法，将字符串拆成一个个 Line，然后再使用 String.prototype.match() 方法匹配出每一个 Line 的 Indent。最后使用 String.prototype.replace() 方法，将每一行的 Indent 去掉。通过这些处理，可以实现保留 Indent 的需求。
如何拼接代码
既然使用了嵌入式模板字符串，我们也可以在标签函数中实现更强大的功能：代码拼接。例如在我们的开发中，我们需要将一些代码拼接起来，但同时还需要将这些代码缩进，这时候我们该怎么办呢？使用嵌入式模板字符串，我们可以将代码拼接和代码缩进结合起来。
下面是一个例子，我们将两段代码拼接在一起，并保留了代码的缩进：
-- -------------------- ---- -------
-------- ------------ ----- - -- -
--- ------ - - -------------- - ---
------ ------------------------- -- -------------------------------
-
-------- --------------- --------------- -
--- ------ - --- --
----- - -- - - ------------------- ---- -
------ -- ---------- - ---------------
-
------ -- -----------
------ ---------------
-
----- ----- - -
-------- ------------- -
------------------- -----------
-
--
----- ----- - -
------- --------------------------- -----------
--
-------------------
------ ----- ---- --------
-------- ----- -
------ -
-----
--------
--------
------
--
-
------ ------- ----
---以上代码中，我们定义了两个函数：一个是“indent”，用来缩进代码；另一个是“concat”，用来将多个代码拼接在一起。在“concat”中，我们首先需要将模板字符串的分隔数组和插值表达式数组合并在一起，并通过一个循环来遍历插值表达式数组，最后使用“indent”函数来缩进。这样，我们就可以使用嵌入式模板字符串来实现代码拼接和缩进的需求。
总结
嵌入式模板字符串（Tagged Templates）是对模板字符串的一个增强，它可以让我们保留 Indent 并且还能够拼接代码。在日常的开发中，我们可以使用嵌入式模板字符串来对代码进行处理，并通过自定义标签函数和默认标签函数的使用来实现一些特定的功能。
通过本文的学习，我们掌握了嵌入式模板字符串的基本用法，以及如何保留 Indent 和如何拼接代码的常用技巧。在开发过程中，我们可以结合这些技巧，来减少代码冗长，提高代码可读性和可维护性，从而更加高效地完成开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acef7248841e98949054bb