数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 美化打印 JSON？
JavaScript 对象表示法 (JSON) 是许多标准格式之一，用于在许多不同的应用程序中存储数据。JavaScript 对象也可以以这种 JSON 格式存储在文件中。在本文中，我们将介绍几种以美观方式打印 JSON 对象的方法。让我们以一个例子来看一下。我们在 JavaScript 中创建了一个对象：
示例（创建 JavaScript 对象）
var vehicle = { id : 'v01', type : 'bus', length: 6 }
现在让我们将其打印到控制台，看看它是否以美观的形式显示。
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { var vehicle = { id: 'v01', type: 'bus', length: 6 } content += 'The vehicle object: ' + JSON.stringify(vehicle) + "<br>"; } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
它直接显示了输出，对于简单的示例，它很容易阅读。但是对于较大的嵌套对象，可读性会降低。让我们看看一个包含一些嵌套的较大的 JSON 对象。
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { var book = { "b_id": "b_001", "author": { "lastname": "Paul", "firstname": "Alice" }, "editor": { "lastname": "Smith", "firstname": "Bob" }, "title": "A sample book for JSON", "category": ["Javascript", "JSON", "Data Formatting"] } content += 'The book object: ' + JSON.stringify(book) + "<br>"; } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
现在我们可以看到输出没有以可读的格式显示。我们可以通过 JavaScript JSON 对象附带的 stringify() 函数使其可读。让我们看看示例以检查输出的差异：
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { var vehicle = { id: 'v01', type: 'bus', length: 6 } var book = { "b_id": "b_001", "author": { "lastname": "Paul", "firstname": "Alice" }, "editor": { "lastname": "Smith", "firstname": "Bob" }, "title": "A sample book for JSON", "category": ["Javascript", "JSON", "Data Formatting"] } content += 'The vehicle object: ' + JSON.stringify(vehicle) +"<br>"; content += 'The book object: ' + JSON.stringify(book) + "<br>"; } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
此输出不如之前可读。那么，为什么我们要使用它来打印带有 stringify() 的 JSON 字符串呢？好吧，我们可以通过向 stringify() 函数添加一些参数来改进打印模式。第一个也是最重要的参数是 JSON 对象。第二个参数是 replacer。此可选参数采用函数或数组来转换结果。此项将在每个项目之后调用。在我们的示例中，我们没有使用它，而是向其中传递了 null。最后一个参数是空格计数，它有助于以美观格式打印 JSON 问题。对于不同的级别，它将添加给定数量的空格以保持缩进。让我们看看此示例的输出：
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <pre id="output"> </pre> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { var vehicle = { id: 'v01', type: 'bus', length: 6 } var book = { "b_id": "b_001", "author": { "lastname": "Paul", "firstname": "Alice" }, "editor": { "lastname": "Smith", "firstname": "Bob" }, "title": "A sample book for JSON", "category": ["Javascript", "JSON", "Data Formatting"] } content += 'The vehicle object: <br>' + JSON.stringify(vehicle, null, 4) + "<br>"; content += 'The book object: <br>' + JSON.stringify(book, null, 4) + "<br>"; } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
现在它正在工作并以美观格式显示对象。我们可以更改参数以获得更好和更合适的结果。让我们通过将 replacer 参数（第二个参数）传递给 stringify 函数以根据函数替换给定值来查看另一个示例。
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <pre id="output"> </pre> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { function makeNameUppercase(key, value) { if (key == "firstname" || key == "lastname") { return value.toUpperCase(); } else { return value; } } var book = { "b_id": "b_001", "author": { "lastname": "Paul", "firstname": "Alice" }, "editor": { "lastname": "Smith", "firstname": "Bob" }, "title": "A sample book for JSON", "category": ["Javascript", "JSON", "Data Formatting"] } content += 'The book object: <br>' + JSON.stringify(book,makeNameUppercase, 4) + "<br>"; } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
在此示例中，我们定义了一个函数，该函数将检查给定的键是否为“firstname”或“lastname”，如果是，则将其值转换为大写，否则将其值原样返回。
结论
JavaScript 对象表示法 (JSON) 格式用于许多应用程序。我们还可以从 Javascript 返回 JSON 对象。在本文中，我们看到了以美观格式返回 JSON 对象的不同示例。无需使用任何第三方库，我们可以使用 JSON 库中提供的 stringify() 方法。它采用三种类型的参数。第一个是 JavaScript 对象。第二个是数组或函数，它在处理每个键值对后被调用。第三个参数是空格计数，它将在每个缩进级别打印空格，以便以美观格式显示结果。
更新于: 2022年8月23日
855 次浏览
广告