30秒学会 JavaScript 片段 · 2022年4月19日

30秒学会 JavaScript 片段 – Pretty-print a JSON object with JavaScript

Pretty-printing refers to the process of making some data more human-readable. In regards to JSON, it’s primarily the process of indenting the data so that it is easier to read. This is pretty easy to accomplish, using JSON.stringify() with the appropriate arguments.

代码实现

const obj = {
  id: 1182,
  username: 'johnsmith',
  active: true,
  emails: ['[email protected]', '[email protected]'],
};

JSON.stringify(obj, null, 2);
// {
//   "id": 1182,
//   "username": "johnsmith",
//   "active": true,
//   "emails": [
//     "[email protected]"
//     "[email protected]"
//   ]
// }

As you can see in this example, the third argument of JSON.stringify() is the number of spaces to indent each level of the object. Additionally, you can use the second argument to specify a replacer function. This can come in handy if you want to provide custom formatting for certain types of values or specific key-value pairs.

使用样例

const obj = {
  id: 1182,
  username: 'johnsmith',
  active: true,
  emails: ['[email protected]', '[email protected]'],
};

const replacer = (key, value) => {
  if (key === 'id') return value.toString(16);
  if (key === 'username') return `@${value}`;
  if (key === 'emails') return `${value[0]} +${value.length - 1} more`;
  return value;
};

JSON.stringify(obj, replacer, 2);
// {
//   "id": "0x4e2",
//   "username": "@johnsmith",
//   "active": true,
//   "emails": "[email protected] +1 more"
// }

翻译自:https://www.30secondsofcode.org/js/s/pretty-print-json