ES6标签函数接收strings数组和动态插值值,strings含静态片段且长度比插值值多1,可用strings.raw获取原始字符,返回值不限于字符串,可为对象、DOM节点或Promise。

ES6 模板字符串通过标签函数实现自定义文本解析,核心在于把模板字符串的“静态部分”和“动态插值”分开传给一个普通函数,由你来决定怎么组合、转换或处理它们。
标签函数接收什么参数
当你写 myTag`Hello ${name}, you are ${age} years old` 时,JavaScript 引擎会自动拆解并调用:
-
第一个参数:strings 数组,包含所有未被插值打断的原始字符串片段,例如
["Hello ", ", you are ", " years old"] -
后续参数:按顺序传入每个
${...}表达式的运行结果,例如name和age的值
手动拼接并加工插值内容
最基础的做法是遍历插值值,对它们做处理(如转义、格式化),再与 strings 拼起来:
- 用
strings[0]开头,然后循环把每个处理后的值 + 对应的strings[i+1]接上 - 比如把所有插值转成大写:
values.map(v => String(v).toUpperCase()) - 注意 strings 长度总比 values 多 1,最后一段静态文本在末尾
利用 strings.raw 获取原始字符
如果模板里含反斜杠(如路径、正则),默认会被转义;加 .raw 可拿到未处理的原始字符串:
function rawTag(strings) { return strings.raw[0]; }-
rawTag`C:devile.js`→ 返回"C:\dev\file.js"(保留原始反斜杠) - 也可在标签函数内通过
strings.raw访问整组原始片段
返回任意类型,不止是字符串
标签函数不强制返回字符串。你可以返回对象、DOM 节点、甚至 Promise:
- 比如
html`<div>${content}</div>`返回一个真实<div>元素 - 又如
sql`SELECT * FROM users WHERE id = ${id}`返回带参数绑定信息的对象,用于防注入 - 关键在函数内部逻辑——你控制整个解析流程


















