ES6：如何使用 Template Strings 创建多行字符串

在 Javascript 开发中，我们常常需要创建复杂的多行字符串，比如文本模板、HTML 片段等等。传统的字符串拼接方法很麻烦，代码可读性差，而 ES6 的 Template Strings 大大方便了这个过程。

Template Strings 是一种新的字符串语法，使用反引号（`）包裹起来，内部可以包含任意文本内容，包括变量、表达式、换行符等等，非常灵活。使用 Template Strings 创建多行字符串的步骤如下：

1. 使用反引号包裹字符串

let str = `
  这是一段多行字符串
  包含了多行内容
  可以随意换行
`;
console.log(str);

以上就是一个简单的多行字符串示例，使用反引号包裹起来，内部换行符会被自动解释，成为字符串中的换行符。

2. 引用变量和表达式

使用 Template Strings 可以方便地引用变量和表达式，格式是 ${expression}，其中 expression 可以是任意 Javascript 表达式。

let name = 'Tom';
let age = 18;
let str = `
  大家好，我叫${name}，今年${age}岁了。
  5年后我就是${age + 5}岁了。
`;
console.log(str);

上面的示例中通过 ${} 引用了两个变量，age + 5 是一个表达式，用于计算出年龄的增长值。

3. 内嵌 HTML 片段

Template Strings 还可以内嵌 HTML 片段，比如下面的示例中就用到了一个 <ul><li> 列表。

let items = ['苹果', '香蕉', '橙子'];
let str = `
  你常常买的水果有：
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;
console.log(str);

可以看到，使用 Template Strings 可以很方便地生成多行、有格式的文本内容。同时，这种方法更加直观和易读，同时也更加易于维护和拓展。

结语

ES6 带来了很多新的语法特性，Template Strings 就是其中之一，它为创建多行字符串、内嵌变量表达式、HTML 片段等等提供了极大的便利。我们可以放心地在项目中广泛使用这项功能，提高代码质量和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b7a87f306f20b3a64c2e76