JSON 格式化 / 校验 / 压缩工具
在线美化、校验、压缩JSON数据,支持错误定位和语法高亮
什么是JSON格式化工具?
JSON格式化工具是一种将压缩或混乱的JSON数据转换为格式化(美化)显示的在线工具。JSON(JavaScript Object Notation)是现代Web应用中最常用的数据交换格式,几乎所有REST API都使用JSON传输数据。但API返回的JSON通常是压缩的单行字符串,难以阅读和调试。JSON格式化工具通过智能缩进和换行,将JSON数据展示为清晰的树形层次结构,帮助开发者快速理解数据结构、定位特定字段、验证数据正确性。本工具还提供语法高亮、路径显示、错误定位等实用功能。
如何使用JSON格式化工具
- 粘贴JSON数据 — 将需要格式化的JSON字符串粘贴到输入框中。
- 自动格式化 — 工具会即时解析并格式化显示JSON数据,支持语法高亮。
- 浏览和复制 — 可以折叠/展开节点浏览结构,一键复制格式化后的结果。
常见使用场景
场景一:API响应调试
从浏览器开发者工具或Postman复制API响应的压缩JSON,格式化后查看完整数据结构和字段值。
场景二:配置文件编辑
package.json、tsconfig.json等配置文件格式化后更容易定位和修改特定配置项。
场景三:数据对比
将两个JSON数据格式化后使用文本对比工具比较差异,找出配置变更或数据变化。
技术原理
JSON格式化的核心是解析和序列化:
// JSON格式化原理
// 1. 解析:将JSON字符串转为JavaScript对象
const obj = JSON.parse(jsonString);
// 2. 序列化:带缩进重新输出
const formatted = JSON.stringify(obj, null, 2);
// 第三个参数为缩进空格数(常用2或4)
// 自定义格式化(处理特殊需求)
function prettyJSON(json, indent = 2) {
try {
const parsed = JSON.parse(json);
return JSON.stringify(parsed, null, indent);
} catch (e) {
// 定位错误位置
const pos = parseInt(e.message.match(/\d+/));
return \`JSON解析错误,位置: \${pos}\`;
}
}
// JSON的五种基本类型
// Object: {"key": "value"}
// Array: [1, 2, 3]
// String: "hello"
// Number: 42, 3.14
// Boolean: true, false
// Null: null
最佳实践与注意事项
- JSON的键名必须用双引号,单引号不是合法JSON。这是最常见的格式错误。
- JSON不支持undefined、函数和注释。如果JSON中包含这些,解析会报错。
- 大数字在JSON.parse时可能丢失精度(超过Number.MAX_SAFE_INTEGER),需注意。
- 格式化时选择2空格缩进是社区主流惯例,比4空格更紧凑。
常见问题
Q:JSON解析报错怎么办?
A:常见原因:使用了单引号而非双引号、末尾多了逗号(JSON不允许trailing comma)、包含注释、键名未加引号。本工具会标注错误位置帮助定位。
Q:JSON和JavaScript对象有什么区别?
A:JSON是数据格式(纯文本),JS对象是内存中的数据结构。JSON键名必须用双引号、不支持undefined/函数/注释、不支持尾逗号。JSON.parse()将JSON转为JS对象,JSON.stringify()将JS对象转为JSON。
Q:JSON支持日期类型吗?
A:JSON标准没有Date类型。日期通常以ISO 8601格式的字符串表示,如"2024-01-15T08:30:00Z"。解析后需要手动用new Date()转为日期对象。
Q:如何处理超大JSON文件?
A:浏览器端格式化超大JSON(>100MB)可能卡顿。建议使用流式JSON解析库(如stream-json),或在Node.js后端处理。对于API响应,考虑分页加载。
Q:JSONPath是什么?
A:JSONPath是JSON的查询语言,类似于XML的XPath。如$.store.book[*].author可以提取所有书的作者。在调试复杂JSON结构时非常有用。