【JSリファレンス】JSON.stringify()

更新日：2024/06/14

JSON.stringify()は、JSONオブジェクトのメソッドです。
主に配列またはオブジェクトをJSON形式の文字列に変換します。

■構文

JSON.stringify ( value [ , replacer [ , space ] ] )

■変換対象のデータについて

• オブジェクトは直接所持するプロパティが変換対象です。
  ※Enumerable属性がfalseのものを除きます。属性についてはObject.defineProperty()を参照してください。

  入れ子になったオブジェクトおよび配列は再帰的に処理されます。

  const obj = {
    a:100,b:200,
    obj2:{ 
      c:300,
      obj3:{
        d:400,
      }
    },
  }
  const json = JSON.stringify(obj);
  console.log( json );
   // {"a":100,"b":200,"obj2":{"c":300,"obj3":{"d":400}}}
  

• 配列(Arrayオブジェクト)は数値インデックスのみ変換対象です。
  欠番インデックスは null値で、変換されます。
  入れ子になった配列およびオブジェクトは再帰的に処理されます。

  const array = [1,,3,[4,5],{a:100}];
  array.addProp = 100;

  const json = JSON.stringify(array);
  console.log( json );
  // [ 1, null, 3, [ 4, 5 ], { a: 100 } ] ← addProp が欠落

• 関数、シンボル、undefined は変換されません。
  配列要素の場合、null値になります。
  const obj = {
    a:100,b:undefined,c:Symbol(),
    func:()=>{},
    array:[1,undefined,Symbol(),()=>{}]
  };
  const json = JSON.stringify(obj);
  console.log( json );
    // {"a":100,"array":[1,null,null,null]}
  

• 有限でない数値( NaN および Infinity )は null値に変換されます。
  const obj = {
    a:100,b:NaN,c:Infinity
  };
  const json = JSON.stringify(obj);
  console.log( json );
    // {"a":100,"b":null,"c":null}
  

• オブジェクトにtoJSON()メソッドが定義されている場合、その結果がJSON文字列に出力されます。
  ※プロパティは無視されます。
  const obj = {
    a:100,b:200,
    toJSON:()=>[300,400]
  };
  const json = JSON.stringify(obj);
  console.log( json );
    // [ 300, 400 ]
  

• Dateオブジェクトは、日付を文字列で返すtoJSON()メソッドが定義されているため、JSONには日付文字列が出力されます。
  しかしその日付文字列をJSON.parse()で変換すると、Dateオブジェクトに戻らずに文字列になります。
  const obj = {
    a: new Date(2024,10,10,10,10,10,111)
  };
  const json = JSON.stringify(obj);
  console.log( json );
    // {"a":"2024-11-10T01:10:10.111Z"}
  
  const obj2 = JSON.parse(json);
  
  console.log( obj2.a ); // 2024-11-10T01:10:10.111Z
  console.log( typeof obj2.a  ); // string
  

  参考ページ
  ●【JavaScript】JSON変換したDateオブジェクトを複合する方法
• BigInt型は、TypeErrorです。
  参考ページ
  ●【JavaScript】JSONでBigInt型を無理やり扱う方法
• 変換対象はプリミティブ値でもOKです。
  const json = JSON.stringify( 100 );
  
  console.log( json ); // 100
  

■replacerについて

• replacerが配列の場合、要素を変換対象のプロパティ名として扱います。
  const obj = {
    a:100,b:200,c:300
  };
  const json = JSON.stringify(obj,["a","c"]);
  console.log( json );
    // {"a":100,"c":300}
  

  下層のオブジェクト内も検索対象とする場合、下層オブジェクトの名前が配列に含まれている必要があります。

  const obj = {
    obj1:{ a:400 },
    obj2:{ a:400 },
  };
  const json = JSON.stringify(obj,["a","obj2"]);
  console.log( json );
    // {{"obj2":{"a":400}}
  

• replacerが関数の場合、関数を使って他の値に置き換えます。

  関数は、キーと値を受け取ります。
  初回のキーは空文字("")で、値はJSON.stringify()の第一引数です。

  置き換えの必要が無い場合は、値をそのまま返します。
  値を変更すると、その値でJSONが生成されます。

  const obj = {
    a:100,b:100
  };
  const json = JSON.stringify(obj,(key,value)=>{
      if( typeof value === "number" ) 
                  return "No." + value; 
      return value;
    });
  console.log( json );
    // {{"obj2":{"a":400}}
  

  オブジェクトまたは配列を返すと、それを元に再帰的に処理されます。

  const obj = {
    a:100,b:100
  };
  const json = JSON.stringify(obj,(key,value)=>{
      if( key === "" ) return [1,2,3]; 
      return value;
    });
  console.log( json );
    // [1,2,3]
  

■spaceについて

各要素のインデントを、数値または文字列を指定します。

数値は、10より大きい時は、10に丸められます。
その後、数値個のスペースで構成される文字列が用意されます。
文字列は10文字より大きい部分が切り捨てられます。

各要素の出力前に、改行文字と用意した文字列が出力されます。

const obj = {
  a:100,b:100
};
const json = JSON.stringify(obj,undefined,4);
console.log( json );
  // {
  //     "a": 100,
  //     "b": 100
  // }

階層を持つ場合は、インデントが積み上げられます。

const obj = {
  a:100,b:100,
  c:{d:1,e:2}
};
const json = JSON.stringify(obj,undefined,4);
console.log( json );
  // {
  //     "a": 100,
  //     "b": 100,
  //     "c": {
  //         "d": 1,
  //         "e": 2
  //     }
  // }

関連ページ

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://jsref.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。