问题背景
在使用 Monaco Editor（微软开源的代码编辑器，VS Code 就是基于它开发的）处理 JSON 数据时，很多开发者会遇到一个常见但令人困扰的问题：直接将 JavaScript 对象放入编辑器后，显示效果非常不友好 - 没有换行、没有缩进，所有内容挤在一行，可读性极差。
// 不友好的显示效果
const data = {name:"张三",age:30,address:{city:"北京",district:"海淀区"},hobbies:["读书","编程","运动"]}
常规解决方案及其局限
大多数开发者首先想到的是使用 JSON.stringify() 方法将对象转换为字符串：
const jsonStr = JSON.stringify(data);
// 结果仍然是紧凑格式：{"name":"张三","age":30,"address":{"city":"北京","district":"海淀区"},"hobbies":["读书","编程","运动"]}
这虽然解决了类型转换问题，但可读性依然很差。
比如实战效果：太紧凑了！！！
终极解决方案：JSON.stringify() 的第三个参数
JSON.stringify() 实际上接受三个参数，而第三个参数正是解决这个问题的关键：
const prettyJson = JSON.stringify(data, null, 2);
// 结果将是格式化的：
// {
// "name": "张三",
// "age": 30,
// "address": {
// "city": "北京",
// "district": "海淀区"
// },
// "hobbies": [
// "读书",
// "编程",
// "运动"
// ]
// }
实战效果图：完美！
深入解析 JSON.stringify() 方法
方法签名
javascript复制代码
JSON.stringify(value[, replacer[, space]])
参数详解
-
value (必需)
- 要转换为 JSON 字符串的 JavaScript 值
- 可以是对象、数组、字符串、数字等
-
replacer (可选)
-
可以是一个函数或数组
-
函数形式
：可以对每个属性进行转换处理
javascript复制代码
JSON.stringify(data, (key, value) => { if (key === 'age') return undefined; // 过滤掉age属性 return value; }); -
数组形式
：指定要包含的属性白名单
javascript复制代码
JSON.stringify(data, ['name', 'hobbies']);
-
-
space (可选)
-
控制输出字符串的缩进和格式化
-
数字：表示缩进的空格数（常用2或4）
javascript复制代码
JSON.stringify(data, null, 2); -
字符串：使用该字符串作为缩进（如"\t"表示制表符）
javascript复制代码
JSON.stringify(data, null, '\t');
-
总结
通过合理使用 JSON.stringify() 的第三个参数，我们可以轻松解决 Monaco Editor 中 JSON 显示不美观的问题。这种方法：
- 实现简单，只需添加一个参数
- 保持了数据的完整性和准确性
- 大幅提升了开发体验和可读性
- 适用于各种需要展示JSON的场景
