JSON 格式化

This content is not available in your language yet.

JSON 格式化工具 📝

专业的 JSON 数据处理工具，支持格式化、验证、压缩、转换等多种功能。

功能特点

🎨 智能格式化 - 自动缩进和换行，支持自定义缩进
✅ 实时验证 - 即时检查 JSON 语法错误
🗜️ 压缩/美化 - 一键压缩或美化 JSON
🔄 格式转换 - 支持 JSON ↔ XML ↔ YAML 互转
🌳 树形视图 - 可视化展示 JSON 结构
🔍 路径查询 - 支持 JSONPath 查询

快速开始

格式化 JSON

将 JSON 数据粘贴到左侧输入框
工具自动格式化并显示在右侧
可以调整缩进空格数（2/4/8）

输入示例：

{"name":"张三","age":25,"skills":["JavaScript","Python","Go"],"address":{"city":"北京","zip":"100000"}}

格式化后：

{
  "name": "张三",
  "age": 25,
  "skills": [
    "JavaScript",
    "Python",
    "Go"
  ],
  "address": {
    "city": "北京",
    "zip": "100000"
  }
}

验证 JSON

工具会自动验证 JSON 格式：

✅ 有效 - 显示绿色对勾
❌ 无效 - 显示红色错误信息，指出错误位置

常见错误：

// 错误：键名未加引号
{ name: "张三" }

// 错误：尾随逗号
{ "name": "张三", }

// 错误：单引号
{ 'name': '张三' }

// 正确
{ "name": "张三" }

功能详解

1. JSON 压缩

将格式化的 JSON 压缩成一行，减少体积：

压缩前：

{
  "name": "张三",
  "age": 25
}

压缩后：

{"name":"张三","age":25}

适用场景：

网络传输
存储优化
URL 参数传递

2. 格式转换

JSON 转 XML

{
  "user": {
    "name": "张三",
    "age": 25
  }
}

转换后：

<?xml version="1.0" encoding="UTF-8"?>
<user>
  <name>张三</name>
  <age>25</age>
</user>

JSON 转 YAML

{
  "name": "张三",
  "skills": ["JS", "Python"]
}

转换后：

name: 张三
skills:
  - JS
  - Python

XML 转 JSON

支持将 XML 数据转换为 JSON 格式。

3. 树形视图

以树状结构可视化展示 JSON：

📁 root
├── 📄 name: "张三"
├── 📄 age: 25
└── 📁 skills
    ├── 📄 [0]: "JavaScript"
    ├── 📄 [1]: "Python"
    └── 📄 [2]: "Go"

功能：

点击展开/折叠节点
快速定位深层数据
显示数据类型图标

4. JSONPath 查询

使用 JSONPath 语法查询 JSON 数据：

JSONPath	说明	示例结果
`$.name`	根节点 name	`"张三"`
`$.skills[0]`	skills 数组第一个	`"JavaScript"`
`$.skills[*]`	skills 数组所有	`["JS", "Python", "Go"]`
`$..city`	递归查找 city	`["北京", "上海"]`
`$.users[?(@.age>18)]`	条件筛选	年龄大于18的用户

示例 JSON：

{
  "store": {
    "book": [
      { "title": "JavaScript", "price": 50 },
      { "title": "Python", "price": 60 }
    ]
  }
}

查询： $.store.book[?(@.price<55)].title

结果： ["JavaScript"]

5. 差异对比

比较两个 JSON 数据的差异：

🟢 新增的内容
🔴 删除的内容
🟡 修改的内容

6. 生成代码

根据 JSON 数据生成各种语言的解析代码：

TypeScript Interface
Go Struct
Python Class
Java Class
C# Class

示例：

{
  "id": 1,
  "name": "产品",
  "price": 99.99
}

生成 TypeScript：

interface Product {
  id: number;
  name: string;
  price: number;
}

高级功能

批量处理

一次性处理多个 JSON 文件：

上传多个 JSON 文件
选择处理方式（格式化/压缩/转换）
批量下载处理后的文件

历史记录

自动保存最近处理的 JSON：

本地存储，保护隐私
支持清空历史
快速恢复之前的编辑

导入/导出

从文件导入 - 支持 .json 文件
从 URL 导入 - 输入 JSON API 地址
导出文件 - 下载为 .json 文件

使用技巧

技巧 1：快速修复常见错误

工具提供一键修复功能：

单引号转双引号
去除尾随逗号
给未加引号的键名添加引号

技巧 2：大文件处理

对于大型 JSON 文件：

使用流式解析模式
分片查看数据
只显示前 N 条记录

技巧 3：快捷键

快捷键	功能
`Ctrl + F`	查找
`Ctrl + H`	替换
`Ctrl + Z`	撤销
`Ctrl + Shift + F`	格式化
`Ctrl + Shift + C`	压缩

实际应用场景

场景 1：API 开发调试

// 接口返回的压缩 JSON
{"code":200,"data":{"user":{"id":1,"name":"张三"}},"msg":"success"}

使用格式化工具美化后，快速查看数据结构。

场景 2：配置文件编辑

编辑 package.json、tsconfig.json 等配置文件时：

粘贴配置内容
格式化查看
修改后验证语法
压缩复制回去

场景 3：数据转换

将后端返回的 JSON 转换为前端需要的格式：

// 原始数据
const apiData = {
  user_name: "张三",
  user_age: 25
};

// 转换为驼峰命名
const formatted = {
  userName: apiData.user_name,
  userAge: apiData.user_age
};

常见问题

Q: 支持多大的 JSON 文件？

普通模式：建议 10MB 以内
流式模式：支持 100MB+ 的大文件
超大文件建议分批处理

Q: JSON 中的中文显示乱码？

A: 确保：

文件编码为 UTF-8
浏览器编码设置为 UTF-8
使用工具提供的「Unicode 转中文」功能

Q: 如何保存格式化后的 JSON？

A: 点击「下载」按钮，或：

Ctrl + A 全选
Ctrl + C 复制
粘贴到编辑器保存

Q: 支持 JSON5 吗？

A: 支持！JSON5 特性包括：

单行/多行注释
未加引号的键名
单引号字符串
尾随逗号