模板字符串本身不解析html，仅作字符串拼接；真正触发html解析的是innerhtml等dom操作，而非模板语法本身。
模板字符串本身不解析HTML，只是拼接字符串
JavaScript 的 template literal（反引号包裹的字符串）不会自动将插值内容当作 HTML 渲染——它只做字符串拼接。哪怕你写 `<div>${userInput}</div>`，浏览器也不会执行 HTML 解析，除非你把它赋给 innerHTML 这类危险属性。
真正触发 HTML 解析的是 DOM 操作方式，不是模板字符串本身。这是很多人混淆的起点。
用 innerHTML 插入模板字符串 = XSS 高危操作
一旦你把含用户输入的模板字符串赋给 element.innerHTML，就等于把字符串交给浏览器当 HTML 解析，恶意代码立刻可执行。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 比如
userInput = '<img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="模板字符串能直接插HTML吗_安全插入注意事项【解答】">'，拼进模板后设为innerHTML，弹窗就触发了 -
textContent或innerText会安全转义，但它们不解析任何 HTML 标签，纯文本显示 - 现代框架（React/Vue）默认对插值做转义，但手动用
dangerouslySetInnerHTML或v-html就绕过了保护
安全插入 HTML 的替代方案
真需要动态渲染可信 HTML，别靠手拼模板字符串 + innerHTML。优先走 DOM API 或专用库：
- 用
DOMParser解析字符串为文档片段：const frag = new DOMParser().parseFromString(htmlString, 'text/html').body.children[0];<br>container.appendChild(frag);
- 对已知结构的 HTML，用
document.createElement+appendChild构建，完全避开字符串拼接 - 若必须用字符串（如服务端返回），先用
DOMPurify.sanitize()过滤，再塞进innerHTML - 避免在模板字符串里拼接不可信变量：
`<span>${escapeHtml(userInput)}</span>`比直接插更可控
为什么 escapeHtml 不是万能解药
手写转义函数容易漏掉边界情况，比如 <script></script> 这种 Unicode 编码仍可能被某些解析器还原。而且它只适用于“本该是纯文本”的场景——一旦你后续又用 innerHTML 插入，转义就白做了。
关键判断点始终是：这个字符串最终由谁解析？怎么进 DOM？模板字符串只是中间容器，真正决定安全与否的是下游消费方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
