使用JSON 資料時,通常希望以一種視覺上吸引人的方式顯示它,以吸引人的方式顯示它提高人類可讀性。 JavaScript 透過 JSON.stringify() 方法提供了一個解決方案。
預設情況下,JSON.stringify() 會產生一個緊湊的字串JSON 物件的表示形式。但是,您可以透過提供指定間距等級的第三個參數來啟用漂亮列印。
var str = JSON.stringify(obj, null, 2); // spacing level = 2
這會產生帶有縮排和空格的 JSON 字串,使其更易於閱讀和理解。
如果您需要其他視覺增強功能,例如語法突出顯示,您可以使用正規表示式魔法來實現this:
function syntaxHighlight(json) { // Replace special characters for HTML safety json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); // Add HTML spans with appropriate classes for styling return json.replace(/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { var cls = 'number'; // Default class for numbers if (/^"/.test(match)) { // String if (/:$/.test(match)) { // Key cls = 'key'; } else { // String value cls = 'string'; } } else if (/true|false/.test(match)) { // Boolean cls = 'boolean'; } else if (/null/.test(match)) { // Null cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); }
這是一個完整的範例,示範了漂亮的列印和語法突出顯示:
// Sample JSON object var obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] }; // Pretty-print the JSON using `JSON.stringify()` var str = JSON.stringify(obj, undefined, 4); output(str); // Syntax highlight the pretty-printed JSON output(syntaxHighlight(str)); // Function to append output to the page function output(inp) { document.body.appendChild(document.createElement('pre')).innerHTML = inp; }
此程式碼產生一個視覺上吸引人的表示JSON對象,使人類更容易閱讀和理解。
以上是如何在 JavaScript 中漂亮地列印 JSON,以獲得更好的可讀性和視覺吸引力?的詳細內容。更多資訊請關注PHP中文網其他相關文章!