模板字面量（``）是标签模板的必要前提，因其能将静态字符串片段与动态插值参数分离传递给标签函数，而普通引号字符串无法提供该结构。
模板字面量（``）本身不是“高级功能”，但它是标签模板（tagged templates）的必要前提；没有它，String.raw、html、sql 等自定义标签根本无法接收原始字符串与插值参数分离的数据结构。
为什么必须用 `` 而不是 '' 或 "" 才能触发标签函数？
只有模板字面量在调用时才会把字符串切片和插值表达式分开传给标签函数。普通字符串字面量（哪怕带换行）只是单个 string 值，标签函数收不到任何“静态片段 + 动态值”的结构信息。
常见错误现象：myTag("hello ${name}") —— 这里 ${name} 不会被解析为插值，而是纯文本，myTag 只收到一个参数，根本不是标签模板调用。
正确写法必须是：myTag`hello ${name}`，此时 JS 引擎会拆成：myTag(['hello ', ''], name)。
立即学习“Java免费学习笔记（深入）”；
使用场景：你写的标签函数需要分别处理 HTML 结构、SQL 语句骨架、正则模式等“不变部分”，再对变量做转义、类型校验或上下文感知替换。
String.raw 是唯一能保留反斜杠的内置标签
普通字符串中
、 、 会被解释；而正则、文件路径、CSS 字体名等常需字面反斜杠。只有 String.raw`C:Users
ame ile.txt` 才输出真正的 C:Users
ame ile.txt，否则变成 C:Usersnamefile.txt（因为 U、
都是非法转义）。
注意点：
-
String.raw不处理插值：如果写String.raw`path: ${p} `，${p}正常求值，但末尾的 - 它不等于
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 b`中的strings[0]是"a b"，但strings.raw[0]是"a\nb"） - 若模板开头或结尾无插值，
strings数组长度 = 插值数 + 1；中间连续插值（如${a}${b}）会导致strings中出现空字符串'' - 性能影响：每次调用都会新建
strings数组和values数组，高频场景（如渲染循环）应避免在标签内做深拷贝或正则全量匹配
HTML 模板注入时，为什么不能直接拼接 innerHTML = tag`<div>${userInput}</div>`？
标签模板本身不做任何安全处理。上面这行代码跟 innerHTML = '<div>' + userInput + '</div>' 一样危险——userInput 里的 <script></script> 依然会执行。
真正安全的做法是：标签函数内部对每个 value 显式转义，或用 DOM API 创建元素：
function html(strings, ...values) {
const parts = [strings[0]];
for (let i = 0; i < values.length; i++) {
const escaped = String(values[i]).replace(/[&<>"']/g, c => ({
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}[c]));
parts.push(escaped, strings[i + 1]);
}
return parts.join('');
}
// 使用
const name = '<script>alert(1)</script>';
document.body.innerHTML = html`<p>Hello ${name}!</p>`; // 安全渲染
容易被忽略的地方：很多人以为写了标签函数就自动防 XSS，其实只是换了种拼接方式；是否安全，完全取决于函数体内是否对 values 做了上下文敏感的转义——HTML 内容、HTML 属性、CSS、JS 字符串，各自的转义规则完全不同。
