JSONデータに改行コードを入れる方法

こんばんは。最近プログラミングしてないなと反省してますshojiです。
仕事でAPIを開発していて、レスポンスデータとして改行コード入りのJSON文字列を返そうと思ったときに少し悩んだのでメモします。

 

※こちらは2017年に公開した記事ですが、文章と構成を見直して再度公開いたしました。

 

確認した環境

  • Mac版Chrome 104.0.5112.79

 

エラーケース

JavaScriptからAPIを呼び出し、レスポンスとして下記のようなJSON文字列を取得し、改行コード \n の含まれるテキストデータをテキストエリアに表示したいと思います。

JSON文字列ですので、JSON.parseメソッドでJSON文字列からJavaScriptのオブジェクトにパースする必要があります。

しかし、JSON.parseで次のエラーが発生してしまいました。

試しにJSON文字列に改行コードを含めないで実行したら、エラーが発生しなくなったので、レスポンスに含まれる改行コードが問題のようです。

では、上記のような処理を考えた場合、どのようにレスポンスに改行コードを含めると良いのでしょうか。

 

結論

レスポンスを次のようなJSON文字列にすれば、正しく動作するようです。

改行コードが \\n に変わっていますね。なぜバックスラッシュが2つ必要なのでしょうか・・・?

 

 

これには、JavaScriptとJSON文字列を分けて考えると良いようです。

まず、JSON文字列ではなく、JavaScriptのオブジェクトのみでエラーケースと同じことを実装してみます。

これを実行すると、テキストエリアには正しく改行コードが含まれて表示されました。

つまり、JavaScriptの世界だけで考えた場合、改行コードは \n で問題ないようです。

 

続いて、JSON文字列について考えてみます。

JSON仕様によりますと、バックスラッシュ文字はエスケープして表現する必要があり、6文字形式 \u005c または2文字形式 \\ という二通りの表現が可能なようです。

つまり、次の2つのJSON文字列はどちらも \n という文字列を意味します。

 

これらを組み合わせて考えると、JSON文字列の世界では改行文字 \n を表現するためにバックスラッシュが2つになり…

これをJSON.parseすると、JavaScriptの世界では、

というオブジェクトとして取得され、 \n は改行コードになりますので、出力時に改行され…

と表示されるようです。

 

以上となります。



❏❏ TOPIC ❏❏ ------------------------------------------------------------

カスタム自由!フリーECサイトパッケージ
チャットボット導入サービス
WEBシステム開発・スマホアプリ開発はSRIAへ