js怎么将json字符串格式化

JS轻松搞定：JSON字符串格式化全攻略

在JavaScript开发中,我们经常需要处理JSON（JavaScript Object Notation）数据，无论是从服务器获取API响应，还是将本地数据序列化存储，JSON字符串都扮演着至关重要的角色，未经处理的JSON字符串通常是一行紧凑、难以阅读的“面条代码”，这在调试、日志记录或数据展示时非常不便。

幸运的是,JavaScript内置了一些简单而强大的方法，可以轻松地将JSON字符串格式化，使其变得清晰、美观、易于理解，本文将详细介绍如何实现这一点，并提供一些实用的技巧。

核心方法：JSON.parse() + JSON.stringify()

要将一个JSON字符串格式化,最常用也是最核心的组合就是 JSON.parse() 和 JSON.stringify()，我们可以将其分解为两步：

1. 解析：使用 JSON.parse() 将JSON字符串转换成一个JavaScript对象，这是必要的一步，因为格式化操作是在对象上进行的，而不是原始字符串。
2. 字符串化：使用 JSON.stringify() 将JavaScript对象重新转换成一个格式化后的JSON字符串。JSON.stringify() 方法接受三个参数，其中第二个参数 replacer 和第三个参数 space 是实现格式化的关键。

主角登场：JSON.stringify() 的 space 参数

JSON.stringify() 的第三个参数 space 是我们实现格式化的“魔法棒”，它用于控制缩进和空格，从而美化输出。

space 参数可以有两种类型的值：

1. 数字 (Number)：如果你传入一个数字，它表示每一级缩进使用的空格数量。

   • 有效范围是 0 到 10，如果传入的数字大于10，它会被自动当作10处理。
   • 如果传入 0 或不传，则输出没有缩进的单行字符串。

2. 字符串 (String)：如果你传入一个字符串（如 '\t' 或 ），该字符串将用于每一级的缩进。

   • 字符串的前10个字符会被用作缩进,如果字符串长度超过10，多余的字符会被忽略。
   • 这对于使用制表符 \t 进行缩进非常有用。

实战演练：代码示例

让我们通过几个具体的例子来看看效果如何。

假设我们有一个未经格式化的JSON字符串：

const jsonString = '{"name":"张三","age":30,"isStudent":false,"courses":["数学","物理"],"address":{"city":"北京","district":"朝阳区"}}';

示例1：使用数字进行缩进

我们使用 space: 2，即每个缩进级别使用2个空格。

const jsonObj = JSON.parse(jsonString);
const formattedJson = JSON.stringify(jsonObj, null, 2);
console.log(formattedJson);

输出结果：

{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "courses": [
    "数学",
    "物理"
  ],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
}

是不是瞬间变得清晰多了？对象和数组的层级结构一目了然。

示例2：使用字符串（制表符）进行缩进

如果你更喜欢使用制表符,可以传入 '\t'。

const jsonObj = JSON.parse(jsonString);
const formattedJsonWithTab = JSON.stringify(jsonObj, null, '\t');
console.log(formattedJsonWithTab);

输出结果：

{
    "name": "张三",
    "age": 30,
    "isStudent": false,
    "courses": [
        "数学",
        "物理"
    ],
    "address": {
        "city": "北京",
        "district": "朝阳区"
    }
}

进阶技巧：使用 replacer 参数

JSON.stringify() 的第二个参数 replacer 也很强大，它可以是：

• 一个函数：可以用来控制哪些属性应该被序列化，以及它们的值如何被转换。
• 一个数组：一个包含字符串和数字的数组，指定了需要被序列化的属性名。

虽然它不直接用于格式化,但我们可以结合它来过滤或转换数据，然后再进行格式化。

示例：只格式化特定属性

假设我们只想显示 name 和 courses 这两个属性。

const jsonObj = JSON.parse(jsonString);
const replacer = ['name', 'courses']; // 只包含这两个键
const formattedJsonWithReplacer = JSON.stringify(jsonObj, replacer, 2);
console.log(formattedJsonWithReplacer);

输出结果：

{
  "name": "张三",
  "courses": [
    "数学",
    "物理"
  ]
}

在浏览器控制台快速格式化

作为一名开发者,你肯定经常在浏览器开发者工具的控制台中查看JSON数据，有一个超快速的方法：

1. 在控制台中获取到你的JSON对象或字符串。
2. 如果是对象,直接在控制台中输入 JSON.stringify(yourObject, null, 2) 并回车。
3. 如果是字符串,先用 JSON.parse(yourString) 转成对象，再执行上面的步骤。
4. 在控制台的输出结果上右键单击，选择 “Store as global variable” (存储为全局变量)，变量名通常是 temp1。
5. 在控制台中输入 copy(temp1)。

这样,格式化好的JSON字符串就会被复制到你的剪贴板，可以直接粘贴使用了！

将JSON字符串格式化是前端开发中一项非常基础且实用的技能,记住这个黄金组合：

JSON.stringify(JSON.parse(yourJsonString), null, space)

• JSON.parse() 用于“解封”字符串，得到可以操作的对象。
• JSON.stringify() 用于“重塑”对象，并通过 space 参数（数字或字符串）控制输出的格式和缩进。

这个技巧,不仅能让你在调试时事半功倍，也能在需要向用户展示或传递结构化数据时，提供更好的可读性，希望这篇文章能帮助你轻松搞定JSON字符串格式化！