インデントJSONstringifyの出力

既にJSON.stringifyをすでに使用しているかもしれません.JavaScriptのオブジェクトをすばやくログに記録する方法はほとんどありません.
しかし、出力のインデントをカスタマイズして制御することができますか?

慣用
通常はJSON.stringifyを使うことができます.

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

console.log(JSON.stringify(obj));
// prints => {"propertyOne":1,"propertyTwo":"2","propertyThree":{"nestedPropertyOne":1.123}}

それは完全にうまく動作しますが、オブジェクトが大きいほど、出力を読みにくくなります.大きなオブジェクトを再び読みやすくするために何かをする必要があります.

JSONStringifyの構文JSON.stringifyが実際に提供するものを見てみましょう.

構文JSON.stringify(value[, replacer[, space]])
パラメータ

値
これはJSON文字列に変換する値です.あなたは、常にこれを必要とします.

代用品
シリアル化の動作を変更する関数または配列の配列.これは興味深いパラメータであるようですが、現在の問題を解決することはできません.

スペース
文字列か数値.
数値の場合、インデントのために追加する空白の量を定義します( max 10 ).
文字列の場合、出力をインデントするのに10文字まで含めることができます.
これは、これらの大きなオブジェクトを再び読みやすくするためのパラメータです.

スペースパラメータの使用
このように2つの空白をインデントできます:

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

// Using 2 is basically the same as using “  “.
console.log(JSON.stringify(obj, null, 2));
// prints =>
// {
//   "propertyOne": 1,
//   "propertyTwo": "2",
//   "propertyThree": {
//     "nestedPropertyOne": 1.123
//   }
// } 

タブをもっと気に入ったなら、以下のように簡単にできます.

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

console.log(JSON.stringify(obj, null, “\t”));
// prints =>
// {
//  "propertyOne": 1,
//  "propertyTwo": "2",
//  "propertyThree": {
//      "nestedPropertyOne": 1.123
//  }
// } 

任意の文字や文字の組み合わせをspace引数として渡すことができます.

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

console.log(JSON.stringify(obj, null, “....”));
// prints =>
// {
// ...."propertyOne": 1,
// ...."propertyTwo": "2",
// ...."propertyThree": {
// ........"nestedPropertyOne": 1.123
// ....}
// } 

とEmojis :

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

console.log(JSON.stringify(obj, null, “⏩”));
// prints =>
// {
//  ⏩"propertyOne": 1,
//  ⏩"propertyTwo": "2",
//  ⏩"propertyThree": {
//  ⏩⏩"nestedPropertyOne": 1.123
//  ⏩}
// } 

ルックスすごいですね.それはかなり簡単で、まっすぐ進む、とすぐに読みやすい方法で出力をフォーマットすることができます.しかし、これ(そして特にEmojisを使用する)がデバッグのためにより多くのものであることを覚えておいてください、そして、あなたがリモートインターフェース(残り/Graphql APIのように、それがサーバーかクライアントであるように)でするべきでない何かではありません.

去る前に
あなたが私のコンテンツが好きならば、私を訪ねてください、そして、おそらく、あなたはあなたが見るものが好きです!