$lang['tuto'] = "tutorials"; ?>$lang['tuto'] = "tutorials"; ?> Format JSON per a la llegibilitat humana en JavaScript

Format JSON per a la llegibilitat humana en JavaScript

Noah Rousseau
Dijous, 27 de juny de 2024 a les 20:33:22
JavaScript

Fent que JSON sigui més llegible per als humans

Treballar amb JSON és una tasca habitual per als desenvolupadors, especialment quan es tracten amb API i emmagatzematge de dades. Tanmateix, el JSON en brut pot ser difícil de llegir i entendre a causa de la seva manca de format. Per a aquells que busquen fer JSON més accessible, és crucial aplicar el sagnat i els espais en blanc adequats.

En aquest article, explorarem diversos mètodes per imprimir JSON molt bé mitjançant JavaScript. Cobrirem no només les tècniques bàsiques de sagnat i espais en blanc, sinó també com millorar la llegibilitat amb colors i estils de lletra. Aquesta guia us ajudarà a transformar JSON en brut en un format amigable per a les persones.

Comandament Descripció
JSON.stringify(json, null, 2) Converteix un objecte JavaScript en una cadena JSON amb sagnat de 2 espais.
.replace(/(".*?"|null|true|false|\d+)/g, ...) Utilitza una expressió regular per identificar elements JSON específics per al format personalitzat.
http.createServer(...).listen() Crea un servidor HTTP a Node.js que escolta en un port especificat.
res.writeHead(200, { 'Content-Type': 'application/json' }) Estableix la capçalera de resposta HTTP per indicar que el tipus de contingut és JSON.
res.end() Torna la resposta al client i indica que s'han enviat totes les capçaleres i el cos de la resposta.
document.body.innerHTML Estableix o obté el contingut HTML de l'element del cos del document.

Explicació detallada dels scripts de format JSON

El primer script és una solució de JavaScript d'interfície dissenyada per imprimir JSON molt bé afegint sagnat i aplicant codificació de colors. L'script comença amb una funció anomenada , que pren un objecte JSON com a entrada. Dins d'aquesta funció, l'objecte JSON es converteix en una cadena amb sagnat de 2 espais mitjançant l' mètode. Això garanteix que el JSON sigui més llegible afegint l'espai en blanc necessari. Per millorar encara més la llegibilitat, l'script utilitza a mètode amb una expressió regular per fer coincidir elements JSON específics com cadenes, números, booleans i valors nuls. Cada element coincident s'embolica en a etiqueta amb una classe corresponent, que permet a CSS aplicar diferents colors a cada tipus de dades. A continuació, la cadena JSON amb format s'insereix al cos del document mitjançant .

El segon script és una solució de fons que utilitza Node.js per imprimir JSON molt bé. Aquest script crea un servidor HTTP amb , que escolta les sol·licituds entrants en un port especificat utilitzant . En rebre una sol·licitud, el servidor respon amb un objecte JSON format per a la seva llegibilitat. L'objecte JSON es converteix en una cadena amb sagnat utilitzant . La capçalera de resposta s'estableix per indicar que el tipus de contingut és JSON amb res.writeHead(200, { 'Content-Type': 'application/json' }). Finalment, la cadena JSON ben impresa s'envia al client mitjançant . Aquest script permet als desenvolupadors veure ràpidament la sortida JSON amb un bon format al seu navegador simplement navegant a l'adreça del servidor.

Utilitzant JavaScript per formatar JSON per a una millor llegibilitat

JavaScript frontal

// Function to pretty-print JSON with indentation and colors
function prettyPrintJSON(json) {
  // Convert JSON object to string with 2-space indentation
  const jsonString = JSON.stringify(json, null, 2);
  // Replace specific characters for color coding
  return jsonString.replace(/(".*?"|null|true|false|\d+)/g, match => {
    let cls = "number";
    if (/^".*"$/.test(match)) {
      cls = "string";
    } else if (/true|false/.test(match)) {
      cls = "boolean";
    } else if (/null/.test(match)) {
      cls = "null";
    }
    return `<span class="${cls}">${match}</span>`;
  });
}
// JSON data
const jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York",
  "isStudent": false
};
// Display formatted JSON
document.body.innerHTML = `<pre>${prettyPrintJSON(jsonData)}</pre>`;

