ES6 中的 Template Literal：应用与技巧详解-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，字符串是一种非常常用的数据类型。而在 ES6 中，新增了一种字符串模板的语法：模板字面量（Template Literal）。模板字面量不仅可以更方便地拼接字符串，还可以支持变量的插入、多行文本的输出等功能。在本文中，我们将深入探讨模板字面量的应用与技巧，帮助读者更好地掌握这一语法。

基本用法

模板字面量是以反引号（`）包裹的字符串，示例如下：

const str = `Hello, world!`;

与普通字符串不同的是，模板字面量可以在字符串中插入变量，使用 ${} 来引用变量。示例如下：

const name = 'Tom';
const str = `Hello, ${name}!`;
console.log(str); // 输出：Hello, Tom!

在上面的示例中，我们使用 ${} 将变量 name 插入到了字符串中。需要注意的是，${} 中可以放置任何 JavaScript 表达式，例如：

const a = 10;
const b = 20;
const str = `a + b = ${a + b}`;
console.log(str); // 输出：a + b = 30

多行文本输出

在传统的 JavaScript 中，如果要输出多行文本，需要使用特殊符号（例如 \n）来表示换行。而在模板字面量中，我们可以直接输入多行文本，示例如下：

const str = `
  Hello,
  world!
`;
console.log(str); // 输出：
// Hello,
// world!

需要注意的是，模板字面量中的多行文本会保留缩进，如果不需要缩进，可以使用 {} 包裹文本，示例如下：

const str = `
  ${
    'Hello,\nworld!'
  }
`;
console.log(str); // 输出：
//   Hello,
//   world!

标签模板

除了普通的模板字面量之外，ES6 还提供了一种更高级的语法：标签模板（Tagged Template）。标签模板可以在模板字面量前添加一个标签函数，通过这个函数对模板字面量进行处理。示例如下：

// javascriptcn.com 代码示例
function upper(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i].toUpperCase();
    }
  }
  return result;
}

const name = 'Tom';
const str = upper`Hello, ${name}!`;
console.log(str); // 输出：Hello, TOM!

在上面的示例中，我们定义了一个标签函数 upper，它将模板字面量中的变量转换为大写字母。在调用 upper 函数时，模板字面量会被拆分为一个字符串数组和一个变量数组，分别作为 strings 和 values 参数传入函数中。在函数中，我们遍历 strings 数组和 values 数组，将它们拼接成一个新的字符串并进行处理。

需要注意的是，标签函数可以接收任意数量的参数，并且可以返回任意类型的值。这使得标签模板非常灵活，可以用于各种场景，例如自定义模板引擎、国际化处理等。

应用与技巧

1. 拼接 HTML 字符串

在传统的 JavaScript 中，拼接 HTML 字符串是一件非常繁琐的事情，需要使用大量的字符串拼接和转义符号。而在模板字面量中，我们可以直接拼接 HTML 标签，使代码更加简洁易读。示例如下：

const name = 'Tom';
const html = `
  <div class="user">
    <span class="name">${name}</span>
  </div>
`;

在上面的示例中，我们使用模板字面量拼接了一个包含用户名的 HTML 片段。需要注意的是，为了防止 XSS 攻击，我们应该对插入到 HTML 中的变量进行转义，例如：

// javascriptcn.com 代码示例
function escapeHtml(str) {
  return str.replace(/[&<>"']/g, (match) => {
    switch (match) {
      case '&':
        return '&';
      case '<':
        return '<';
      case '>':
        return '>';
      case '"':
        return '"';
      case "'":
        return ''';
    }
  });
}

const name = '<script>alert("XSS");</script>';
const html = `
  <div class="user">
    <span class="name">${escapeHtml(name)}</span>
  </div>
`;

在上面的示例中，我们定义了一个 escapeHtml 函数，用于将特殊字符转义为 HTML 实体。在拼接 HTML 字符串时，我们将变量 name 传入 escapeHtml 函数进行转义，以避免 XSS 攻击。

2. 定义多语言文本

在国际化处理中，我们通常需要根据用户的语言环境输出不同的文本。使用模板字面量可以很方便地定义多语言文本，示例如下：

// javascriptcn.com 代码示例
const messages = {
  en: {
    hello: 'Hello, world!',
  },
  zh: {
    hello: '你好，世界！',
  },
};

const language = 'zh';
const message = messages[language].hello;
console.log(message); // 输出：你好，世界！

在上面的示例中，我们定义了一个 messages 对象，其中包含了两种语言的文本。根据用户的语言环境，我们可以选择合适的语言输出文本。使用模板字面量，我们可以更方便地定义多语言文本，而且可以避免繁琐的字符串拼接。

3. 声明多行字符串

在 JavaScript 中，声明多行字符串是一件非常繁琐的事情，需要使用特殊符号（例如 \n）来表示换行。而在模板字面量中，我们可以直接输入多行文本，使代码更加简洁易读。示例如下：

const str = `
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor incididunt
  ut labore et dolore magna aliqua.
`;

在上面的示例中，我们使用模板字面量声明了一个多行字符串。需要注意的是，模板字面量中的多行文本会保留缩进，如果不需要缩进，可以使用 {} 包裹文本。

总结

模板字面量是 ES6 中新增的一种字符串模板语法，它可以更方便地拼接字符串、支持变量的插入、多行文本的输出等功能。除了普通的模板字面量之外，ES6 还提供了一种更高级的语法：标签模板。标签模板可以在模板字面量前添加一个标签函数，通过这个函数对模板字面量进行处理。在实际开发中，我们可以使用模板字面量拼接 HTML 字符串、定义多语言文本、声明多行字符串等，使代码更加简洁易读。

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