3.4 模板字符串与标签模

3.4 模板字符串与标签模板

ES6 引入了模板字符串（Template Literals）和标签模板（Tagged Templates），它们极大地增强了 JavaScript 处理字符串的能力。模板字符串支持多行文本和嵌入表达式，而标签模板则允许自定义字符串的处理逻辑。本节将详细介绍这两种特性的用法和应用场景。

3.4.1 模板字符串

模板字符串使用反引号（`）包裹，支持多行文本和嵌入表达式。

1. 基本用法

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, Alice!"

2. 多行文本
模板字符串可以直接换行，无需使用 \n：

let multiLine = `
  Line 1
  Line 2
`;
console.log(multiLine);
// 输出：
//   Line 1
//   Line 2

3. 嵌入表达式
在 ${} 中可以嵌入任意表达式：

let a = 10;
let b = 20;
console.log(`The sum is ${a + b}`); // 输出 "The sum is 30"

4. 嵌套模板
模板字符串可以嵌套使用：

let isTrue = true;
let message = `The result is ${isTrue ? `true` : `false`}`;
console.log(message); // 输出 "The result is true"

3.4.2 标签模板

标签模板是一种特殊的函数调用语法，允许自定义模板字符串的处理逻辑。

1. 基本语法
标签模板的语法如下：

tagFunction`template string`;

其中，tagFunction 是一个函数，template string 是模板字符串。

2. 函数参数
标签函数会接收到以下参数：

• 第一个参数：字符串数组，包含模板字符串中的所有静态文本。
• 剩余参数：模板字符串中嵌入的表达式的值。

3. 示例

function highlight(strings, ...values) {
  let result = "";
  strings.forEach((str, i) => {
    result += str;
    if (values[i]) {
      result += `<strong>${values[i]}</strong>`;
    }
  });
  return result;
}

let name = "Alice";
let age = 25;
let message = highlight`Hello, my name is ${name} and I am ${age} years old.`;
console.log(message);
// 输出 "Hello, my name is <strong>Alice</strong> and I am <strong>25</strong> years old."

4. 应用场景

• 国际化：根据语言动态生成字符串。
• 安全处理：防止 XSS 攻击，自动转义 HTML。
• 样式处理：动态生成 CSS 或 HTML 模板。

3.4.3 模板字符串与标签模板的对比

3.4.4 示例代码

示例 1：模板字符串

let user = { name: "Bob", age: 30 };
let info = `Name: ${user.name}, Age: ${user.age}`;
console.log(info); // 输出 "Name: Bob, Age: 30"

示例 2：标签模板

function currency(strings, ...values) {
  let result = "";
  strings.forEach((str, i) => {
    result += str;
    if (values[i]) {
      result += `$${values[i].toFixed(2)}`;
    }
  });
  return result;
}

let price = 19.99;
let tax = 1.99;
let total = currency`Total: ${price + tax}`;
console.log(total); // 输出 "Total: $21.98"

3.4.5 总结

• 模板字符串：简化了字符串拼接，支持多行文本和嵌入表达式。
• 标签模板：允许自定义字符串的处理逻辑，适用于复杂的字符串操作。

通过掌握模板字符串和标签模板，你可以更高效地处理字符串，并实现更复杂的字符串操作逻辑。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 模板字符串相比普通字符串有哪些优势？
2. 标签模板的函数参数是如何传递的？
3. 在实际开发中，标签模板有哪些应用场景？