ES6之模版字符串如何使用

在ES6（ECMAScript 2015）中，模版字符串（Template Literals）是一种新的字符串表示方式，它提供了更强大、更灵活的字符串处理能力。模版字符串使用反引号（`）包裹，而不是传统的单引号或双引号。本文将详细介绍模版字符串的使用方法及其优势。

1. 基本用法

模版字符串的基本用法与普通字符串类似，但有一些显著的区别。首先，模版字符串可以跨行，而不需要使用换行符（\n）或字符串拼接。

const str = `这是一个
多行字符串`;
console.log(str);

输出结果：

这是一个
多行字符串

2. 嵌入表达式

模版字符串最强大的功能之一是可以在字符串中嵌入表达式。通过使用 ${} 语法，可以将变量、表达式或函数调用直接嵌入到字符串中。

const name = "Alice";
const age = 25;
const greeting = `你好，我的名字是 ${name}，我今年 ${age} 岁。`;
console.log(greeting);

输出结果：

你好，我的名字是 Alice，我今年 25 岁。

2.1 嵌入表达式示例

const a = 10;
const b = 20;
const result = `a + b 的结果是 ${a + b}`;
console.log(result);

输出结果：

a + b 的结果是 30

2.2 嵌入函数调用

function getFullName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

const firstName = "John";
const lastName = "Doe";
const fullName = `我的全名是 ${getFullName(firstName, lastName)}`;
console.log(fullName);

输出结果：

我的全名是 John Doe

3. 标签模版

标签模版（Tagged Templates）是模版字符串的另一种高级用法。通过在模版字符串前添加一个函数名，可以将模版字符串作为参数传递给该函数。这个函数可以对模版字符串进行处理，并返回处理后的结果。

3.1 基本用法

function tag(strings, ...values) {
  console.log(strings); // 输出模版字符串的静态部分
  console.log(values);  // 输出嵌入的表达式部分
  return "处理后的字符串";
}

const name = "Alice";
const age = 25;
const result = tag`你好，我的名字是 ${name}，我今年 ${age} 岁。`;
console.log(result);

输出结果：

["你好，我的名字是 ", "，我今年 ", " 岁。"]
["Alice", 25]
处理后的字符串

3.2 实际应用

标签模版在实际开发中有很多应用场景，例如国际化、HTML模板生成、SQL查询等。

3.2.1 国际化

function i18n(strings, ...values) {
  const translations = {
    "Hello, my name is": "你好，我的名字是",
    "and I am": "，我今年",
    "years old.": "岁。"
  };
  let result = "";
  strings.forEach((string, i) => {
    result += translations[string] || string;
    if (values[i] !== undefined) {
      result += values[i];
    }
  });
  return result;
}

const name = "Alice";
const age = 25;
const greeting = i18n`Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);

输出结果：

你好，我的名字是 Alice，我今年 25 岁。

3.2.2 HTML模板生成

function htmlEscape(strings, ...values) {
  let result = strings[0];
  for (let i = 0; i < values.length; i++) {
    result += values[i]
      .toString()
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
    result += strings[i + 1];
  }
  return result;
}

const userInput = "<script>alert('XSS')</script>";
const safeHTML = htmlEscape`<div>${userInput}</div>`;
console.log(safeHTML);

输出结果：

<div>&lt;script&gt;alert(&#039;XSS&#039;)&lt;/script&gt;</div>

4. 多行字符串与缩进

模版字符串可以轻松处理多行字符串，但在处理缩进时需要注意。模版字符串会保留所有的空格和换行符，因此在编写多行字符串时，缩进可能会影响最终输出。

4.1 多行字符串示例

const html = `
  <div>
    <h1>标题</h1>
    <p>段落内容</p>
  </div>
`;
console.log(html);

输出结果：

  <div>
    <h1>标题</h1>
    <p>段落内容</p>
  </div>

4.2 去除缩进

为了去除多余的缩进，可以使用 trim() 方法或自定义函数。

const html = `
  <div>
    <h1>标题</h1>
    <p>段落内容</p>
  </div>
`.trim();
console.log(html);

输出结果：

<div>
  <h1>标题</h1>
  <p>段落内容</p>
</div>

5. 总结

模版字符串是ES6中引入的一项强大功能，它不仅简化了字符串的拼接和格式化，还提供了嵌入表达式和标签模版等高级特性。通过合理使用模版字符串，可以显著提高代码的可读性和可维护性。

在实际开发中，模版字符串常用于以下场景：

• 动态生成HTML模板
• 国际化处理
• SQL查询拼接
• 日志记录

掌握模版字符串的使用方法，将有助于你在JavaScript开发中更加高效地处理字符串操作。