跳至内容
🛠️
Whiz Tools

JSON格式化工具：在线免费美化和验证JSON

该工具是免费的在线JSON格式化工具，可在输入时自动添加合适的缩进层级并实时校验语法是否符合RFC 8259标准，同时完整保留超大整数的精确数值，避免像JSON.parse()那样因浮点数精度限制而丢失数据，适合前端开发调试、接口测试以及日常代码美化排查使用。

JSON 格式化工具

使用这个简单的工具格式化和美化您的 JSON - 输入时会自动进行格式化！

格式化的 JSON 将自动显示在此处...

加载计算器...
📚

文档

什么是 JSON 格式化工具？

JSON 格式化工具是一种处理 JSON（JavaScript 对象表示法）文本的工具，它通过添加缩进和换行来重写文本，但不会改变数据本身。JSON 是一种用于存储和传输结构化数据的纯文本格式，由名称/值对和列表构成。程序通常会移除所有多余空白来节省空间，从而生成一行紧凑的文本，难以供人阅读。格式化工具也称为美化器或漂亮打印器，它以一致的方式重新添加这些空白，使结构清晰可见。此工具会在输入或粘贴内容时自动格式化 JSON。它没有格式化按钮；输出会在每次按键后更新。重置按钮会清空输入内容，复制按钮会复制格式化后的结果。

JSON 语法规则

JSON 由名为 RFC 8259 的规范定义。它有两种容器类型：

对象在花括号内存放名称/值对：

1{"name": "John", "age": 30, "city": "New York"}
2

数组在方括号内存放有序列表：

1["apple", "banana", "cherry"]
2

JSON 中的值必须是六种类型之一：字符串、数字、布尔值（true 或 false）、null、对象或数组。

以下几条规则会导致大多数错误：

  • 属性名必须用双引号括起。{name: "John"} 无效；必须写成 {"name": "John"}。
  • 字符串必须使用双引号，不能使用单引号。
  • 对象或数组的最后一项后不能有逗号（不能有尾随逗号）。
  • JSON 没有注释语法，尽管它的花括号和方括号形式源自 JavaScript。
  • JSON 没有 undefined。缺失的值应使用 null。

常见错误是粘贴 JavaScript 对象字面量，而不是 JSON。{name: 'John', age: undefined} 是有效的 JavaScript，但不是有效的 JSON。对应的 JSON 写法是 {"name": "John", "age": null}。

此 JSON 格式化工具的工作原理

许多 JSON 格式化工具会先将文本传给 JSON.parse()，以构建 JavaScript 对象，然后运行 JSON.stringify()，以带空格的形式将其重新转换为文本。这种往返处理会产生一个副作用：JavaScript 数字是 IEEE 754 双精度浮点数，超过 2^53 − 1（9,007,199,254,740,991）后就无法精确表示每一个整数。像 9007199254740993 这样的 ID 经过往返处理后可能变成 9007199254740992。

此工具避开了这一步。它使用一个手写的小型解析器逐字符读取输入；它不把每个数字或字符串转换为 JavaScript 值，而是原样复制这部分文本，然后将其放置在正确的缩进层级。由于数字从不转换为浮点数，任意大小的整数都能保留其精确数字。如果一个对象中同一个键出现了两次，工具会将两份内容都保留在原处，而不是像构建 JavaScript 对象那样只保留最后一个。

处理过程分为以下步骤：

  1. 读取下一个标记（对象、数组、字符串、数字、true、false 或 null）。
  2. 根据 JSON 语法检查该标记。如果违反规则，例如键未加引号或存在尾随逗号，则拒绝它。
  3. 将标记的文本不加修改地复制到输出中。
  4. 在对象或数组内部，每嵌套一层就换行，并缩进 2 个空格。内容为空的对象或数组保持为一行，如 {} 或 []。
  5. 重复上述步骤，直到读完整个输入。

缩进固定为 2 个空格，无法通过设置更改。输入框为空时，输出面板会显示占位文本“格式化后的 JSON 将在此处自动显示……”。如果输入违反 JSON 规则，工具会显示消息“无效的 JSON：请检查您的输入”，而不是显示包含确切字符位置的技术性解析器错误信息。相比之下，浏览器内置的 JSON.parse() 会在错误文本中报告字符位置。

计算示例

这段压缩后的输入：

1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2

会变成：

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

每个嵌套对象或数组的缩进都比其父级多一层，因此可以一眼看出 address 与其三个字段之间的关系。

第二个示例说明了为什么原样复制字面量很重要。这段输入：

1{"id":9007199254740993}
2

格式化后为：

1{
2  "id": 9007199254740993
3}
4

