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



还没有评论,来说两句吧...