HTML5不支持模板字符串，这是JavaScript特性；它仅用于JS中生成HTML片段，与HTML解析器无关，且直接拼接用户输入易导致XSS漏洞。
HTML5 本身不支持模板字符串——那是 JavaScript 的语法特性，不是 HTML 的功能。所谓“HTML5 使用模板字符串”，实际是指在 JS 脚本中（尤其是配合 innerHTML、document.createElement 或现代框架逻辑）用 JS 的模板字符串（`...${value}...`）生成 HTML 片段。
模板字符串是 JS 特性，不是 HTML5 标准的一部分
HTML5 规范里没有“模板字符串”这个概念；它只定义了文档结构、语义标签和 API（如 localStorage、fetch）。你看到的带 ${} 的字符串，全靠浏览器 JS 引擎（V8、SpiderMonkey 等）解析执行，和 HTML 解析器完全无关。
- 写在
<script>标签里的模板字符串，由 JS 引擎处理，结果可能是赋给innerHTML，也可能是传给createElement后再拼接 - 直接写在 HTML 源码里（如
<div>${name}</div>）不会自动替换，只会原样显示 - 服务端渲染或构建工具（如 Vite、Webpack）中的模板字符串，属于编译时行为，和运行时 HTML5 无关
用模板字符串拼接 HTML 容易引发 XSS
直接把用户输入插进模板字符串再塞进 innerHTML，等于主动开放 DOM 注入入口。哪怕加了空格或换行，`<img src=1 onerror=alert(1)>` 这类 payload 依然能执行。
- 错误示范：
element.innerHTML = `<div>${userInput}</div>`; - 正确做法：优先用
textContent或createTextNode渲染纯文本；若必须插 HTML，先用DOMPurify.sanitize()过滤，或用escapeHtml()手动转义 - 注意：
innerText不是安全替代品——它会触发重排且不处理所有字符实体
比模板字符串更稳妥的 HTML 构建方式
模板字符串写起来快，但可维护性和安全性弱。真实项目中，更推荐以下方式：
Zenlink - Node SDK for ZenHeart
下载
ZenHeart zenlink 与 zenlink-mcp 为 OpenClaw，涵盖安装、MCP 注册、钩子接线、入站轮询及升级维护。
立即学习“前端免费学习笔记（深入）”；
- 用
document.createElement+appendChild组装节点：天然防 XSS，语义清晰const div = document.createElement('div'); div.textContent = userInput; container.appendChild(div); - 用
insertAdjacentHTML配合预定义模板（非动态插值）：container.insertAdjacentHTML('beforeend', '<div class="card"></div>'); - 复杂 UI 场景直接上轻量库，如
hyperhtml或原生lit-html，它们在编译期就做了表达式沙箱和属性绑定隔离
性能差异其实微乎其微，别为“优化”牺牲安全
现代引擎对模板字符串的解析开销几乎可以忽略；真正拖慢页面的是频繁操作 DOM、未节流的事件、或没清理的事件监听器。与其纠结字符串拼接快 0.02ms 还是慢 0.03ms，不如检查：
- 是否在循环里反复设置
innerHTML（应改用DocumentFragment批量插入） - 是否用了
eval或new Function动态执行字符串（比模板字符串危险得多） - 是否把整个 JSON 对象直接
JSON.stringify后插进 HTML（既暴露数据又易被 XSS）
模板字符串本身没问题，问题出在怎么用——尤其当它和 innerHTML、outerHTML 或第三方 html() 方法混用时，边界很容易模糊。
