JSON.stringify()可实现基础缩进格式化，但交互展开/折叠、语法高亮需第三方库或自封装；其兼容性好（IE8+），适合只读展示，但会丢弃undefined、函数、Date等非标准类型，且直接innerHTML存在XSS风险。
直接用 JSON.stringify() 就能搞定基础格式化，不需要引入任何库；但要交互式展开/折叠、语法高亮、点击收起节点，就得靠第三方组件或自己封装逻辑。
用 JSON.stringify() 快速生成缩进 JSON 字符串
这是最轻量、兼容性最好（IE8+）的方式，适合只读展示场景：
-
JSON.stringify(obj, null, 2)：第二个参数为null表示不做过滤，第三个参数2表示用 2 个空格缩进 - 若传入
4或" "，可控制缩进宽度或用空格/制表符 - 注意：如果原始 JSON 含有
undefined、函数、Date对象或循环引用，JSON.stringify()会静默丢弃或报错 —— 建议先用JSON.parse(JSON.stringify(...))做一次“净化”再格式化 - 输出是纯字符串，需插入到
<pre><code>中才能保留换行和空格，例如：document.getElementById('json-view').innerHTML = '<pre><code class="json">' + JSON.stringify(data, null, 2) + '</code></pre>';
用 jquery-jsonview 实现可交互的 JSON 树形视图
适合调试后台返回数据、做内部工具页，支持点击展开/折叠、层级控制、主题切换：
- 必须按顺序加载：jQuery →
jquery.jsonview.css→jquery.jsonview.js - CDN 地址已失效（
rawgithub.com已禁用），建议下载源码本地引用，或改用更现代的替代品如json-viewer-js或react-json-view（若项目用 React） - 初始化后调用方法如
$('#json').JSONView(json)，后续可用collapse/expand/toggle控制节点，参数如1表示只操作第一层子节点 - 注意 DOM 容器不能是
<p>（HTML 规范禁止块级元素嵌套块级元素），应改用<div id="json">
避免踩坑：中文、null、HTML 标签字符导致渲染异常
直接把格式化后的 JSON 插入 HTML 容易被误解析，尤其含双引号、小于号、Unicode 字符时：
立即学习“前端免费学习笔记（深入）”；
-
JSON.stringify()输出的字符串里可能含"、<、>，直接 innerHTML 会导致标签截断或 XSS 风险 —— 务必用textContent或 HTML 实体转义 - 推荐做法：
const el = document.getElementById('json-view'); el.textContent = JSON.stringify(data, null, 2); // 安全，但无语法高亮 // 或用预处理转义： el.innerHTML = '<pre><code>' + JSON.stringify(data, null, 2) .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') + '</code></pre>'; -
null值在 JSON 中合法，但某些旧版 jsonview 组件会渲染为空白或报错，建议测试前确认组件版本是否支持
要不要自己写一个轻量 JSON 查看器？
如果只需要基础折叠功能且不想引入 jQuery，可以基于 JSON.stringify + details/summary 实现原生方案：
- 利用 HTML5 的
<details>标签天然支持展开/折叠，配合递归生成 DOM 节点 - 优点：零依赖、体积小、语义清晰；缺点：不支持搜索、复制整段、语法高亮需额外加 CSS
- 关键限制：IE 不支持
<details>，如需兼容 IE，还是得回退到 JS 模拟或用成熟库 - 复杂度容易被低估 —— 比如处理数组索引显示、对象 key 排序、循环引用检测、超大 JSON 渲染卡顿等问题，实际工作量不小
