JavaScript文字列中で改行を挿入・表現する3つの方法とコード例

JavaScriptの文字中で改行を挿入

これには3つの方法があります。

▼ ただし改行と一言でいっても次の違いが

  • 純粋な文字中での改行コード
  • HTML中での改行タグ = brタグ

こういった違いなども含め、
JS文字中で改行挿入する方法をまとめときます。

前提.JavaScriptではOSごとの改行の差異は意識しない

改行コードは複雑な歴史があります。

実はOSごとに改行コードが違っています。

▼ それぞれのOSでの改行コードの表現

OS 名称  エスケープ表現  16進数
Windows CRLF \r\n  0x0D0A
UNIX/Linux  LF  \n  0x0A
Macintosh  CR  \r  0x0D

もうOSごとにバラバラです。

これを環境ごとに分けるとなったら大変です。

だからJSでの改行コードは \n で統一。

つまりUnix/Linuxと同じってことです。

※ ただしJS仕様のことは言ってる訳ではない
どの環境でも改行は \n で表現できます。

これが次からの話にいろいろ関わってくる点です。

方法1.普通に \n として改行コード挿入

最初の方法は \n として挿入すること

いわゆる改行をエスケープするやり方です。

▼ 文字中で改行挿入するコード例

▼ このコードの出力結果

JavaScriptではシングル・ダブルクォート両方で文字列を表せます。

どっちの表現でも改行を \n として挿入可能です。

JSでは \r というエスケープは出力時に意味を持たない

そして先ほど書いたように…

JSでは改行は \n だけで表される

だから \r という表現はそもそも無意味です。

▼ だからこういうコードは書かない

▼ このコードの出力結果

ただし \r は文字コードとしては認識されます。
なので \r 自体が無意味なわけではありません。

  • ファイルからテキストデータを読み込むとき、
  • ファイルにテキストデータを書き込むとき

そういうときは \r も意識されるべき。

コンソール出力では無意味という認識です。

方法2.テンプレートリテラル内で直接改行する

これはとっても楽で直観的な方法

▼ テンプレートリテラルとは?

テンプレートリテラルは、ダブルクォートやシングルクォートの代わりにバックティック文字 ( ) (グレーブアクセント)で囲みます。テンプレートリテラルにはプレースホルダーを含めることができます。プレースホルダーはドル記号と波括弧 (${expression}) で示されます。プレースホルダー内の式とバックティック文字 ( ) の間にあるテキストが関数に渡されます。

引用元 : https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

JavaScriptでの3つ目の文字列表現ですね。

バックティック文字 で文字列を囲む奴です。

 

これを使うと直接改行を挿入できます。

▼ 改行を含む文字列をそのままベタ書きできる

▼ このコードの出力結果

しっかりと改行が反映されてます。

普通の文字列と違って \n という書き方をしなくていいし、どこで改行されてるのかが一目瞭然で分かりやすいです。

もちろんテンプレートリテラルの中でも "hoge\nfuga"  のように改行エスケープを含めることも可能です。そういう点でもテンプレートは便利ですね。

方法3.HTML文章内に改行タグ(brタグ)を挿入

最後はHTML中での改行表現

今までのは純粋な文字列中での話でした。
つまり \n が文章中で改行コードを表します。

でもHTMLではbrタグが改行を表す唯一の手段です。

※ 純粋な文字列 と HTML文章 は全く別物!!

それを踏まえて次のようなコードも書けます。

▼ 要素内テキストに改行を含めるコード例

▼ ブラウザ上で改行が反映される

ブラウザ上ではbrタグを使って改行を表現できる

ブラウザ上のDOM要素にテキスト挿入・変更したい場合、改行はbrタグで表す必要があります。そこを改行コードを混同しないように注意です。

ちなみに改行コード(\n)はブラウザ上では無視されます。というか1つ以上の空白・改行は1つのスペースに置き換わる仕様です。(少なくとも主要ブラウザでは)

最後にここまでの改行表現の方法まとめ

ということで簡単に箇条書きでまとめ

他にも方法があるけど代表的なのは以上。

ただしコンソール出力・HTML出力の場合です。
ファイル書き込みとかは別なので注意してください。

以上、JSでの改行表現でした。ではまた

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください