ES5入門 - JSON編

ES5入門 - Array編

本エントリーは「to-R JavaScript Advent Calendar 2015」10日目のエントリー、ES5のJSON周りの機能について解説します。

前回は配列まわりの解説をしましたが、今回はES5で追加されたJSON周りの機能について解説します。

ES5ではJSON.parse()とJSON.stringify()が新たに追加されました。

JSON.parse()

JSON.parse()は引数で与えられたオブジェクトや文字列をJSON形式に変換します。

以下のように引数にJSON文字列を与えることで、それをJSON形式のオブジェクトに変換します。

var result = JSON.parse('{"bar":"foo"}');
console.log(result); // Object {bar: "foo"}

引数には厳密なJSON形式を指定しなくてはいけないので注意が必要です。

以下のようにbarがダブルクオーテーションで囲まれていない場合はエラーになってしまいます。

var result = JSON.parse('{bar:"foo"}');
console.log(result); // Uncaught SyntaxError:

JSON.stringify()

JSON.stringify()はJSON形式やObject形式のオブジェクトをJSON文字列に変換するためのメソッドです。

以下のように指定すると文字列に変換されます。

var result = JSON.stringify({bar: "foo"});
console.log(result);//"{"bar":"foo"}"

JSON.parse()と違い引数に指定するのは厳密なJSON形式ではなくObject形式で問題ありません。上のサンプルではbarがダブルクオーテーションで囲まれていないためJSON形式としては不適切ですが、ちゃんとダブルクオーテーションで包まれたJSON文字列が出力されます。

いつ使うの？

APIとのやりとりにフォーマットが決まっている場合に利用されるケースが多いです。

また、cookiなどにデータフォーマットを格納しておきたいケースではJSON.stringify()で文字列に変換して格納しておき、取り出してからJSON.parse()で変換してから利用するなどが可能です。

次回はObject.create()について解説します。

スポンサードリンク

«ES5入門 - Array編 | メイン | ES5入門 - Object.create()編»