js如何输出标准的json格式

JS如何输出标准的JSON格式？一篇搞定JSON.stringify()

在JavaScript的世界里，处理JSON（JavaScript Object Notation）数据是一项核心技能，无论是与后端API进行数据交互，还是在本地存储复杂数据结构，我们都需要将JavaScript对象或数组转换为标准的JSON格式字符串，这个过程，我们通常使用全局对象 JSON 提供的 stringify() 方法来完成。

直接使用 JSON.stringify() 并不总能得到我们想要的“标准”或“美观”的输出，本文将探讨如何使用 JSON.stringify()，并通过其强大的参数来输出符合各种需求的、格式规范的JSON数据。

核心方法：JSON.stringify()

JSON.stringify() 是将一个JavaScript对象或数组序列化为一个JSON格式字符串的唯一标准方法,它的基本语法如下：

JSON.stringify(value, replacer, space)

它接受三个参数，value 是必需的，replacer 和 space 是可选的。

最简单的用法：直接转换

对于最基本的需求,我们只需要传入需要转换的对象即可。

const user = {
  name: "张三",
  age: 30,
  isAdmin: true,
  courses: ["前端", "Node.js"],
  address: {
    city: "北京"
  }
};
// 直接转换
const jsonString = JSON.stringify(user);
console.log(jsonString);

输出结果：

{"name":"张三","age":30,"isAdmin":true,"courses":["前端","Node.js"],"address":{"city":"北京"}}

可以看到，这是一个有效的JSON字符串，但它没有任何缩进和换行，对于人类阅读来说并不友好，在大多数场景下，例如API请求，这种紧凑的格式是推荐的，但在调试、日志记录或配置文件生成时，我们更希望看到格式化的、易于阅读的JSON。

实现标准格式化：使用 space 参数

为了让输出的JSON字符串具有标准的“美化”格式（即带缩进和换行），JSON.stringify() 的 space 参数就是我们的利器。

space 参数可以是一个数字或一个字符串,用于指定缩进用的空白字符串。

使用数字作为 space

当你传入一个数字时，它代表每一级缩进所用的空格数量，该值最大为10,超过10的值会被自动视为10。

const user = { /* ... 同上 ... */ };
// 使用2个空格进行缩进
const prettyJsonWithNumber = JSON.stringify(user, null, 2);
console.log(prettyJsonWithNumber);

输出结果（标准格式化的JSON）：

{
  "name": "张三",
  "age": 30,
  "isAdmin": true,
  "courses": [
    "前端",
    "Node.js"
  ],
  "address": {
    "city": "北京"
  }
}

这正是我们通常所说的“标准JSON格式”——结构清晰，易于阅读和编辑。2 或 4 是最常用的缩进空格数。

使用字符串作为 space

你也可以传入一个字符串（如 '\t' 制表符，或 两个空格字符串）作为缩进。

// 使用制表符进行缩进
const prettyJsonWithString = JSON.stringify(user, null, '\t');
console.log(prettyJsonWithString);

输出结果：

{
    "name": "张三",
    "age": 30,
    "isAdmin": true,
    "courses": [
        "前端",
        "Node.js"
    ],
    "address": {
        "city": "北京"
    }
}

进阶控制：使用 replacer 参数

replacer 参数是一个函数或数组，用于控制哪些属性应该被序列化,以及如何序列化它们。

使用数组作为 replacer（白名单）

如果你只想输出对象中的特定几个属性,可以传入一个包含这些属性名的数组。

const user = { /* ... 同上 ... */ };
// 只序列化 name 和 age 属性
const filteredJson = JSON.stringify(user, ['name', 'age'], 2);
console.log(filteredJson);

输出结果：

{
  "name": "张三",
  "age": 30
}

address, isAdmin, courses 等属性被成功过滤掉了。

使用函数作为 replacer（自定义处理）

如果你需要更精细的控制，比如修改某个属性的值或完全跳过某些属性，可以传入一个函数，这个函数会在序列化过程中被调用,对每个键值对进行处理。

• 函数参数：function(key, value)
  • key: 当前处理到的属性名。
  • value: 当前处理到的属性值。
• 返回值：
  • 返回非 undefined 的值：该值将被序列化到最终的JSON字符串中。
  • 返回 undefined：该属性将从最终的JSON字符串中移除。

示例1：修改值

const user = { name: "张三", password: "123456" };
// 序列化时，将密码值替换为 *****
const sanitizedJson = JSON.stringify(user, (key, value) => {
  if (key === 'password') {
    return '*****';
  }
  return value; // 其他属性原样返回
}, 2);
console.log(sanitizedJson);

输出结果：

{
  "name": "张三",
  "password": "*****"
}

示例2：移除属性

const user = { name: "张三", password: "123456", id: 101 };
// 序列化时，移除 password 属性
const removedJson = JSON.stringify(user, (key, value) => {
  if (key === 'password') {
    return undefined; // 返回 undefined 以移除该属性
  }
  return value;
}, 2);
console.log(removedJson);

输出结果：

{
  "name": "张三",
  "id": 101
}

综合实例：输出一个完美的配置文件

假设我们要将一个应用配置对象输出为一个格式良好、且已过滤敏感信息的JSON文件。

const appConfig = {
  appName: "My Awesome App",
  version: "1.0.0",
  debugMode: true,
  database: {
    host: "localhost",
    port: 5432,
    password: "a_very_secret_password" // 敏感信息
  },
  apiKey: "sk-abc123def456"
};
// 使用 replacer 函数过滤敏感信息，并使用2个空格格式化
const finalConfigJson = JSON.stringify(appConfig, (key, value) => {
  // 过滤掉包含 'password' 或 'apiKey' 的属性
  if (key === 'password' || key === 'apiKey') {
    return undefined;
  }
  return value;
}, 2);
console.log(finalConfigJson);

最终输出结果：

{
  "appName": "My Awesome App",
  "version": "1.0.0",
  "debugMode": true,
  "database": {
    "host": "localhost",
    "port": 5432
  }
}

这个结果既符合JSON标准，又安全、美观,非常适合用于配置文件或展示给用户。

总结与最佳实践

JSON.stringify() 的三个参数，你就能在JavaScript中游刃有余地输出任何符合标准的JSON格式数据。space 参数负责美化，replacer 参数负责过滤和转换，两者可以组合使用,以达到最理想的效果。