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

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

メモ

概要

関連

外部リンク

構文

JSON.parse( text[, reviver] ) 

JavaScript 値
textJSON テキスト
reviver復元関数 (詳細は下記参照)

SyntaxError 無効な JSON テキスト
reviver (復元関数)
引数名 (例)		説明
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 テキスト】

メモ

概要

  • 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"