什么是模板字符串？
模板字符串是 ES6 中新增的一种字符串语法，它可以让我们更方便地拼接字符串，同时还支持多行字符串和插值表达式。
使用模板字符串时，我们需要使用反引号 `` 包裹字符串内容。在模板字符串中，我们可以通过 ${} 将变量或表达式嵌入到字符串中。
下面是一个简单的示例，展示了如何使用模板字符串来拼接字符串：
const name = 'Alice';
const age = 20;
const message = `My name is ${name}, and I'm ${age} years old.`;
console.log(message); // 输出：My name is Alice, and I'm 20 years old.模板字符串的实际应用
多行字符串
在传统的 JavaScript 中，如果我们需要创建多行字符串，我们需要使用转义字符 \n 来表示换行。而使用模板字符串，我们可以直接在字符串中输入换行符，从而更方便地创建多行字符串。
下面是一个示例，展示了如何使用模板字符串来创建多行字符串：
const message = `This is a
multi-line
string.`;
console.log(message); // 输出：This is a
// multi-line
// string.插值表达式
使用模板字符串，我们可以将变量或表达式嵌入到字符串中，从而更方便地拼接字符串。这在需要动态生成字符串的场景下非常有用。
下面是一个示例，展示了如何使用模板字符串和插值表达式来动态生成字符串：
const items = ['apple', 'banana', 'orange'];
const list = `
<ul>
${items.map(item => `<li>${item}</li>`).join('')}
</ul>
`;
console.log(list); // 输出：<ul><li>apple</li><li>banana</li><li>orange</li></ul>在上面的示例中，我们使用了模板字符串和插值表达式来动态生成一个 HTML 列表。通过使用 map 和 join 方法，我们可以将数组中的每个元素转换为一个 li 标签，并将它们连接起来。
带标签的模板字符串
除了普通的模板字符串，ES6 还引入了带标签的模板字符串。带标签的模板字符串允许我们在模板字符串前添加一个标识符，从而可以自定义模板字符串的解析方式。
下面是一个示例，展示了如何使用带标签的模板字符串：
-- -------------------- ---- -------
-------- ------------------ ---------- -
--- ------ - ---
------------------------ -- -- -
------ -- -------
-- ----------- -
------ -- ----------------------------
-
---
------ -------
-
----- ---- - --------
----- --- - ---
----- ------- - ------------ ---- -- -------- --- --- ------ ----- ------
--------------------- -- ----- ---- -- ------------------- --- --- --------------- ----- ----在上面的示例中，我们定义了一个 highlight 函数，它接收一个模板字符串和一些值。在 highlight 函数中，我们使用 forEach 方法遍历模板字符串中的每个字符串和值，并根据需要将值用 <mark> 标签包裹起来。最后，我们将所有字符串和值连接起来，返回一个新的字符串。
总结
模板字符串是 ES6 中新增的一种字符串语法，它可以让我们更方便地拼接字符串，同时还支持多行字符串和插值表达式。在实际开发中，模板字符串可以帮助我们更方便地动态生成字符串，从而提高开发效率。同时，带标签的模板字符串还可以让我们自定义模板字符串的解析方式，从而满足更多的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6568273cd2f5e1655d0e9844