ES10 新特性：JSON.stringify() 中的空格和缩进优化方法-JavaScript中文网-JavaScript教程资源分享门户

ES10 新特性：JSON.stringify() 中的空格和缩进优化方法

在前端开发中，我们经常使用 JSON 来传递数据。JSON.stringify() 方法可以将 JavaScript 中的对象转成 JSON 格式的字符串。在 ES10 中，JSON.stringify() 方法新增了几个参数，可以优化输出的空格和缩进，使得输出的 JSON 更加美观和易读。

默认的 JSON.stringify() 方法输出的 JSON 字符串是紧凑的，没有任何空格和缩进。这在数据量很大的时候，很难阅读和调试。在 ES10 中，我们可以通过设置第二个参数或第三个参数，来实现空格和缩进的优化。

第二个参数：处理 JSON 字符串中的每一个键值对

第二个参数用来处理每个键值对之间的空格和缩进。它可以是一个字符串或者是一个用于处理空格和缩进的函数，如下所示：

const data = {
  name: 'Tom',
  age: 18,
  address: {
    city: 'Beijing',
    country: 'China'
  }
};

// 使用一个字符串作为第二个参数，表示每个缩进的空格数
const jsonWithSpace = JSON.stringify(data, null, 2);
console.log(jsonWithSpace);
/*
输出结果：
{
  "name": "Tom",
  "age": 18,
  "address": {
    "city": "Beijing",
    "country": "China"
  }
}
*/

// 使用一个函数作为第二个参数，返回每个键值对之间的空格和缩进
const jsonWithFn = JSON.stringify(data, null, (space) => {
  return space.repeat(2);
});
console.log(jsonWithFn);
/*
输出结果：
{
  "name": "Tom",
  "age": 18,
  "address": {
    "city": "Beijing",
    "country": "China"
  }
}
*/

通过设置第二个参数，我们可以实现每个键值对之间的空格和缩进。

第三个参数：处理 JSON 字符串整体的空格和缩进

第三个参数用来处理整个 JSON 字符串的空格和缩进。它可以是一个字符串或者是一个用于处理空格和缩进的函数。如果第三个参数是一个数字，则表示每行字符串的最大字符数，字符串超过该长度的部分将会被换行。如下所示：

const longJsonData = {
  name: 'Tom',
  age: 18,
  address: {
    city: 'Beijing',
    country: 'China'
  },
  friends: [
    'Jerry',
    'Lucy',
    'Lily',
    'John',
    'Mary',
    'Bob',
    'Steve',
    'Jack'
  ]
};

// 使用一个数字作为第三个参数，表示每行字符串的最大字符数
const jsonWithMaxLength = JSON.stringify(longJsonData, null, 4);
console.log(jsonWithMaxLength);
/*
输出结果：
{
    "name": "Tom",
    "age": 18,
    "address": {
        "city": "Beijing",
        "country": "China"
    },
    "friends": [
        "Jerry",
        "Lucy",
        "Lily",
        "John",
        "Mary",
        "Bob",
        "Steve",
        "Jack"
    ]
}
*/

// 使用一个函数作为第三个参数，返回整个字符串的空格和缩进
const jsonWithFn = JSON.stringify(longJsonData, null, (space) => {
  return space.repeat(2);
});
console.log(jsonWithFn);
/*
输出结果：
{
  "name": "Tom",
  "age": 18,
  "address": {
    "city": "Beijing",
    "country": "China"
  },
  "friends": [
    "Jerry",
    "Lucy",
    "Lily",
    "John",
    "Mary",
    "Bob",
    "Steve",
    "Jack"
  ]
}
*/

通过设置第三个参数，我们可以实现整个 JSON 字符串的空格和缩进。

总结

在 ES10 中，JSON.stringify() 方法新增了几个参数，可以优化输出的空格和缩进。通过设置第二个和第三个参数，我们可以实现每个键值对之间的空格和缩进，以及整个 JSON 字符串的空格和缩进。这些功能可以使得输出的 JSON 格式更加美观和易读，提高开发效率。

示例代码： https://codepen.io/kunreal/full/ExyNJBy

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6594b520eb4cecbf2d8febce

ES10 新特性：JSON.stringify() 中的空格和缩进优化方法

纠错反馈