如何使用 javascript 漂亮地打印 json?
front end technologyjavascriptobject oriented programming
Java Script 对象表示法是用于在不同应用程序中存储数据的众多标准格式之一。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"，如果是，则将值转换为大写，否则直接返回原值。
结论
Java Script 对象表示法 (JSON) 格式用于许多应用程序。从 Javascript 中，我们也可以返回 JSON 对象。在本文中，我们看到了以漂亮格式返回 JSON 对象的不同示例。无需使用任何第三方库，我们可以使用 JSON 库中的 stringify() 方法。这需要三种类型的参数。第一个是 javascript 对象。第二个是数组或函数，在处理每个键值对后调用。第三个参数是空格计数，它将在每个缩进级别打印空格，以漂亮的格式显示结果。
