17370845950

JavaScript的标签模板是一种函数调用机制，非语法糖；它将模板字符串的静态片段（含raw属性）和插值结果作为参数传入标签函数，支持拦截、转换与校验。

什么是 JavaScript 的标签模板（Tagged Templates）

标签模板不是语法糖，而是一种函数调用机制：当你写 `hello ${name}` 并在前面加一个函数名，比如 upper`hello ${name}`，JavaScript 就会把模板字符串的静态部分和插值表达式结果分别传给 upper 函数处理，而不是直接拼成字符串。

它让字符串构建过程可拦截、可转换、可校验，是原生支持“字符串 DSL”的关键能力。

标签函数接收什么参数

每个标签函数都会收到两个关键参数：

• 第一个参数 strings：一个类数组对象（Array-like），包含所有静态文本片段，其 raw 属性保留原始转义（比如 \n 不被解释）
• 后续参数（...values）：对应每个 ${} 中的表达式求值结果，数量恒为 strings.length - 1

function log(strings, ...values) {
  console.log('静态片段:', strings);        // ['a', 'b', '']
  console.log('插值结果:', values);         // [1, true]
}
loga${1}b${true};

注意：strings 最后一项永远是空字符串（哪怕模板末尾没插值），这是设计使然，方便统一遍历。

常见误用：忘记返回值或错误拼接

标签函数必须显式返回内容，否则默认返回 undefined；另外，直接用 + 拼接 strings 和 values 会丢失 raw 信息，且无法处理嵌套模板。

正确做法是用 strings.map 或 reduce 安全合并：

function html(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const val = values[i - 1] ?? '';
    return acc + str + String(val);
  }, '');
}

更健壮的实现应检查 val 类型（如对象要 JSON 序列化）、过滤 XSS 敏感字符——这正是模板标签的价值所在：在拼接前介入。

为什么 String.raw 是个特殊标签函数

String.raw 是唯一内置的标签函数，它不解释转义序列，直接返回原始字符串字面量内容：

String.raw`Hi\n${2+3}!`; // → "Hi\\n5!"，不是 "Hi\n5!"

它等价于访问 strings.raw 数组，常用于正则、路径、SQL 片段等需要字面意义反斜杠的场景。但要注意：它只影响静态部分，${} 内部仍照常执行。

真正容易被忽略的是：标签模板本身不改变字符串不可变性，也不提升运行时性能；它的价值完全取决于你写的标签函数是否做了有意义的事——比如做类型检查、国际化、SQL 参数绑定、HTML 转义。没业务逻辑的空标签只是多了一层函数调用开销。