Bagaimana untuk Mencetak JSON dengan Cantik dalam JavaScript?

Pretty-Print JSON Menggunakan JavaScript

Menukar data JSON kepada format yang boleh dibaca manusia adalah penting untuk menyahpepijat dan memahami strukturnya. Dalam JavaScript, "pretty-printing" JSON disokong secara asli melalui kaedah JSON.stringify().

Native Pretty-Printing

Fungsi JSON.stringify() mengambil tiga argumen: objek JSON untuk ditukar, fungsi pengganti (pilihan), dan tahap jarak (pilihan). Untuk menentukan jarak, hantarkan integer positif sebagai hujah ketiga. Contohnya:

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

Ini akan menghasilkan:

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

Penyertaan Sintaks

Untuk lebih jelas visual, anda boleh menggunakan ungkapan biasa untuk gunakan penonjolan sintaks pada rentetan JSON. Contohnya:

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>`;
  });
}

Fungsi ini akan menggantikan elemen utama dengan warna dan gaya yang berbeza untuk menjadikan struktur JSON lebih mudah dibaca.

Contoh

Berikut ialah contoh yang menggabungkan pencetakan cantik asli dan penyerlahan sintaks:

// 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);

Atas ialah kandungan terperinci Bagaimana untuk Mencetak JSON dengan Cantik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!