在 JavaScript 中格式化 JSON 以便人类可读

在 JavaScript 中格式化 JSON 以便人类可读
在 JavaScript 中格式化 JSON 以便人类可读
Noah Rousseau
2024年6月27日星期四 下午8:35:13

使 JSON 更易于人类阅读

使用 JSON 是开发人员的一项常见任务，尤其是在处理 API 和数据存储时。然而，由于缺乏格式，原始 JSON 可能难以阅读和理解。对于那些希望使 JSON 更易于访问的人来说，应用适当的缩进和空格至关重要。

在本文中，我们将探索使用 JavaScript 漂亮打印 JSON 的各种方法。我们不仅会介绍基本的缩进和空白技术，还会介绍如何通过颜色和字体样式增强可读性。本指南将帮助您将原始 JSON 转换为人类友好的格式。

命令 描述
JSON.stringify(json, null, 2) 将 JavaScript 对象转换为带有 2 个空格缩进的 JSON 字符串。
.replace(/(".*?"|null|true|false|\d+)/g, ...) 使用正则表达式来识别特定 JSON 元素以进行自定义格式设置。
http.createServer(...).listen() 在 Node.js 中创建一个侦听指定端口的 HTTP 服务器。
res.writeHead(200, { 'Content-Type': 'application/json' }) 设置 HTTP 响应标头以指示内容类型为 JSON。
res.end() 将响应发送回客户端，并发出所有响应标头和正文已发送的信号。
document.body.innerHTML 设置或获取文档中 body 元素的 HTML 内容。

JSON格式化脚本详解

第一个脚本是一个前端 JavaScript 解决方案，旨在通过添加缩进和应用颜色编码来漂亮地打印 JSON。该脚本以一个名为的函数开始 prettyPrintJSON，它将 JSON 对象作为输入。在此函数内，使用以下命令将 JSON 对象转换为带有 2 个空格缩进的字符串 JSON.stringify(json, null, 2) 方法。通过添加必要的空格，可以确保 JSON 更具可读性。为了进一步增强可读性，该脚本使用 .replace(/(".*?"|null|true|false|\d+)/g, ...) 方法使用正则表达式来匹配特定的 JSON 元素，例如字符串、数字、布尔值和空值。每个匹配的元素都包含在 带有相应类的标签，允许 CSS 对每种数据类型应用不同的颜色。然后使用以下命令将格式化的 JSON 字符串插入到文档的正文中 document.body.innerHTML。

第二个脚本是使用 Node.js 来漂亮打印 JSON 的后端解决方案。该脚本创建一个 HTTP 服务器 http.createServer(...)，它使用以下方式侦听指定端口上的传入请求 .listen()。收到请求后，服务器会使用格式化为可读性的 JSON 对象进行响应。 JSON 对象使用以下命令转换为带缩进的字符串 JSON.stringify(json, null, 2)。响应标头设置为指示内容类型为 JSON res.writeHead(200, { 'Content-Type': 'application/json' })。最后，使用以下命令将打印精美的 JSON 字符串发送到客户端 res.end()。该脚本使开发人员只需导航到服务器地址即可在浏览器中快速查看格式良好的 JSON 输出。

使用 JavaScript 格式化 JSON 以提高可读性

前端 JavaScript

// Function to pretty-print JSON with indentation and colors
function prettyPrintJSON(json) {
  // Convert JSON object to string with 2-space indentation
  const jsonString = JSON.stringify(json, null, 2);
  // Replace specific characters for color coding
  return jsonString.replace(/(".*?"|null|true|false|\d+)/g, match => {
    let cls = "number";
    if (/^".*"$/.test(match)) {
      cls = "string";
    } else if (/true|false/.test(match)) {
      cls = "boolean";
    } else if (/null/.test(match)) {
      cls = "null";
    }
    return `<span class="${cls}">${match}</span>`;
  });
}
// JSON data
const jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York",
  "isStudent": false
};
// Display formatted JSON
document.body.innerHTML = `<pre>${prettyPrintJSON(jsonData)}</pre>`;

漂亮打印 JSON 的后端方法

使用 Node.js 进行后端

const http = require('http');
const url = require('url');
// Function to pretty-print JSON
function prettyPrintJSON(json) {
  return JSON.stringify(json, null, 2);
}
// Create HTTP server
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  // Sample JSON data
  const jsonData = {
    name: "John",
    age: 30,
    city: "New York",
    isStudent: false
  };
  // Send pretty-printed JSON
  res.end(prettyPrintJSON(jsonData));
}).listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

使用附加工具增强 JSON 可读性

虽然以前的解决方案侧重于前端和后端 JavaScript 方法来漂亮地打印 JSON，但还有其他工具和技术可以进一步增强 JSON 的可读性。一种流行的方法是使用浏览器扩展或在线工具。 JSONView 或 JSON Formatter 等扩展可以在浏览器中自动格式化 JSON，添加缩进和颜色编码以提高可读性。这些工具对于经常与 API 交互并需要快速解析和理解 JSON 数据而无需编写额外代码的开发人员特别有用。

另一种有用的方法是利用 Highlight.js 或 Prism.js 等库，这些库旨在处理各种编程语言（包括 JSON）的语法突出显示。这些库可以集成到 Web 应用程序中，以动态格式化和突出显示 JSON 数据。通过使用 Highlight.js，您可以将预定义的主题应用于 JSON 字符串，从而更轻松地区分不同的数据类型。此外，将此类库集成到您的开发工作流程中可以节省时间并确保不同项目之间 JSON 格式的一致性。

有关 JSON 格式的常见问题

  1. 什么是漂亮打印 JSON？
  2. 漂亮打印 JSON 是指使用缩进和空格来格式化 JSON 数据，以使其更易于人类阅读。
  3. 为什么 JSON 格式很重要？
  4. 正确的 JSON 格式可以提高可读性，并帮助开发人员快速理解数据的结构和内容。
  5. 是什么 JSON.stringify 方法？
  6. 这 JSON.stringify 方法将 JavaScript 对象转换为 JSON 字符串。
  7. 如何 JSON.stringify 有助于漂亮的打印吗？
  8. 通过传递 JSON.stringify 第三个参数（缩进级别），您可以使用缩进格式化 JSON 字符串。
  9. 什么是Highlight.js？
  10. Highlight.js 是一个用于语法突出显示的库，可用于格式化和突出显示 JSON 数据。
  11. 我可以使用浏览器扩展来格式化 JSON 吗？
  12. 是的，像 JSONView 或 JSON Formatter 这样的扩展可以在浏览器中自动格式化 JSON。
  13. 目的是什么 replace JSON格式的方法？
  14. 这 replace 带有正则表达式的方法可用于向不同的 JSON 元素添加颜色编码。
  15. 漂亮打印 JSON 的常见用例是什么？
  16. 漂亮打印 JSON 通常在调试或向非技术利益相关者呈现 JSON 数据时使用。
  17. 如何在 Node.js 中漂亮地打印 JSON？
  18. 您可以在 Node.js 中创建 HTTP 服务器并使用 JSON.stringify 格式化 JSON 响应。

关于 JSON 格式的最终​​想法

漂亮打印 JSON 对于提高数据的可读性和可用性至关重要。使用 JavaScript，开发人员可以应用缩进、空格和颜色编码，使 JSON 更加人性化。此外，利用浏览器扩展和语法突出显示库可以进一步增强格式。这些技术共同有助于更好地调试和呈现 JSON 数据，确保数据处理的清晰度和效率。