ES6模板字符串配合标签函数将模板拆为静态段和动态值，由自定义函数处理；标签函数首参为strings数组，后续为values，strings长度恒比values多1。
ES6 模板字符串配合标签函数，本质是把模板拆成“静态段”和“动态值”两部分，交由自定义函数统一处理。关键不在拼接，而在可控解析。
标签函数接收的参数结构
当你写 myTag`Hello ${name}, you are ${age} years old.` 时，myTag 函数实际收到：
-
第一个参数（strings）：字符串字面量组成的数组，如
["Hello ", ", you are ", " years old."] -
后续参数（values）：所有
${...}中表达式的计算结果，按顺序传入，如name和age的值
注意：即使没有插值，strings 也至少有一个元素；有 n 个插值，strings 就有 n+1 个元素。
手动拼接是最基础的用法
你可以按位置把 strings 和 values 交错组合：
立即学习“Java免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 从
strings[0]开始 - 依次加上
values[i]和strings[i+1] - 最后返回拼接结果（或任意类型）
例如实现小写转大写：
function upper(strings, ...values) {let result = strings[0];
for (let i = 0; i result += String(values[i]).toUpperCase() + strings[i + 1];
}
return result;
}
upper`hi ${'bob'}, welcome ${42}`; // "hi BOB, welcome 42"
安全转义 HTML 是典型实战场景
直接拼接用户输入容易导致 XSS，用标签函数可自动处理：
- 遍历
values，对每个值做 HTML 实体转义（如→ <code><） - 保持
strings原样（它们本就是开发者写的可信文本） - 再拼接返回，确保输出安全
这样，html`<div>${userInput}</div>` 就不会执行恶意脚本。
返回非字符串结果也很常见
标签函数不强制返回字符串。比如构建 SQL 查询对象：
- 提取
strings中的 SQL 片段（如"SELECT * FROM users WHERE id = "） - 收集
values作为参数列表 - 返回
{ text: "...", params: [...] }结构，供数据库驱动安全执行
这比拼出完整 SQL 字符串更健壮，也利于防止注入。
