📅 最后修改于: 2023-12-03 15:24:13.254000 🧑 作者: Mango
在开发过程中，我们经常需要输出 JSON 字符串，但是原始的 JSON 串可能很难阅读。那么，我们如何在 JavaScript 中漂亮地打印 JSON 字符串呢？本文将介绍两种方法：一种是使用 JSON.stringify() 方法的扩展参数，另一种是使用第三方库 - highlight.js。
JSON.stringify() 方法是将 JavaScript 对象转换成 JSON 字符串的方法，其有两个参数：第一个参数是要转换的对象，第二个参数是转换选项。
针对我们的问题，我们使用扩展参数来打印漂亮的 JSON 字符串。
以下是代码片段：
const obj = {
name: "xiaoming",
age: 18,
hobbies: ["basketball", "reading"],
};
const prettyJson = JSON.stringify(obj, null, 2);
console.log(prettyJson);
上述代码将使用 2 个空格来格式化输出 JSON 字符串。输出的结果如下所示：
{
"name": "xiaoming",
"age": 18,
"hobbies": [
"basketball",
"reading"
]
}
这样输出的 JSON 字符串相对于原始的 JSON 字符串来说更加易读。
highlight.js 是一个流行的语法高亮库，支持超过 180 种语言的代码高亮。我们可以利用它来将 JSON 字符串进行语法高亮。
以下是使用 highlight.js 进行语法高亮的代码片段：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css" />
</head>
<body>
<pre><code class="json"></code></pre>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>
const jsonStr = '{"name": "xiaoming", "age": 18, "hobbies": ["basketball", "reading"]}';
document.querySelector("code").textContent = jsonStr;
hljs.highlightAll();
</script>
</body>
</html>
上述代码会在页面中展示一个语法高亮的 JSON 字符串。
我们需要引入 highlight.js 的样式文件和 JS 文件。然后，创建一个包含 JSON 字符串的 pre 和 code 元素，并为该 code 元素设置 json 类型。
最后，使用 hljs.highlightAll() 方法来处理页面中所有的代码块，使其高亮显示。
总结：
以上两种方法都可以使 JSON 字符串读起来更加方便和易读。
使用扩展参数的方法更加简单，适用于控制台等场景。
而使用 highlight.js 的方法则更适用于页面显示。