JavaScriptの文字中で改行を挿入
これには３つの方法があります。
▼ ただし改行と一言でいっても次の違いが
- 純粋な文字中での改行コード
- 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 で表現できます。
これが次からの話にいろいろ関わってくる点です。
方法１．普通に \n として改行コード挿入
最初の方法は \n として挿入すること
いわゆる改行をエスケープするやり方です。
▼ 文字中で改行挿入するコード例
|
1 2 3 4 5 6 7 |
/// ダブルクォートの場合 var str = "hoge\nfuga\npiyo" console.log(str) /// シングルクォートの場合 var str = 'hghg\nfgfg\npypy' console.log(str) |
▼ このコードの出力結果
|
1 2 3 4 5 6 7 |
hoge fuga piyo hghg fgfg pypy |
JavaScriptではシングル・ダブルクォート両方で文字列を表せます。
どっちの表現でも改行を \n として挿入可能です。
JSでは \r というエスケープは出力時に意味を持たない
そして先ほど書いたように…
JSでは改行は \n だけで表される
だから \r という表現はそもそも無意味です。
▼ だからこういうコードは書かない
|
1 2 3 |
/// ダブルクォートの場合 var str = "hoge\rfuga\rpiyo" console.log(str) |
▼ このコードの出力結果
|
1 |
hogefugapiyo |
ただし \r は文字コードとしては認識されます。
なので \r 自体が無意味なわけではありません。
- ファイルからテキストデータを読み込むとき、
- ファイルにテキストデータを書き込むとき
そういうときは \r も意識されるべき。
コンソール出力では無意味という認識です。
方法２．テンプレートリテラル内で直接改行する
これはとっても楽で直観的な方法
▼ テンプレートリテラルとは？
テンプレートリテラルは、ダブルクォートやシングルクォートの代わりにバックティック文字 (
) （グレーブアクセント）で囲みます。テンプレートリテラルにはプレースホルダーを含めることができます。プレースホルダーはドル記号と波括弧 (${expression}) で示されます。プレースホルダー内の式とバックティック文字 () の間にあるテキストが関数に渡されます。引用元 ： https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals
JavaScriptでの３つ目の文字列表現ですね。
バックティック文字 で文字列を囲む奴です。
これを使うと直接改行を挿入できます。
▼ 改行を含む文字列をそのままベタ書きできる
|
1 2 3 4 |
let str = `hoge fuga piyo` console.log(str) |
▼ このコードの出力結果
|
1 2 3 |
hoge fuga piyo |
しっかりと改行が反映されてます。
普通の文字列と違って \n という書き方をしなくていいし、どこで改行されてるのかが一目瞭然で分かりやすいです。
もちろんテンプレートリテラルの中でも "hoge\nfuga" のように改行エスケープを含めることも可能です。そういう点でもテンプレートは便利ですね。
方法３．HTML文章内に改行タグ（brタグ）を挿入
最後はHTML中での改行表現
今までのは純粋な文字列中での話でした。
つまり \n が文章中で改行コードを表します。
でもHTMLではbrタグが改行を表す唯一の手段です。
※ 純粋な文字列 と HTML文章 は全く別物！！
それを踏まえて次のようなコードも書けます。
▼ 要素内テキストに改行を含めるコード例
|
1 2 3 4 5 6 7 8 |
document.body.innerHTML = ` <p> Fizz Buzz <br> Fizz Fizz <br> Fizz Buzz Fizz </p> |
▼ ブラウザ上で改行が反映される
ブラウザ上のDOM要素にテキスト挿入・変更したい場合、改行はbrタグで表す必要があります。そこを改行コードを混同しないように注意です。
ちなみに改行コード（\n）はブラウザ上では無視されます。というか１つ以上の空白・改行は１つのスペースに置き換わる仕様です。（少なくとも主要ブラウザでは）
最後にここまでの改行表現の方法まとめ
ということで簡単に箇条書きでまとめ
他にも方法があるけど代表的なのは以上。
ただしコンソール出力・HTML出力の場合です。
ファイル書き込みとかは別なので注意してください。
以上、JSでの改行表現でした。ではまた
