資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
廣告