JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JSON.stringify()とは？JavaScriptでの使い方を実例つきで解説

JSON.stringify()とは

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

Webサーバーにデータを送信する際、データは文字列として扱われる必要があります。そのため、オブジェクトリテラルをそのまま送信することはできず、JSON.stringify()メソッドを使って文字列へ変換する必要があります。

基本構文

JSON.stringify(value[, replacer[, space]])
  • value: JSON文字列に変換する対象（オブジェクトや配列など）
  • replacer: 省略可能。変換の挙動を制御する関数またはプロパティ名の配列
  • space: 省略可能。インデント用の空白の数を指定すると、読みやすい整形出力が得られます

使用例1：シンプルなオブジェクトの変換

次の例では、オブジェクトをJSON文字列に変換し、画面に表示しています。

コード例

<html>
<body>
<p id="demo"></p>
<script>
   var obj = {name:"rekha", age:40, city:"newyork"};
   var myJSON = JSON.stringify(obj);
   document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>

出力結果

{"name":"rekha","age":40,"city":"newyork"}

使用例2：ネストされたオブジェクト・配列の変換

入れ子になった配列やオブジェクトを含む複雑なデータ構造でも、そのまま一つのJSON文字列に変換できます。

コード例

<html>
<body>
<p id="demo"></p>
<script>
    var obj = {"name":"ramesh","age":30,"family":
        [{"mother":"geetha","father":"rao"}],"city":"berlin"};
    var myJSON = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>

出力結果

{"name":"ramesh","age":30,"family":[{"mother":"geetha","father":"rao"}],"city":"berlin"}

利用時の注意点

  • 値がundefined、関数、シンボルであるプロパティは、変換時に自動的に除外されます
  • DateオブジェクトはISO 8601形式の日付文字列に変換されます
  • 循環参照を含むオブジェクトを渡すと、TypeErrorが発生します
  • 逆に、JSON文字列からオブジェクトへ戻す場合はJSON.parse()を使用します

  1. JavaScriptの「import as」「export as」構文を徹底解説！別名でのモジュール読み込みと書き出し方法

    JavaScriptのモジュールシステムでは、asキーワードを使うことで、モジュールを任意の別名でインポートしたりエクスポートしたりできます。 import as と export as とは import as を使うと、エクスポートされた名前付きモジュール（名前付きエクスポート）を、自分の好きな名前を付けて読み込むことができます。 export as を使うと、ローカルで定義した関数や変数に別名を付けて外部に公開できます。これにより、内部実装の名前と外部に見せる名前を分けることが可能になります。 以下に、JavaScriptにおける import as および export as 構文の具

  2. Windows 10の「タイムライン」機能とは？その魅力と使い方を徹底解説

    Windows 10のApril 2018 Update（2018年4月更新プログラム）がついに登場し、数々の新機能や改善点が追加されました。 まだアップデートを適用していない場合は、手動でダウンロードする方法をご確認ください。主な変更点としては、Windows Helloの改善や、Microsoftへ送信されるデータに対するコントロール強化などが挙げられます。しかし、筆者が特にお気に入りの新機能は「タイムライン（Timeline）」です。この記事では、タイムラインについて知っておくべき情報と、使い始めるための手順を詳しくご紹介します。 Windows 10タイムラインとは？ タイムラインは