JSON是什么
你可能听过JSON这个词，但不确定它是啥。简单说，JSON就是一种数据格式，用来在不同系统之间传递信息。就像快递用纸箱打包东西一样，JSON用特定的格式把数据"打包"。
比如一个用户的信息用JSON表示：
{"name":"小明","age":25,"city":"北京"}
但当数据很多很复杂的时候，挤在一行里完全看不懂。所以我们需要一个格式化工具，把它变成这样：
{
"name": "小明",
"age": 25,
"city": "北京"
}
是不是清楚多了？
我们要做的工具
一个网页，左边粘贴原始JSON，右边显示格式化后的漂亮JSON。还能检查JSON有没有语法错误。
第一步：创建页面
JSON 格式化工具
第二步：实现格式化功能
在body结束标签前加script：
function formatJSON() {
var input = document.getElementById("input").value;
var output = document.getElementById("output");
try {
var parsed = JSON.parse(input);
output.textContent = JSON.stringify(parsed, null, 4);
output.className = "output";
} catch (e) {
output.textContent = "JSON格式错误：" + e.message;
output.className = "output error";
}
}
核心就两行代码：JSON.parse 把字符串变成数据对象，JSON.stringify 再变回字符串，第三个参数 4 表示用4个空格缩进。try-catch就像安全网，如果JSON格式有问题，不会让整个程序崩溃，而是显示错误提示。
第三步：实现压缩功能
function compressJSON() {
var input = document.getElementById("input").value;
var output = document.getElementById("output");
try {
var parsed = JSON.parse(input);
output.textContent = JSON.stringify(parsed);
output.className = "output";
} catch (e) {
output.textContent = "JSON格式错误：" + e.message;
output.className = "output error";
}
}
压缩就是不加缩进，把所有内容挤在一行里。这在传输数据的时候有用，文件更小。
第四步：复制和清空功能
function copyResult() {
var text = document.getElementById("output").textContent;
navigator.clipboard.writeText(text);
}
function clearAll() {
document.getElementById("input").value = "";
document.getElementById("output").textContent =
"格式化结果将显示在这里";
}
可以继续加的功能
这个工具对程序员来说非常实用，几乎每天都会用到。而且整个项目不到100行代码，是一个很好的练手项目。