ES6 中引入了模板字符串（Template Strings），它是一种新的字符串语法，可以让我们更方便地拼接字符串。本文将详细介绍模板字符串的语法、功能以及实战技巧，并提供一些示例代码。
基本语法
模板字符串使用反引号（`）来定义，可以在字符串中使用变量、表达式和函数调用等。下面是一个简单的示例：
const name = 'Jack';
const age = 20;
const message = `My name is ${name}, and I'm ${age} years old.`;
console.log(message);
// 输出：My name is Jack, and I'm 20 years old.在上面的代码中，我们使用了 ${} 来包含变量和表达式，这样可以在字符串中直接使用它们的值。需要注意的是，变量和表达式必须放在 ${} 中才会被解析。
多行字符串
传统的字符串语法不支持多行字符串，需要使用 \n 或者 + 来进行拼接。而模板字符串可以直接定义多行字符串，只需要在反引号中写入换行符即可。下面是一个示例：
-- -------------------- ---- ------- ----- ---- - - ---- -- - ---------- ----- -- ------------------ -- --- -- ---- -- - -- ---------- -- -----
嵌套
模板字符串可以嵌套使用，这样可以更方便地拼接复杂的字符串。下面是一个示例：
-- -------------------- ---- -------
----- ---- - -------
----- --- - ---
----- ------- - -
-----
----------------
------- ----------
------
--
---------------------
-- ---
-- -----
-- -------------
-- ------- ------
-- ------在上面的代码中，我们使用模板字符串生成了一个包含 HTML 标签的字符串，这样可以更方便地进行 DOM 操作。
标签模板
模板字符串还支持标签模板（Tagged Templates），这是一种高级用法，可以让我们自定义模板字符串的解析方式。标签模板的语法是在模板字符串前面加上一个函数名，这个函数将会处理模板字符串并返回最终的结果。下面是一个示例：
-- -------------------- ---- -------
-------- -------------- ---------- -
--- ------ - ---
--- ---- - - -- - - --------------- ---- -
------ -- -----------
-- ----------- -
------ -- ------------------------
-
-
------ -------
-
----- ---- - -------
----- --- - ---
----- ------- - -------- ---- -- -------- --- --- ------ ----- ------
---------------------
-- ----- ---- -- ----- --- --- -- ----- ----在上面的代码中，我们定义了一个 upper 函数来处理模板字符串。这个函数接收两个参数：strings 和 ...values，其中 strings 是一个字符串数组，包含模板字符串中的所有文本，而 ...values 则是一个可变参数，包含模板字符串中所有的变量和表达式。在函数中，我们遍历 strings 数组和 ...values 参数，将它们拼接起来，并将变量和表达式转换为大写字母。最后返回处理后的字符串。
实战技巧
下面是一些使用模板字符串的实战技巧：
1. 生成 URL
使用模板字符串可以更方便地生成 URL，如下所示：
-- -------------------- ---- ------- ----- ------- - ---------------------- ----- ---- - ------ ----- ----- - - -- ------------- ----- -- -- ----- --- - ------------------------------------------------ -- ------------------------------------ ----------------- -- ----------------------------------------------
在上面的代码中，我们使用模板字符串拼接了一个 URL，其中包含了基础 URL、路径和查询参数。需要注意的是，我们使用了 Object.keys 和 Array.prototype.map 来将查询参数转换为字符串。
2. 生成 HTML
使用模板字符串可以更方便地生成 HTML，如下所示：
-- -------------------- ---- -------
----- ----- - --------- --------- ----------
----- ---- - -
----
---------------- -- -------------------------------
-----
--
------------------
-- ---
-- ----
-- --------------
-- ---------------
-- ---------------
-- -----在上面的代码中，我们使用模板字符串和 Array.prototype.map 生成了一个包含多个列表项的 HTML 列表。
3. 生成 CSS
使用模板字符串可以更方便地生成 CSS，如下所示：
-- -------------------- ---- -------
----- ----- - ------
----- ---- - -------
----- ----- - -
---- -
------ ---------
---------- --------
-
--
-------------------
-- ---
-- ---- -
-- ------ ----
-- ---------- -----
-- -在上面的代码中，我们使用模板字符串生成了一个包含颜色和字体大小的 CSS 样式。
总结
模板字符串是 ES6 中的一个新特性，它可以让我们更方便地拼接字符串，并且支持多行字符串、嵌套和标签模板等高级用法。在实际开发中，我们可以使用模板字符串来生成 URL、HTML、CSS 等内容，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d2be23add4f0e0ffb0bd2c