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

Q: JSON.parse() 和 JSON.stringify() 有什么区别？

JSON.parse() 将 JSON 字符串转换为 JavaScript 值。JSON.stringify() 执行相反操作，将 JavaScript 值转换为 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 对象那样只保留最后一个。

处理过程分为以下步骤：

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

缩进固定为 2 个空格，没有可更改它的设置。如果输入为空，则不显示任何内容。如果输入违反了 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 或 tsconfig.json 等配置文件，阅读从浏览器本地存储或控制台复制的数据，以及理解从其他系统收到的数据集的结构。

格式化 JSON 的其他方法

浏览器开发者工具：Chrome、Edge 和 Firefox 会在“网络”选项卡的预览窗格中自动格式化 JSON 响应。
代码编辑器：Visual Studio Code 可以在 Windows 上按 Shift+Alt+F、在 Mac 上按 Shift+Option+F、在 Linux 上按 Ctrl+Shift+I 来格式化打开的 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

这两种方法都是先把文本解析成原生数据结构，再带着间距重新序列化。如上所示，这样写起来很简单，但可能改变大整数，因为这两种语言默认都把数字存储为双精度浮点数。需要精确保存大整数的应用程序（例如数据库 ID），通常在 JSON 中把它们存为字符串，而不是数字。

JSON 简史

道格拉斯·克罗克福德（Douglas Crockford）在 2000 年代初规定了 JSON，其语法取自 JavaScript 对象字面量，但使其可以在任何语言中使用。RFC 4627 于 2006 年将其正式化。它传播得很快，因为写起来比 XML 更短，并且可以直接对应到 JavaScript 对象，而这一点在网页应用开始在后台获取数据、而不是重新加载整个页面时尤为重要。到 2010 年代，它已被网络 API 广泛使用。

常见问题

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

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

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

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

标准的 JSON 缩进是多少？ 两个空格是常见的约定，也是本工具所用的缩进。有些风格指南改用四个空格或制表符；JSON 规范本身并不要求任何特定的缩进。

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

参考文献

互联网工程任务组。RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format。RFC 8259 — JSON 值是对象、数组、数字、字符串、true、false 或 null；词元之间只允许出现空白字符。
Mozilla 开发者网络。JSON.parse()。JSON.parse() 参考 — 数组和对象不能有尾随逗号；错误消息会报告位置。
Mozilla 开发者网络。Number.MAX_SAFE_INTEGER。Number.MAX_SAFE_INTEGER 参考 — 最大的安全整数为 2^53 − 1 = 9,007,199,254,740,991。
互联网工程任务组。RFC 4627: The application/json Media Type for JavaScript Object Notation (JSON)。RFC 4627 — 第一份 JSON RFC，作者 D. Crockford，2006 年七月。
微软。Editing JSON with Visual Studio Code。VS Code JSON 文档 — 各平台上的“格式化文档”快捷键。
Python 软件基金会。json — JSON encoder and decoder。Python json 文档 — python -m json.tool 可在命令行中美化打印 JSON。

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