如何在 JavaScript 中漂亮列印 JSON？

使用 JavaScript 漂亮列印 JSON

將 JSON 資料轉換為人類可讀的格式對於調試和理解其結構至關重要。在 JavaScript 中，透過 JSON.stringify() 方法原生支援「漂亮列印」JSON。

原生漂亮列印

JSON.stringify() 函數接受三個參數：要轉換的JSON 物件、替換函數（可選）和間距等級（可選）。若要指定間距，請傳遞正整數作為第三個參數。例如：

var obj = { foo: 'bar', baz: [1, 2, 3] };
var json = JSON.stringify(obj, null, 2);

這將產生：

"{
  "foo": "bar",
  "baz": [
    1,
    2,
    3
  ]
}"

語法突出顯示

為了獲得更清晰的視覺效果，您可以使用正規表示式將語法突出顯示應用於JSON 字串。例如：

function syntaxHighlight(json) {
  // Escape HTML characters
  json = json.replace(/&/g, '&amp;').replace(/</g, '<').replace(/>/g, '>');
  
  // Highlight different types using span tags
  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';
    if (/^"/.test(match)) {
      if (/:$/.test(match)) cls = 'key';
      else cls = 'string';
    } else if (/true|false/.test(match)) cls = 'boolean';
    else if (/null/.test(match)) cls = 'null';
    return `<span class="${cls}">${match}</span>`;
  });
}

此函數會將關鍵元素替換為不同的顏色和樣式，使 JSON 結構更具可讀性。

範例

這是一個結合了本機漂亮印刷和語法突出顯示的範例：

// Pretty-print the JSON object
var json = JSON.stringify(obj, null, 2);

// Highlight the JSON string
var highlighted = syntaxHighlight(json);

// Display the highlighted JSON string in the browser console
console.log(highlighted);

以上是如何在 JavaScript 中漂亮列印 JSON？的詳細內容。更多資訊請關注PHP中文網其他相關文章！