在编写 JavaScript 代码时，我们常常需要使用字符串来存储和操作文本数据。在过去的版本中，我们需要使用一系列的转义字符或者拼接符来表示多行字符串，这样既不直观，也容易出错。而在 ECMAScript 2021 中，多行字符串成为了官方规范的一部分，大大简化了我们使用字符串的操作。
什么是多行字符串？
顾名思义，多行字符串是可以跨越多行的字符串，不需要使用转义符或者拼接符来合并多行的文本。简单来说，就是可以使用一对反引号 ``` 来包含一段多行文本。这样不仅可以让你的代码更加整洁，还可以提高代码的可读性。
如何使用多行字符串？
使用多行字符串非常简单，只需要使用一对反引号 ``` 来包含多行文本即可。例如：
const message = `这是一段 跨越多行的 文本字符串。`;
上面的代码中，我们使用了一对反引号 ``` 来包含了一段多行文本字符串。这段字符串包含了三行文本，分别是 "这是一段"、"跨越多行的"、"文本字符串。"。
使用多行字符串还有一个好处就是，可以在字符串中使用单引号或者双引号，而无需使用转义符。例如：
const message = `这是一段包含了 "双引号" 和 '单引号' 的文本字符串。`;
上面的代码中，我们使用了一对反引号 ``` 来包含了一段多行文本字符串。这段字符串包含了一些引号，但是我们并没有使用转义符。
如何在多行字符串中包含变量？
在多行字符串中，我们可以使用变量插值来插入变量。使用变量插值时，我们可以在反引号内使用 ${} 包裹变量。例如：
const name = '张三';
const message = `你好，${name}！欢迎来到我们的网站。`;上面的代码中，我们使用了 + 拼接字符串的方法，但是在 ECMAScript 2021 中，我们可以使用变量插值来更加简化代码。
如何使用标签模板在多行字符串中添加样式？
除了使用变量插值之外，我们还可以使用标签模板来在多行字符串中应用样式或者其它的自定义逻辑。标签模板是一种特殊的函数，它可以接收一个多行字符串作为参数，并返回一个处理后的结果。例如：
function bold(strings, ...values) {
let result = '';
for (let i = 0; i < values.length; i++) {
result += strings[i];
result += `<strong>${values[i]}</strong>`;
}
result += strings[strings.length - 1];
return result;
}
const message = bold`这是一段 <em>斜体</em> 和 ${'加粗文字'} 的文本字符串。`;上面的代码中，我们定义了一个 bold 标签模板函数，它会将传入的字符串中的部分文本加粗处理。然后我们可以使用 bold 标签模板函数来处理多行字符串中的文本。
总结
在 ECMAScript 2021 中，多行字符串成为了官方规范的一部分，提供了一种更加方便和直观的方式来处理多行文本。使用多行字符串可以让我们的代码更加整洁，提高代码的可读性。在多行字符串中，我们可以使用变量插值来插入变量，使用标签模板来应用样式或者其它自定义逻辑。这些技巧可以让我们写出更加简洁而优美的代码，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65accc8aadd4f0e0ff65ef10