JavaScript中的模板字面量与标签函数

描述
模板字面量（Template Literals）是ES6引入的字符串语法，支持多行字符串、插值表达式和标签函数（Tagged Templates）。标签函数允许开发者自定义模板的解析逻辑，实现高级功能（如国际化、HTML转义等）。本节将深入讲解模板字面量的特性及标签函数的工作原理。

1. 模板字面量的基础用法

• 多行字符串：
  传统字符串需用\n换行，而模板字面量直接换行即可：

  const str = `第一行
  第二行`;
  console.log(str); // 输出两行内容
  

• 插值表达式：
  通过${}嵌入变量或表达式，值会自动转换为字符串：

  const name = "Alice";
  console.log(`Hello, ${name}!`); // "Hello, Alice!"
  console.log(`结果：${2 + 3}`);  // "结果：5"
  

2. 标签函数的概念与语法
标签函数是专门处理模板字面量的函数，其调用方式为函数名后紧跟模板字面量：

tagFunction`模板内容...`;

例如：

function highlight(strings, ...values) {
  // strings: 静态文本部分（按插值分割的字符串数组）
  // values: 插值表达式的计算结果数组
}

const name = "Bob";
const age = 20;
highlight`姓名：${name}，年龄：${age}`;

3. 标签函数的参数解析
以tag函数处理模板内容为例：

function tag(strings, ...expressions) {
  console.log(strings);       // 静态文本数组
  console.log(expressions);   // 插值结果数组
}

const a = 10, b = 5;
tag`计算：${a} + ${b} = ${a + b}`;

输出：

strings:    ["计算：", " + ", " = ", ""]
expressions: [10, 5, 15]

注意：

• strings数组长度总是比expressions多1（因模板以文本开始和结束）。
• 若模板以插值开头或结尾，strings首尾可能是空字符串（如``tag${a}test```中strings为["", "test"]`）。

4. 标签函数的返回值
标签函数可返回任意值，常见应用包括：

• 字符串拼接：手动组合静态文本与插值：

  function assemble(strings, ...values) {
    return strings.reduce((result, str, i) => 
      result + str + (values[i] ?? ""), ""
    );
  }
  

• HTML转义：防止XSS攻击：

  function safeHtml(strings, ...values) {
    const escaped = values.map(v => 
      String(v).replace(/&/g, "&")
               .replace(/</g, "&lt;")
    );
    return strings.reduce((res, str, i) => res + str + (escaped[i] ?? ""), "");
  }
  
  const userInput = "<script>alert('xss')</script>";
  safeHtml`<div>${userInput}</div>`; // 输出转义后的安全HTML
  

• 国际化处理：根据插值动态切换语言：

  function i18n(strings, ...values) {
    const translated = strings.map(s => translate(s)); // translate为虚构的翻译函数
    return translated.reduce((res, str, i) => res + str + (values[i] ?? ""), "");
  }
  

5. 原始字符串与String.raw
模板字面量支持访问转义前的原始内容（如\n不转为换行）。标签函数可通过strings.raw获取未转义的字符串：

function showRaw(strings) {
  console.log(strings.raw[0]);
}

showRaw`Hello\nWorld`; // 输出 "Hello\nWorld"（不含换行）

String.raw是内置的标签函数，直接返回原始字符串：

String.raw`Hello\nWorld`; // "Hello\\nWorld"（注意：\n被转义为两个字符\和n）

6. 实际应用场景

• 样式化组件：如Styled-components库利用标签函数生成CSS-in-JS。
• SQL查询构建：通过标签函数转义参数，防止SQL注入。
• 调试工具：打印模板的原始结构和插值结果。

通过掌握标签函数，可灵活扩展模板字面量的能力，实现更复杂的字符串处理逻辑。