JSON.parse()【JSON テキスト ⇒ JavaScript 値】
JSON.stringify()【JavaScript 値 ⇒ JSON テキスト】

JSON.parse()【JSON テキスト ⇒ JavaScript 値】

メモ

構文

JSON.parse( text[, reviver] )

戻り値JavaScript 値
textJSON テキスト
reviver復元関数 (詳細は下記参照)
例外SyntaxError例外 (無効な JSON テキスト)
復元関数 引数名 (例)説明
keyキー
value
戻り値型説明
任意復元後の値
undefined連想配列等の要素の場合、要素削除
呼び出し不可説明
(例外発生なし)元の値

let obj = JSON.parse("null");
console.log(obj, typeof obj);
// 出力:null object

obj = JSON.parse("true");
console.log(obj, typeof obj);
// 出力:true boolean
obj = JSON.parse("false");
console.log(obj, typeof obj);
// 出力:false boolean

obj = JSON.parse('"STRING"');
console.log(obj, typeof obj);
// 出力:STRING string

obj = JSON.parse("123");
console.log(obj, typeof obj);
// 出力:123 number
obj = JSON.parse("123.456");
console.log(obj, typeof obj);
// 出力:123.456 number

obj = JSON.parse("[ 1, 2, 3 ]");
console.log(obj, Array.isArray(obj));
// 出力:Array(3) [1, 2, 3] true

obj = JSON.parse('{ "x":10, "y":20, "z":30 }');
console.log(obj, typeof obj);
// 出力:Object {x: 10, y: 20, z: 30} object

const date = new Date(2001, (2 - 1), 3, 4, 5, 6, 78);
const json = JSON.stringify(date);
console.log("[", json, "]");
// 出力:[ "2001-02-02T19:05:06.078Z" ]
obj = JSON.parse(json);
console.log("[", obj, "]", typeof obj);
// 出力:[ 2001-02-02T19:05:06.078Z ] string
const date2 = new Date(obj);
console.log(date2);
// 出力:Date Sat Feb 03 2001 04:05:06 GMT+0900 (日本標準時)
// 復元関数指定
function reviver(key, value) {
  if (value < 100) {
    return undefined; // 値が100未満の場合、undefined
  }
  return value;       // 値が100以上の場合、変換なし
}

let obj = JSON.parse("100", reviver);
console.log(obj, typeof obj);
// 出力:100 number
obj = JSON.parse("10", reviver);
console.log(obj, typeof obj);
// 出力:undefined undefined

obj = JSON.parse('[ 110, 90, 150 ]', reviver);
console.log(obj, Array.isArray(obj));
// 出力:Array(3) [ 110, <1 empty slot>, 150 ] true
obj = JSON.parse('{ "x": 110, "y": 90, "z": 150 }', reviver);
console.log(obj, typeof obj);
// 出力:Object {x: 110, z: 150} object

obj = JSON.parse('{ "x": 110, "y": 90, "z": 150 }', null);
console.log(obj, typeof obj);
// 出力:Object { x: 110, y: 90, z: 150 } object
console.log(JSON.parse( '{ "x":10 }' ));
// 出力:Object {x: 10}

try {
  const obj = JSON.parse('{ x:10 }');
}
catch (error) {
  console.log(error); // 出力:SyntaxError
}

JSON.stringify()【JavaScript 値 ⇒ JSON テキスト】

メモ

構文

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

戻り値JSON テキスト
valueJavaScript 値
toJSON メソッドを持っているオブジェクトの場合、呼び出し (例:Date.toJSON【JSON テキスト変換】)
replacer変換関数 または 配列 (その他は無視 / 詳細は下記参照)
spaceスペーサ (文字列 または 数値 / 詳細は下記参照)
例外TypeError 例外 (value が循環構造を含む)
replacer:変換関数
変換関数 引数名 (例)説明
keyキー
value
戻り値説明
JSON テキスト変換後の値
JSON テキスト以外
(undefined 等)
配列:"null" (実装依存)
オブジェクト:除外
その他:undefined
呼び出し不可説明
(例外発生なし)元の値
replacer:配列
配列備考
選択対象プロパティ名(文字列・数値) 配列ホワイトリスト
(選択対象のみを有効)
space備考
文字列先頭10文字有効
数値 (1~10)数値分のスペース

let json = JSON.stringify(null);
console.log(json, typeof json);
// 出力:null string

json = JSON.stringify(true);
console.log(json, typeof json);
// 出力:true string
json = JSON.stringify(false);
console.log(json, typeof json);
// 出力:false string

json = JSON.stringify("STRING");
console.log(json, typeof json);
// 出力:"STRING" string

json = JSON.stringify(123);
console.log(json, typeof json);
// 出力:123 string

json = JSON.stringify([ 1, 2, 3 ]);
console.log(json, typeof json);
// 出力:[1,2,3] string

json = JSON.stringify({ x: 10, y: 20, z: 30 });
console.log(json, typeof json);
// 出力:{"x":10,"y":20,"z":30} string

const date = new Date(2001, (2 - 1), 3, 4, 5, 6, 78);
json = JSON.stringify(date);  // 内部で Date.prototype.toJSON() 呼び出し
console.log(json, typeof json);
// 出力:"2001-02-02T19:05:06.078Z" string

const value = [];
value[0] = value;  // 循環構造
try {
  json = JSON.stringify(value);
}
catch (error) {
  console.log(error); // 出力:TypeError ~
}
// 変換関数指定
function replacer(key, value) {
  if (value < 100) {
    return undefined; // 値が100未満の場合、undefined
  }
  return value;       // 値が100以上の場合、変換なし
}
console.log(JSON.stringify(10, replacer));
// 出力:undefined
console.log(JSON.stringify(100, replacer));
// 出力:100
console.log(JSON.stringify([ 110, 90, 150 ], replacer));
// 出力:[110,null,150]
console.log(JSON.stringify({ x: 110, y: 90, z: 150 }, replacer));
// 出力:{"x":110,"z":150}

console.log(JSON.stringify(123, null));
// 出力:123
// 配列指定
const map = { '4': 'DDDD', '3': 'CCCC', '2': 'BBBB', '1': 'AAAA' };

console.log(JSON.stringify(map, [ '1', '3' ]));
// 出力:{"1":"AAAA","3":"CCCC"}

console.log(JSON.stringify(map, [ 1, 3 ], "1234567890abc"));
// 出力:
// {
// 1234567890"1": "AAAA",
// 1234567890"3": "CCCC"
// }

console.log(JSON.stringify(map, [ '3', 1 ], "\t\t"));
// 出力:
// {
// (Tab)(Tab)"3": "CCCC",
// (Tab)(Tab)"1": "AAAA"
// }

console.log(JSON.stringify(map, [ 1, 3 ], 2));
// 出力:
// {
// (sp)(sp)"1": "AAAA",
// (sp)(sp)"3": "CCCC"
// }
// 不正なサロゲートペア
console.log(JSON.stringify("\uDC00\uDC00"));
// 出力 (ES2018):"��"
// 出力 (ES2019):"\udc00\udc00"

console.log(JSON.stringify("\uDEAD"));
// 出力 (ES2018):"�"
// 出力 (ES2019):"\udead"