广民广民
工具实现揭秘开发工具

JSON 格式化是怎么实现的

解析、格式化、键排序与「错误定位到行列」——调试 JSON 的浏览器利器

TL;DR:JSON 格式化提供格式化 / 压缩 / 键排序三个动作,实时处理,JSON 语法错误时精确定位到第几行第几列。开发对接接口、看配置文件的第一利器。

⏱️ 30 秒上手

  1. 打开 tools.guangmin.top/tools/json_format;
  2. 粘贴 JSON 文本(右侧实时格式化预览);
  3. 点「格式化」(缩进美化)/「压缩」(去空白单行)/「键排序」(对象键按字母序);
  4. 出错时看提示的行列号,修正后复制。

🔧 它是怎么实现的

三个实现要点:

  1. 格式化 = 解析再序列化:JSON.parse 把文本解析成 JavaScript 对象,JSON.stringify(data, null, 2) 以 2 空格缩进重新序列化——「美化」的本质是丢掉原文排版、按标准重新生成。压缩同理(第三个参数不传即无缩进);
  2. 键排序要递归:stringify 按对象插入顺序输出键。要按字母序,必须先递归遍历对象、每层新建一个键排序后的对象再序列化——数组元素内的对象也要处理,漏一层就出现「部分排序」的假象;
  3. 错误定位是体验核心:JSON.parse 抛错时 message 里带位置信息(如 position 419),换算成行列号(按换行符切分统计)直接告诉用户「第 5 行第 12 列多了个逗号」——比「解析失败」四个字有用一百倍。

📏 边界与限制

项说明
输入规模数 MB 文本毫秒级(解析是浏览器原生实现)
JSON5/带注释不支持(标准 JSON 严格模式;带注释请先删注释)
大整数超过 2^53 的数字精度丢失(JavaScript Number 上限,可先转字符串处理)

🔒 隐私口径

配置文件、接口返回——往往是最敏感的内容。全程浏览器内存解析,不经过服务器。

🔗 延伸阅读