如何在JavaScript中美观地输出JSON：完整指南

引言：为什么JSON像一锅粥，以及如何解决？

你是否曾经打开浏览器控制台，看到一行没有空格的长字符串，心想：“错误在哪里？”？这是经典场景。JSON是一种通用的数据交换语言，但原始格式读起来就像微波炉的日文说明书。尤其是当数据量很大时：嵌套对象、数组、长字符串。

幸运的是，JavaScript内置了一些工具，可以将这锅“粥”变成整洁、结构化的美观形式。这个过程称为pretty-print JSON（或“美化输出”）。在本文中，我们将探讨所有方法：从基础的JSON.stringify到高级的自定义解决方案。您将学会不仅读取JSON，而且舒适地做到这一点。

本文为pythonlib.ru编写——这是一个教育资源网站，我们喜欢清晰的解释和生动的示例。开始吧！

什么是pretty-print JSON，为什么需要它？

Pretty-print（或prettify）是使用缩进、换行和对齐来格式化结构化数据（JSON、XML、YAML）的过程。视觉上看起来像美观的代码，而不是一长串。

为什么需要它？

\n
• 调试（debugging）。您可以看到对象的结构：键在哪里，嵌套对象在哪里，数组在哪里。
\n
• 读取日志。在浏览器控制台或服务器日志中，格式化的JSON可以保护眼睛。
\n
• 文档。文档中的JSON示例总是经过美化。
\n
• 学习。新手更容易理解数据结构，当它被分解成不同层级时。
\n

在JavaScript中，有两种主要方法可以获得美观的JSON：内置的JSON.stringify和第三方库（例如pretty-js）。但让我们从基础开始。

方法1：带参数的JSON.stringify()（最流行）

您可能已经知道JSON.stringify()方法。它将对象转换为JSON字符串。但它还有第二和第三个参数，可以创造奇迹。

语法

JSON.stringify(value, replacer, space)

\n
• value — 您的对象或数组。
\n
• replacer — 用于过滤键的函数或数组（通常为null）。
\n
• space — 缩进的空格数（或字符串，例如"\\t"用于制表符）。
\n

示例1：带空格的基本美化

const user = {\n  name: "阿列克谢",\n  age: 30,\n  skills: ["JavaScript", "Python", "SQL"],\n  address: {\n    city: "莫斯科",\n    zip: 101000\n  }\n};\n\n// 无格式化——一行字符串\nconsole.log(JSON.stringify(user));\n// {"name":"阿列克谢","age":30,"skills":["JavaScript","Python","SQL"],"address":{"city":"莫斯科","zip":101000}}\n\n// 带格式化——美观！\nconsole.log(JSON.stringify(user, null, 2));\n

控制台中的结果：

{\n  "name": "阿列克谢",\n  "age": 30,\n  "skills": [\n    "JavaScript",\n    "Python",\n    "SQL"\n  ],\n  "address": {\n    "city": "莫斯科",\n    "zip": 101000\n  }\n}\n

请注意：2个空格的缩进使结构变得可读。您可以使用4个空格或制表符（"\\t"）。

示例2：使用replacer进行过滤

有时只需要输出部分数据。第二个参数replacer可以是一个键的数组。

const filtered = JSON.stringify(user, ["name", "skills"], 2);\nconsole.log(filtered);\n// {\n//   "name": "阿列克谢",\n//   "skills": [\n//     "JavaScript",\n//     "Python",\n//     "SQL"\n//   ]\n// }\n

或者是一个函数：

const replacerFunc = (key, value) => {\n  if (key === "age") return undefined; // 排除年龄