Enfocament de backend a Pretty-Print JSON

Backend amb Node.js

const http = require('http');
const url = require('url');
// Function to pretty-print JSON
function prettyPrintJSON(json) {
  return JSON.stringify(json, null, 2);
}
// Create HTTP server
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  // Sample JSON data
  const jsonData = {
    name: "John",
    age: 30,
    city: "New York",
    isStudent: false
  };
  // Send pretty-printed JSON
  res.end(prettyPrintJSON(jsonData));
}).listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

Millora de la llegibilitat JSON amb eines addicionals

Tot i que les solucions anteriors es van centrar en els mètodes JavaScript d'interfície i backend per imprimir JSON molt bé, hi ha altres eines i tècniques que poden millorar encara més la llegibilitat de JSON. Un enfocament popular és utilitzar extensions del navegador o eines en línia. Extensions com JSONView o JSON Formatter poden formatar automàticament JSON al navegador, afegint sagnat i codificació de colors per millorar la llegibilitat. Aquestes eines són especialment útils per als desenvolupadors que interactuen sovint amb les API i necessiten analitzar i entendre ràpidament les dades JSON sense escriure codi addicional.

Un altre mètode útil consisteix a aprofitar biblioteques com Highlight.js o Prism.js, que estan dissenyades per gestionar el ressaltat sintaxi per a diversos llenguatges de programació, inclòs JSON. Aquestes biblioteques es poden integrar a aplicacions web per formatar i ressaltar les dades JSON de forma dinàmica. Mitjançant l'ús de , podeu aplicar temes predefinits a cadenes JSON, facilitant la diferenciació entre diferents tipus de dades. A més, integrar aquestes biblioteques al vostre flux de treball de desenvolupament pot estalviar temps i garantir la coherència en el format JSON en diferents projectes.

  1. Què és el JSON d'impressió bonica?
  2. JSON d'impressió bastant es refereix a donar format a les dades JSON amb sagnat i espais en blanc per fer-los més llegibles per als humans.
  3. Per què és important el format JSON?
  4. El format JSON adequat millora la llegibilitat i ajuda els desenvolupadors a comprendre ràpidament l'estructura i el contingut de les dades.
  5. Que es el mètode?
  6. El El mètode converteix un objecte JavaScript en una cadena JSON.
  7. Com ajuda en la impressió bonica?
  8. De pas un tercer argument (nivell de sagnat), podeu formatar la cadena JSON amb sagnat.
  9. Què és Highlight.js?
  10. Highlight.js és una biblioteca per ressaltar la sintaxi que es pot utilitzar per formatar i ressaltar dades JSON.
  11. Puc utilitzar extensions del navegador per formatar JSON?
  12. Sí, extensions com JSONView o JSON Formatter poden formatar JSON automàticament al vostre navegador.
  13. Quina és la finalitat del mètode en format JSON?
  14. El El mètode amb una expressió regular es pot utilitzar per afegir codificació de colors a diferents elements JSON.
  15. Quin és un cas d'ús comú per a JSON d'impressió bonica?
  16. El JSON d'impressió bastant s'utilitza habitualment quan es depuren o quan es presenten dades JSON a parts interessades no tècniques.
  17. Com puc imprimir força JSON a Node.js?
  18. Podeu crear un servidor HTTP a Node.js i utilitzar-lo per formatar les respostes JSON.

La impressió JSON és essencial per millorar la llegibilitat i la usabilitat de les dades. Mitjançant JavaScript, els desenvolupadors poden aplicar sagnat, espais en blanc i codificació de colors per fer que JSON sigui més amigable amb les persones. A més, aprofitar les extensions del navegador i les biblioteques de ressaltat sintaxi pot millorar encara més el format. Aquestes tècniques col·lectivament ajuden a una millor depuració i presentació de dades JSON, garantint claredat i eficiència en el maneig de dades.