Toolypet
Back to Blog
Dev

JSON 格式化精通:开发者必备技巧

学习如何有效处理和格式化 JSON 数据,以及避免常见错误的技巧。

Toolypet Team2 min read
JSON 格式化精通:开发者必备技巧

现代 Web 开发的通用语言,JSON

作为 Web 开发者,每天都会无数次接触 JSON。检查 API 响应、修改配置文件、处理从数据库获取的数据——所有这些时刻都有 JSON 的身影。JSON(JavaScript Object Notation)如此广泛使用的原因很简单:人容易阅读,机器容易解析,几乎所有编程语言都原生支持。

但看似简单的 JSON,在实际处理时也容易陷入意想不到的陷阱。使用单引号导致解析错误,或者因为一个尾随逗号调试一个小时——作为开发者,你应该都有过类似经历。今天我们来了解如何更有效地处理 JSON,以及如何避免常见错误。

理解 JSON 的基本结构

JSON 基于两种结构:名称/值对的集合——对象(Object),以及有序的值列表——数组(Array)。仅用这两种结构就能表达几乎所有复杂数据,这正是 JSON 的魅力所在。

{
  "user": {
    "name": "张开发",
    "age": 28,
    "isActive": true,
    "skills": ["JavaScript", "TypeScript", "React"],
    "address": null
  }
}

JSON 支持的数据类型只有六种:字符串、数字、布尔值、null、数组、对象。与 JavaScript 不同,undefined、函数、Date 对象等无法直接用 JSON 表示。处理日期时,通常使用 ISO 8601 格式的字符串("2025-12-26T09:00:00Z")。

开发者常犯的 JSON 错误

即使是经验丰富的开发者也经常犯的错误。大多数是因为与 JavaScript 的对象字面量语法混淆造成的。

最常见的错误是使用单引号。在 JavaScript 中可以自由使用单引号和双引号,但在 JSON 中只允许双引号。这个规则同时适用于键(key)和字符串值。

// 错误示例 - 会产生解析错误
{ 'name': 'John' }

// 正确示例
{ "name": "John" }

第二常见的错误是尾随逗号(trailing comma)。在 JavaScript 或 TypeScript 中,数组或对象最后一个元素后面留一个逗号是没问题的,甚至为了保持 git diff 整洁还被推荐。但在 JSON 中这是语法错误。

// 错误示例
{
  "items": [
    "apple",
    "banana",
  ]
}

// 正确示例
{
  "items": [
    "apple",
    "banana"
  ]
}

尝试使用注释也很常见。JSON 官方不支持注释。如果配置文件需要注释,可以考虑 JSON5 或 JSONC(JSON with Comments)格式。VS Code 的设置文件使用 JSONC 格式正是这个原因。

如何让杂乱的 JSON 变得易读

API 响应或日志中遇到的 JSON 大多是压缩成一行的。为了提高网络传输效率这是理所当然的做法,但调试时会让眼睛很累。这时就需要 JSON 格式化工具。

// 压缩状态 (Minified)
{"users":[{"id":1,"name":"Alice","email":"alice@example.com"},{"id":2,"name":"Bob","email":"bob@example.com"}]}

// 格式化状态 (Beautified)
{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "email": "alice@example.com"
    },
    {
      "id": 2,
      "name": "Bob",
      "email": "bob@example.com"
    }
  ]
}

带缩进的 JSON 可以一眼看清数据结构。可以直观地确认嵌套对象的深度,也能清楚看到数组的每个元素从哪里开始到哪里结束。相反,部署到生产环境时,最好去除空格和换行以减小体积。对于大型 JSON 文件,仅压缩就能减少 20-30% 的容量。

API 调试的实战技巧

在终端测试 API 时,curl 和 jq 的组合是强大的武器。jq 是处理 JSON 的命令行工具,不仅可以美化输出,还可以过滤和转换数据。

# 美化输出 API 响应
curl -s https://api.example.com/users | jq '.'

# 提取第一个用户的名字
curl -s https://api.example.com/users | jq '.data[0].name'

# 提取所有用户的邮箱列表
curl -s https://api.example.com/users | jq '.data[].email'

在浏览器开发者工具中也经常需要处理 JSON。在 Network 标签页查看 API 响应时,使用 Preview 标签而不是 Response 标签可以看到自动格式化的 JSON。但如果想复制到其他地方使用,仍然需要外部工具。

使用 JSON Path 导航复杂数据

在大规模 JSON 数据中查找特定值时,JSON Path 很有用。就像 XPath 导航 XML 一样,JSON Path 是导航 JSON 数据的查询语言。

// 复杂的 JSON 结构
{
  "store": {
    "name": "在线书店",
    "books": [
      { "title": "JavaScript 权威指南", "price": 35000, "inStock": true },
      { "title": "React 实战技术", "price": 32000, "inStock": false },
      { "title": "Node.js 教程", "price": 28000, "inStock": true }
    ]
  }
}

// JSON Path 示例
$.store.books[*].title          // 所有书籍标题
$.store.books[?(@.inStock)].title   // 仅有库存的书籍标题
$.store.books[?(@.price < 30000)]   // 低于3万元的书籍

这种查询在测试自动化或数据验证中特别有用。Postman 等 API 测试工具也支持 JSON Path,掌握后可以在多处活用。

总结

JSON 是简单的格式,但善用可以大大提高开发效率。使用合适的工具提高可读性、验证有效性、快速提取所需数据。Toolypet 的 JSON Formatter 可以在一处完成格式化、压缩、语法验证,让日常 JSON 工作变得更加轻松。

下次当 API 响应挤在一行让你抓狂时,或者解析错误了却不知道哪里出问题时,希望 Toolypet 能成为你想到的那个工具。

JSONFormattingDeveloper ToolsAPI
Back to all posts