标签模板字面量：从 SQL 到安全的 HTML 生成器

利用标签模板函数实现模板注入防护与自定义语法，构建一个自动转义 HTML 的标签函数，同时支持嵌套模板和条件渲染。 · 难度：入门 · +10XP

标签模板字面量：从 SQL 到安全的 HTML 生成器

标签模板函数可以接收模板字符串的静态部分与插值表达式。本教程将创建一个 html 标签函数，自动对所有插值进行 HTML 实体转义，避免 XSS 攻击。进一步支持嵌套：如果插值本身是另一个 html 标签函数返回的安全对象，则直接插入；否则转义。还会演示如何用同样的模式构造一个安全的 SQL 查询构建器。

function html(strings, ...values) { const escaped = values.map(v => { if (v && v.__isSafe) return v.string; return String(v).replace(/&/g, '&').replace(/ acc + s + (escaped[i]||''), ''), __isSafe: true }; }
const user = ''; const result = html<div>${user}</div>; console.log(result.string); // <script>alert(1)</script>