面试题：什么是 ES6 新增的模板语法？

ES6（ECMAScript 2015）中新增的模板语法，主要指的是模板字符串（Template Literals）。它是一种革命性的字符串定义方式，使用反引号（`）来包裹字符串，解决了传统字符串在多行文本和变量拼接方面的痛点，极大地提升了代码的可读性和编写效率。

以下是模板语法的核心特性：

1. 多行字符串 (Multiline Strings)

在 ES6 之前，JavaScript 中创建多行字符串非常麻烦，通常需要使用转义字符 \n 或者字符串拼接，代码可读性差。

// ES5 的痛点
const html = '<div>\n' +
             '  <p>Hello</p>\n' +
             '  <p>World</p>\n' +
             '</div>';

使用模板字符串，可以直接换行书写，原样保留格式，非常适合嵌入 HTML、SQL 或其他需要多行文本的场景。

// ES6 模板字符串
const html = `<div>
  <p>Hello</p>
  <p>World</p>
</div>`;

2. 字符串插值 (String Interpolation)

这是模板字符串最强大的功能。它允许你直接在字符串中嵌入变量或任何有效的 JavaScript 表达式，语法为 ${expression}。

嵌入变量：

const name = "Alice";
const greeting = `Hello, ${name}!`; // "Hello, Alice!"

嵌入表达式：

const x = 10;
const y = 20;
const result = `The sum of ${x} and ${y} is ${x + y}.`; // "The sum of 10 and 20 is 30."

调用函数：

const user = { firstName: "Bob", lastName: "Smith" };
const fullName = `${user.firstName.toUpperCase()} ${user.lastName}`;
// "BOB Smith"

这彻底告别了繁琐的 + 号拼接：

// ES5 的拼接
const greeting = "Hello, " + name + "!";
// ES6 的插值
const greeting = `Hello, ${name}!`;

3. 嵌套模板 (Nested Templates)

你可以在 ${} 内部再使用一个模板字符串，实现更复杂的逻辑。

const firstName = "Alice";
const lastName = "Smith";
const fullName = `${firstName} ${lastName}`;
const greeting = `Hello, ${`Ms. ${fullName}`}!`; // "Hello, Ms. Alice Smith!"

4. 带标签的模板字符串 (Tagged Templates)

这是一种高级用法。你可以将一个函数“标签”放在模板字符串前面，这个函数会接收模板的静态部分和动态部分作为参数，从而自定义字符串的处理逻辑。

基本结构：

function myTag(strings, ...values) {
  // strings: 一个数组，包含模板中所有的静态文本部分。
  // values: 一个数组，包含所有插值表达式的计算结果。
  // 返回一个处理后的字符串。
}
const result = myTag`Hello ${name}, you are ${age} years old.`;

应用示例 – 简单的 HTML 转义：

function safeHtml(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      // 对动态值进行 HTML 实体转义，防止 XSS
      result += values[i].replace(/&/g, '&')
                          .replace(/</g, '<')
                          .replace(/>/g, '>');
    }
  });
  return result;
}

const userInput = '<script>alert("XSS")</script>';
const output = safeHtml`<p>User said: ${userInput}</p>`;
// 输出: <p>User said: <script>alert("XSS")</script></p>

实际应用：标签模板被广泛用于库中，如 styled-components (CSS-in-JS)、graphql-tag (解析 GraphQL 查询) 等。

总结

ES6 的模板语法（模板字符串）通过反引号 ` 和 ${} 插值符号，提供了：

简洁的多行文本：告别了 \n 和字符串拼接。
强大的字符串插值：直接嵌入变量和表达式，代码更直观。
灵活的嵌套能力：支持复杂的字符串构建逻辑。
可扩展的标签功能：允许开发者创建领域特定语言（DSL），实现高级功能如国际化、安全过滤、CSS 样式化等。

它是现代 JavaScript 开发中处理字符串的首选方式，极大地提升了代码的可读性、可维护性和开发效率。

THE END

前端 ES6 面试题