模板字面量优势与标签模板使用教程

模板字面量（``）不仅是JavaScript中支持多行和插值的语法糖，更是解锁标签模板这一强大机制的关键前提——它能将字符串按插值位置精准切分为原始片段数组与动态值参数，使自定义标签函数（如html、sql、String.raw）得以分别处理静态结构与动态内容，实现安全转义、反斜杠保留、上下文感知替换等高级能力；但需警惕：标签模板本身不提供安全性，错误地直接拼接用户输入仍会导致XSS漏洞，真正的防护必须在标签函数内部针对具体上下文（HTML/属性/CSS/JS）做严格转义。

模板字面量（``）本身不是“高级功能”，但它是标签模板（tagged templates）的必要前提；没有它，String.raw、html、sql 等自定义标签根本无法接收原始字符串与插值参数分离的数据结构。

为什么必须用 `` 而不是 '' 或 "" 才能触发标签函数？

只有模板字面量在调用时才会把字符串切片和插值表达式分开传给标签函数。普通字符串字面量（哪怕带换行）只是单个 string 值，标签函数收不到任何“静态片段 + 动态值”的结构信息。

常见错误现象：myTag("hello ${name}") —— 这里 ${name} 不会被解析为插值，而是纯文本，myTag 只收到一个参数，根本不是标签模板调用。

正确写法必须是：myTag`hello ${name}`，此时 JS 引擎会拆成：myTag(['hello ', ''], name)。

使用场景：你写的标签函数需要分别处理 HTML 结构、SQL 语句骨架、正则模式等“不变部分”，再对变量做转义、类型校验或上下文感知替换。

String.raw 是唯一能保留反斜杠的内置标签

普通字符串中 \n、\t、\\ 会被解释；而正则、文件路径、CSS 字体名等常需字面反斜杠。只有 String.raw`C:\Users\name\file.txt` 才输出真正的 C:\Users\name\file.txt，否则变成 C:Usersnamefile.txt（因为 \U、\n 都是非法转义）。

注意点：

• String.raw 不处理插值：如果写 String.raw`path: ${p}\n`，${p} 正常求值，但末尾的 \n 仍被当字面量保留（即字符串最后真有一个 \n 字符）
• 它不等于 JSON.stringify：不会加引号，也不转义双引号
• 不能替代 RegExp 构造函数里的 \\\\ 冗余写法——用 String.raw`\\d+` 就够了

自定义标签函数怎么拿到原始字符串和插值值？

标签函数第一个参数是只读的 Array，每个元素是模板中两个插值之间的原始字符串（含空格、换行），最后一个元素是结尾字符串；后续参数依次对应每个 ${...} 的计算结果。

function log(strings, ...values) {
  console.log('strings:', strings); // ['count: ', ' and total: ', '']
  console.log('values:', values);   // [5, 12]
}

log`count: ${5} and total: ${12}`;

关键细节：

• strings.raw 是隐藏属性，包含未处理转义的原始字符串数组（比如 `a\nb` 中的 strings[0] 是 "a\nb"，但 strings.raw[0] 是 "a\\nb"）
• 若模板开头或结尾无插值，strings 数组长度 = 插值数 + 1；中间连续插值（如 ${a}${b}）会导致 strings 中出现空字符串 ''
• 性能影响：每次调用都会新建 strings 数组和 values 数组，高频场景（如渲染循环）应避免在标签内做深拷贝或正则全量匹配

HTML 模板注入时，为什么不能直接拼接 innerHTML = tag`${userInput}`？

标签模板本身不做任何安全处理。上面这行代码跟 innerHTML = '' + userInput + '' 一样危险——userInput 里的 '; document.body.innerHTML = html`

Hello ${name}!