数字会保持输入时的确切数字。若格式化工具基于 JSON.parse()，再调用 JSON.stringify()，则会悄无声息地将该数字改为 9007199254740992。

常见的 JSON 错误

  • 未加引号的属性名：{name: "John"}。修复方法：{"name": "John"}。
  • 尾随逗号：{"age": 30,}。修复方法：删除右花括号前的逗号。
  • 括号不匹配：{"data": [1, 2}。修复方法：在关闭对象之前，使用 ] 关闭数组。
  • 字符串未闭合：{"name": "John}。修复方法：补上缺少的结束引号。
  • 单引号：{'name': 'John'}。修复方法：使用双引号。
  • undefined、NaN 或 Infinity：这些都不是有效的 JSON 值。请使用 null 或字符串。

这些错误的常见来源是直接从浏览器控制台或服务器日志中复制对象，其中往往包含仅限 JavaScript 使用的语法，需要先清理后才能成为有效 JSON。

何时使用 JSON 格式化工具

JSON 格式化工具最常用于检查 API 响应，因为响应通常会经过压缩以节省带宽。它们也用于手动检查 package.json 或 composer.json 等配置文件、阅读从浏览器本地存储或控制台复制的数据，以及了解从其他系统接收的数据集结构。

格式化 JSON 的其他方法

  • 浏览器开发者工具：Chrome、Edge 和 Firefox 会在“网络”选项卡的预览窗格中自动格式化 JSON 响应。
  • 代码编辑器：Visual Studio Code 可使用 Alt+Shift+F（Mac 上为 Shift+Option+F）格式化打开的 JSON 文件。大多数编辑器都有相应的快捷键或格式化扩展。
  • 命令行：jq（jq . file.json）和 Python 内置的 python -m json.tool file.json 都可以在终端中格式化 JSON。

将 JSON 格式化功能构建到代码中

大多数编程语言都提供带缩进选项的 JSON 库。在 JavaScript 中：

1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2

在 Python 中：

1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3

这两种方法都会先将文本解析为原生数据结构，然后以带空格的形式重新序列化。这样编写很简单，但可能会改变数字。JavaScript 将所有数字存储为双精度数，因此 9007199254740993 会变回 9007199254740992。Python 能精确保留整数，因为 Python 整数没有大小限制，但它仍会将 1.0e2 重写为 100.0，并将 1e999 转换为 Infinity，而后者不是有效的 JSON。需要精确处理大整数的应用（例如数据库 ID）通常会在 JSON 中将它们存储为字符串，而不是数字。

JSON 简史

Douglas Crockford 在 2000 年代初制定了 JSON，其语法取自 JavaScript 对象字面量，但使其能够用于任何语言。RFC 4627 于 2006 年将其正式规范化。JSON 很快得到普及，因为它比 XML 更简短，而且可以直接映射到 JavaScript 对象；随着 Web 应用开始在后台获取数据而不再重新加载整个页面，这一点变得十分重要。到 2010 年代，它已经成为 REST API 和 MongoDB 等数据库的默认格式。

常见问题

什么是 JSON 格式化工具？ 一种为 JSON 文本添加缩进、换行和空格的工具，使其结构易于阅读，同时不改变数据。

格式化会改变数据吗？ 不会。格式化只会改变空白字符。此工具会逐字复制输入的每个字符串和数字，因此格式化输出中的值与输入完全一致，包括大到无法由 JavaScript 数字精确存储的数字。

为什么会收到“Invalid JSON”错误？ 输入违反了 JSON 规则。常见原因包括属性名未加引号、尾随逗号、单引号、字符串未闭合或括号不匹配。此工具不会显示问题所在的确切字符位置；按照上面列出的规则检查输入，通常可以快速找到问题。

JSON 可以包含注释吗？ 不可以。该规范不允许注释。JSONC 和 JSON5 等格式在 JSON 语法之上增加了注释支持，适用于配置文件等需要注释的场景。

标准的 JSON 缩进是多少？ 两个空格是 Web 开发中最常见的约定，也是此工具使用的设置。一些代码风格指南会使用四个空格或制表符；JSON 规范本身并不要求特定的缩进方式。

JSON.parse() 和 JSON.stringify() 有什么区别？ JSON.parse() 将 JSON 字符串转换为 JavaScript 值。JSON.stringify() 执行相反操作，将 JavaScript 值转换为 JSON 字符串，并接受用于美化打印的缩进参数。此工具在内部不使用这两个函数，因此能够精确保留大整数。

参考文献

  1. RFC 8259 — JavaScript 对象表示法（JSON）数据交换格式
  2. MDN Web Docs：JSON
  3. json.org