JavaScript 实现 JSON 格式化：使用 JSON.stringify 添加缩进与可读性

理解与格式化 JSON 字符串是每个前端开发者常用的技能。将压缩或紧凑的 JSON 转换为带缩进、易阅读的格式，不仅方便调试，也可用于用户界面展示。在本文中，我们将详细介绍如何使用 JavaScript 实现 JSON 字符串的格式化。

使用 JSON.stringify 格式化 JSON

JavaScript 内置的 JSON.stringify() 方法支持将对象或数组转换为字符串，并通过第三个参数设置缩进量。例如：

const data = { name: "Alice", age: 30, hobbies: ["Reading", "Travel"] };
const formatted = JSON.stringify(data, null, 2);
console.log(formatted);

输出结果类似：

{
  "name": "Alice",
  "age": 30,
  "hobbies": [
    "Reading",
    "Travel"
  ]
}

在这个用法中：

• 第一个参数是对象。
• 第二个参数用于 replacer（可设置为 null）。
• 第三个参数控制每一级的缩进空格数量，比如 2 表示每层缩进 2 个空格，也可以使用 '\t' 制表符。

格式化已有的 JSON 字符串

如果你手头已有一个紧凑的 JSON 字符串，可先将其解析成对象，再重新格式化：

const raw = '{"id":1,"user":"Bob","active":true}';
const obj = JSON.parse(raw);
const pretty = JSON.stringify(obj, null, 4);
console.log(pretty);

这样你就能得到包含 4 个空格缩进的可读格式。

进阶用法：定制格式或高亮显示

你还可以用 replacer 参数自定义筛选规则；或者实现带颜色的高亮展示，比如将格式化结果渲染为 HTML，并用 CSS 高亮不同类型的数据。例如：

function syntaxHighlight(json) {
  json = JSON.stringify(json, undefined, 4);
  // 再用正则替换不同数据类型包裹颜色标签
  return json.replace(/("(\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(?:\s*:)?|\b(true|false|null)\b|-?\d+(\.\d*)?([eE][+\-]?\d+)?)/g,
    match => {
      let cls = 'number';
      if (/^"/.test(match)) {
        cls = /:$/.test(match) ? 'key' : 'string';
      } else if (/true|false/.test(match)) {
        cls = 'boolean';
      } else if (/null/.test(match)) {
        cls = 'null';
      }
      return `<span class="${cls}">${match}</span>`;
    }
  );
}

应用场景与优势

调试阶段：格式化 JSON 有助于快速定位和理解数据结构。

用户界面展示：在网页上清晰展示 JSON 数据，提升可读性与体验。

日志记录：在控制台或日志文件中保存整洁的 JSON，便于排查问题。

小结与最佳实践

使用内置 JSON.stringify(obj, null, space) 是格式化 JSON 的最简方式。根据需求选择合适的缩进长度（如 2、4 个空格或 tab），如果有特殊格式需求，可利用 replacer 和语法高亮渲染技巧。对于大多数开发场景，这种方法兼顾简洁与灵活，推荐广泛采用。