应将 json 存入 data-* 属性或使用 serialize-javascript 库安全内联，避免美化工具误解析导致 syntaxerror。
JSON 字符串直接写在 HTML 里会被美化工具误解析
很多前端开发者把 JSON.stringify() 的结果硬编码进 HTML 的 <script></script> 或 <pre class="brush:php;toolbar:false;"></pre> 标签里，结果用 Prettier、ESLint、HTMLBeautify 等工具格式化时，JSON 被当成普通文本强行换行、缩进甚至破坏转义——比如 "
" 变成真实换行，""" 被改成 "，最终导致 JSON.parse() 报 SyntaxError: Unexpected token。
- 根本原因：美化工具按 HTML 或 JS 语法解析，不识别「字符串内部的 JSON」语义
- 典型场景：服务端模板（如 EJS、Django）注入 JSON，或构建时内联配置
- 别用
<script type="application/json">{...}</script>后直接跑 Prettier——它会把大括号当 JS 块处理
用 textContent 或 data-* 属性存原始 JSON 最安全
绕过解析器对内容的“理解”，只让它当纯字符串处理。关键不是怎么写得好看，而是怎么让工具完全不碰它。
- 写进
data-json属性：<div data-json='{"id":1,"name":"a"}'></div>，Prettier 默认跳过data-*值的格式化 - 用
<script type="application/json"></script>时，确保内容不带引号包裹（即不写成"{...}"），且关闭 Prettier 的htmlWhitespaceSensitivity为"css" - 如果必须放
<pre class="brush:php;toolbar:false;"></pre>里展示，用<pre class="json"></pre>并在 Prettier 配置中加"overrides": [{"files": "*.html", "options": {"htmlWhitespaceSensitivity": "strict"}}]
Webpack/Vite 构建时内联 JSON 要走 JSON.stringify() + escapeHtml()
服务端渲染或构建时拼接 HTML，不能靠手动转义。JS 字符串里的双引号、反斜杠、U+2028/U+2029 行分隔符都会让 JSON 失效。
- Node.js 环境下推荐用
serialize-javascript库：serializeJavaScript(data, { isJSON: true })，它比原生JSON.stringify()多处理 HTML 特殊字符 - 自己实现简易 escape：对
JSON.stringify()结果做.replace(/, '\u003c').replace(/"/g, '"')，但注意这仅防 XSS，不解决 JS 解析问题 - Vite 用户可直接用
import.meta.env注入环境变量，避免手拼 HTML；Webpack 用DefinePlugin替换全局常量
浏览器里解析内联 JSON 时别漏掉 textContent 和 innerHTML 区别
从 DOM 里取回 JSON 字符串时，用错 API 会导致二次解析失败。比如 element.innerHTML 会把 " 自动解码成 "，而 textContent 保持原始字符。
-
<script type="application/json">{"name":""test""}</script>→ 用el.textContent拿到的是{"name":""test""}，能直接JSON.parse() - 用
el.innerHTML拿到的是{"name":""test""}，JSON 语法错误 - Chrome DevTools 控制台里调试时，右键复制元素内容容易粘贴出已解码版本，建议用
copy(el.textContent)确认原始值
BigInt —— 这些都不是标准 JSON，任何美化工具或浏览器解析器都不会认。先确保是合法 JSON，再谈怎么嵌入 HTML。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
