LoginSignup
1
0

More than 1 year has passed since last update.

JSON文字列化

Last updated at Posted at 2021-10-21

JSON.stringify()

JSONの一般的な目的は、Webサーバーとデータを交換することです。

Webサーバーにデータを送信する場合、データは文字列である必要があります。

JSON.stringify()を使用してJavaScriptオブジェクトを文字列に変換します。

JavaScriptオブジェクトを文字列化する

このオブジェクトがJavaScriptにあると想像してください:

var obj = { name:"Bill Gates", age:62, city:"Seattle"};

JavaScript関数JSON.stringify()を使用して文字列に変換してください。

var myJSON = JSON.stringify(obj);

結果は、JSON表記に準拠した文字列になります。

myJSONは現在文字列であり、サーバーに送信する準備ができています:

var obj = { name:"Bill Gates", age:62, city:"Seattle"};
var myJSON =  JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

JavaScript配列を文字列化する

JavaScript配列を文字列化することもできます:

JavaScriptにこの配列があると想像してください:

var arr = [ "Bill Gates", "Steve Jobs", "Elon Musk" ];

JavaScript関数JSON.stringify()を使用して文字列に変換してください。

var myJSON = JSON.stringify(arr);

結果は、JSON表記に準拠した文字列になります。

myJSONは現在文字列であり、サーバーに送信する準備ができています:

var arr = [ "Bill Gates", "Steve Jobs", "Elon Musk" ];
var myJSON =  JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

例外

日付の文字列化

JSONでは、日付オブジェクトは許可されていません。 JSON.stringify()関数は、任意の日付を文字列に変換します。

var obj =  { "name":"Bill Gates", "today":new Date(), "city":"Seattle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

文字列を受信側の日付オブジェクトに変換して戻すことができます。

関数の文字列化

JSONでは、関数はオブジェクト値として許可されていません。

JSON.stringify()関数は、キーや値など、JavaScriptオブジェクトからすべての関数を削除します。

var obj =  { "name":"Bill Gates", "age":function () {return 62;}, "city":"Seattle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

JSON.stringify()関数を実行する前に関数を文字列に変換した場合は、省略できます。

var obj =  { "name":"Bill Gates", "age":function () {return 62;}, "city":"Seattle"};
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

JSONで関数を使用することは避けてください。関数はスコープを失い、 eval()を使用して関数に戻す必要があります。

ブラウザのサポート

すべての主要なブラウザと最新のECMAScript(JavaScript)標準には、 JSON.stringify()関数が含まれています。

以下の表の数字は、 JSON.stringify()関数を完全にサポートする最初のブラウザバージョンを示しています。

Chrome IE Firefox Safari Opera
Yes 8.0 3.5 4.0 10.0
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0