Comment joliment imprimer du JSON en JavaScript ?

Pretty-Print JSON à l'aide de JavaScript

La conversion des données JSON dans un format lisible par l'homme est cruciale pour le débogage et la compréhension de sa structure. En JavaScript, le JSON « pretty-printing » est supporté nativement via la méthode JSON.stringify().

Native Pretty-Printing

La fonction JSON.stringify() prend trois arguments : l'objet JSON à convertir, une fonction de remplacement (facultatif) et le niveau d'espacement (facultatif). Pour spécifier l'espacement, transmettez un entier positif comme troisième argument. Par exemple :

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

Cela produira :

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

Mise en surbrillance de la syntaxe

Pour plus de clarté visuelle, vous pouvez utiliser des expressions régulières pour appliquer la coloration syntaxique à la chaîne JSON. Par exemple :

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

Cette fonction remplacera les éléments clés par des couleurs et des styles différents pour rendre la structure JSON plus lisible.

Exemple

Voici un exemple qui combine une jolie impression native et une coloration syntaxique :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!