工具实现揭秘开发工具
JSON 格式化是怎么实现的
解析、格式化、键排序与「错误定位到行列」——调试 JSON 的浏览器利器
TL;DR:JSON 格式化提供格式化 / 压缩 / 键排序三个动作,实时处理,JSON 语法错误时精确定位到第几行第几列。开发对接接口、看配置文件的第一利器。
⏱️ 30 秒上手
- 打开 tools.guangmin.top/tools/json_format;
- 粘贴 JSON 文本(右侧实时格式化预览);
- 点「格式化」(缩进美化)/「压缩」(去空白单行)/「键排序」(对象键按字母序);
- 出错时看提示的行列号,修正后复制。
🔧 它是怎么实现的
三个实现要点:
- 格式化 = 解析再序列化:
JSON.parse把文本解析成 JavaScript 对象,JSON.stringify(data, null, 2)以 2 空格缩进重新序列化——「美化」的本质是丢掉原文排版、按标准重新生成。压缩同理(第三个参数不传即无缩进); - 键排序要递归:
stringify按对象插入顺序输出键。要按字母序,必须先递归遍历对象、每层新建一个键排序后的对象再序列化——数组元素内的对象也要处理,漏一层就出现「部分排序」的假象; - 错误定位是体验核心:
JSON.parse抛错时 message 里带位置信息(如position 419),换算成行列号(按换行符切分统计)直接告诉用户「第 5 行第 12 列多了个逗号」——比「解析失败」四个字有用一百倍。
📏 边界与限制
| 项 | 说明 |
|---|---|
| 输入规模 | 数 MB 文本毫秒级(解析是浏览器原生实现) |
| JSON5/带注释 | 不支持(标准 JSON 严格模式;带注释请先删注释) |
| 大整数 | 超过 2^53 的数字精度丢失(JavaScript Number 上限,可先转字符串处理) |
🔒 隐私口径
配置文件、接口返回——往往是最敏感的内容。全程浏览器内存解析,不经过服务器。
🔗 延伸阅读
- 开发三件套:时间戳转换、Base64/URL 编码
- 工具箱为什么做纯前端:05 核心实现