JavaScript で人間が読みやすいように JSON をフォーマットする

JavaScript を使用して JSON をフォーマットして読みやすくする

フロントエンドJavaScript

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

Pretty-Print JSON へのバックエンド アプローチ

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

JSON 形式に関するよくある質問

1. きれいに印刷できる JSON とは何ですか?
2. JSON の整形とは、人間が読みやすいようにインデントと空白を使用して JSON データをフォーマットすることを指します。
3. JSON 形式が重要なのはなぜですか?
4. 適切な JSON 形式により可読性が向上し、開発者がデータの構造と内容を迅速に理解できるようになります。
5. とは何ですか JSON.stringify 方法？
6. の JSON.stringify メソッドは、JavaScript オブジェクトを JSON 文字列に変換します。
7. どうやって JSON.stringify きれいな印刷に役立ちますか？
8. 通りすがりに JSON.stringify 3 番目の引数 (インデント レベル) を使用すると、JSON 文字列をインデントでフォーマットできます。
9. ハイライト.jsとは何ですか?
10. Highlight.js は、JSON データの書式設定と強調表示に使用できる構文強調表示用のライブラリです。
11. ブラウザ拡張機能を使用して JSON をフォーマットできますか?
12. はい、JSONView や JSON Formatter などの拡張機能を使用すると、ブラウザーで JSON を自動的にフォーマットできます。
13. の目的は何ですか replace JSON形式のメソッド?
14. の replace 正規表現を使用したメソッドを使用して、さまざまな JSON 要素にカラーコーディングを追加できます。
15. JSON をきれいに印刷する一般的な使用例は何ですか?
16. JSON の整形は、デバッグ時や技術者以外の関係者に JSON データを提示するときによく使用されます。
17. Node.js で JSON をきれいに印刷するにはどうすればよいですか?
18. Node.js で HTTP サーバーを作成し、使用できます。 JSON.stringify JSON 応答をフォーマットします。

JSON フォーマットに関する最終的な考え

JSON をきれいに印刷することは、データの読みやすさと使いやすさを向上させるために不可欠です。 JavaScript を使用すると、開発者はインデント、空白、カラーコーディングを適用して、JSON をより人間に優しいものにすることができます。さらに、ブラウザ拡張機能と構文強調表示ライブラリを利用すると、書式設定をさらに強化できます。これらの手法を組み合わせると、JSON データのデバッグと表示が向上し、データ処理の明確さと効率が確保されます。