js怎么将json有格式显示

JS怎么将JSON有格式显示：从原始数据到美观呈现

在JavaScript开发中,JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于前后端数据交互，当我们直接通过console.log()输出JSON对象时，往往会得到一串紧凑、无格式的字符串，难以直观阅读和调试，如何将JSON数据以“有格式”的方式（即带缩进、换行的美观结构）显示出来？本文将详细介绍几种常见方法，从基础到进阶，助你轻松实现JSON数据的格式化展示。

为什么需要格式化JSON？

在解决方案前,我们先明确：为什么JSON需要格式化显示？

调试友好：开发过程中，格式化的JSON能清晰展示数据层级（如对象嵌套、数组结构），快速定位字段值或错误数据。
数据展示：在用户界面（如配置管理页面、API响应预览）中，格式化JSON能提升可读性，避免用户面对“一坨”字符串无从下手。
文档输出：生成API文档或数据说明时，格式化的JSON更符合文档规范，便于他人理解数据结构。

核心方法：使用`JSON.stringify()`的`space`参数

JavaScript内置的JSON.stringify()方法是将对象转换为JSON字符串的核心工具，而它的第三个参数space正是实现格式化的关键。

`JSON.stringify()`基础语法

该方法的基本语法为：

JSON.stringify(value, replacer, space)

value：要转换的JSON对象或数组。
replacer（可选）：过滤或转换函数，用于控制哪些字段被输出。
space（可选）：格式化控制参数，指定缩进样式，可以是数字（表示缩进空格数）或字符串（表示缩进字符串）。

通过`space`参数实现缩进

space参数是格式化的核心，它的取值不同，效果也不同：

（1）`space`为数字（1-10）

当space为数字时，表示每级缩进的空格数（最大支持10，超过10会自动截断为10）。

const data = {
  name: "张三",
  age: 25,
  hobbies: ["篮球", "编程"],
  address: {
    city: "北京",
    district: "朝阳区"
  }
};
// 使用2个空格缩进
const formattedJson = JSON.stringify(data, null, 2);
console.log(formattedJson);

输出结果：

{
  "name": "张三",
  "age": 25,
  "hobbies": [
    "篮球",
    "编程"
  ],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
}

可以看到,JSON字符串被自动添加了换行和缩进，层级关系一目了然，若space=4，则每级缩进4个空格，效果更宽松。

（2）`space`为字符串

当space为字符串时，每级缩进将使用该字符串（长度不超过10，超长会被截断）。

const formattedJson = JSON.stringify(data, null, "\t"); // 使用制表符缩进
console.log(formattedJson);

输出结果：

{
    "name": "张三",
    "age": 25,
    "hobbies": [
        "篮球",
        "编程"
    ],
    "address": {
        "city": "北京",
        "district": "朝阳区"
    }
}

制表符（\t）常用于代码编辑器中，能实现更整齐的缩进对齐。

结合`replacer`参数实现字段过滤

如果JSON数据包含敏感字段（如密码、token），你可能希望格式化时过滤这些字段，此时可以通过replacer参数实现：

const sensitiveData = {
  name: "李四",
  password: "123456",
  token: "abc.xxxx.yyy"
};
// 过滤掉password和token字段
const filteredJson = JSON.stringify(sensitiveData, (key, value) => {
  if (key === "password" || key === "token") {
    return undefined; // 不包含该字段
  }
  return value;
}, 2);
console.log(filteredJson);

输出结果：

{
  "name": "李四"
}

通过replacer函数，我们既能格式化数据，又能控制输出内容，兼顾可读性和安全性。

进阶场景：在HTML页面中格式化JSON

除了控制台输出,有时我们需要在网页上直接展示格式化的JSON（如API响应预览），此时可以通过HTML和CSS实现更美观的展示。

使用`<pre>`标签保留格式化字符串

<pre>标签是HTML中“预格式化文本”的标签，会保留字符串中的空格、换行等格式，非常适合展示JSON数据，结合JSON.stringify()的space参数，可以直接渲染：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">JSON格式化展示</title>
  <style>
    pre {
      background-color: #f5f5f5;
      padding: 20px;
      border-radius: 4px;
      font-family: "Consolas", "Monaco", monospace;
      font-size: 14px;
      line-height: 1.5;
      white-space: pre-wrap; /* 允许换行 */
      word-wrap: break-word; /* 长单词换行 */
    }
  </style>
</head>
<body>
  <h2>格式化后的JSON数据：</h2>
  <pre id="json-output"></pre>
  <script>
    const data = {
      name: "王五",
      age: 30,
      skills: ["JavaScript", "React", "Node.js"],
      contact: {
        email: "wangwu@example.com",
        phone: "13800138000"
      }
    };
    // 格式化JSON并插入到pre标签中
    const formattedJson = JSON.stringify(data, null, 2);
    document.getElementById("json-output").textContent = formattedJson;
  </script>
</body>
</html>

效果：网页中会显示一个带背景色、等宽字体的JSON块，缩进和换行完整保留，阅读体验接近代码编辑器。

使用第三方库实现高亮展示

如果希望JSON数据不仅格式化,还能语法高亮（如关键字、字符串、数字不同颜色），可以使用第三方库，如highlight.js或prism.js，这里以highlight.js为例：

（1）引入`highlight.js`

通过CDN引入库文件和CSS主题：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/json.min.js"></script>

（2）格式化并高亮JSON

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">JSON高亮展示</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
</head>
<body>
  <h2>JSON语法高亮展示：</h2>
  <pre><code id="json-highlight" class="language-json"></code></pre>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/json.min.js"></script>
  <script>
    const data = {
      name: "赵六",
      age: 28,
      isActive: true,
      score: 95.5,
      tags: ["前端", "开发", "工程师"]
    };
    // 格式化JSON并插入到code标签中
    const formattedJson = JSON.stringify(data, null, 2);
    const codeElement = document.getElementById("json-highlight");
    codeElement.textContent = formattedJson;
    // 调用highlight.js进行语法高亮
    hljs.highlightElement(codeElement);
  </script>
</body>
</html>

效果：JSON字符串会被自动添加语法高亮，对象名、字符串、布尔值、数字等类型以不同颜色显示，进一步提升可读性。

常见问题与注意事项

循环引用问题

如果JSON对象中存在循环引用（如对象A的某个属性指向对象B，对象B

欧易欧易欧易欧易下载欧易app 欧易下载欧易app

正文

js怎么将json有格式显示