推荐做法是使用type="application/json"配合textcontent读取再json.parse()，因其干净无副作用；替代方案为es模块导入json文件，更安全可靠。
script标签里放JSON数据，为什么不能直接写type="application/json"
浏览器会把type="application/json"当成纯文本资源处理，不执行也不解析，script内容完全不可访问——哪怕你只是想用document.querySelector('script[type="application/json"]').textContent取出来，也得手动JSON.parse()，而且容易因换行、注释或BOM导致解析失败。
真正能被JS直接读取的，是type="application/json"以外的类型（比如text/javascript），但这时又得解决“JSON不是合法JS语法”的问题。
- JSON对象字面量
{ "a": 1 }在JS中合法，但JSON字符串"{ \"a\": 1 }"不是 - 如果直接写
<script>{"a":1}</script>，浏览器会报Unexpected token ':'语法错误 - 加括号
({"a":1})或赋值var data = {"a":1};可绕过，但污染全局作用域或依赖变量名
推荐做法：用type="application/json" + textContent + JSON.parse()
这是最干净、无副作用的方式，适用于服务端渲染或构建时注入静态配置。关键点不是“能不能”，而是“怎么安全地取”。
示例HTML：
<script id="init-data" type="application/json">
{
"user": {
"id": 123,
"name": "Alice"
},
"features": ["dark-mode", "notifications"]
}
</script>
对应JS读取逻辑：
const script = document.getElementById('init-data');
if (script && script.textContent) {
try {
const data = JSON.parse(script.textContent);
// ✅ 安全使用 data
} catch (e) {
console.error('Failed to parse init JSON:', e.message);
}
}
- 必须检查
script.textContent是否存在，IE中可能为null - 务必
try/catch——服务端模板渲染出错、换行符混入、BOM字符都会让JSON.parse()崩溃 - 避免用
innerHTML，它会触发HTML解析，有XSS风险；textContent是唯一安全出口
替代方案：type="module"配合export default（现代浏览器）
如果你控制前端构建流程，且目标环境支持ES模块（Chrome 61+、Firefox 60+、Safari 10.1+），可以用JS模块直接导出JSON对象，比字符串解析更可靠。
HTML中这样引用：
<script type="module"> import data from './init-data.json'; console.log(data.user.name); // ✅ 类型安全，IDE可提示 </script>
- 需要HTTP服务器或本地开发服务（
file://协议下模块导入会失败） -
init-data.json必须是标准JSON文件，不能含注释或尾逗号 - 打包工具（如Vite、Webpack）默认支持JSON导入；Rollup需插件
@rollup/plugin-json
常见坑：内联JSON里的特殊字符和编码问题
服务端模板（如Jinja、EJS、PHP）往script里注入JSON时，最容易出问题的是单双引号嵌套、换行、Unicode转义和BOM。
- PHP中别用
json_encode($data, JSON_UNESCAPED_UNICODE)后直接echo——要确保输出不含UTF-8 BOM - 模板里避免手动拼接JSON字符串，一律走
json_encode()或等价函数 - 换行符在HTML中会被压缩为空格，但JSON要求严格格式；用
JSON.stringify()生成再替换\n为\u2028（JS行分隔符）更稳妥 - 如果JSON含用户输入内容（如评论文本），必须确保已做HTML实体转义，否则
会提前闭合标签
最简防御：所有动态JSON都用JSON.stringify()生成，再用正则过滤掉字符串（替换成）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
