【JavaScript】改行とエスケープシーケンスの書き方・使い方について解説

JavaScriptを使っている際に、改行を表現したい場合があります。本記事では改行を表現する方法について具体例を交えて解説します。さらに記事後半ではエスケープシーケンスについて解説します。

改行表現のいくつかの方法

エスケープシーケンスによる改行表現

改行は

\n

によって表現することができます。

msg = 'はじめまして\nよろしくお願いします。'
console.log('msg') 
//初めまして
//よろしくお願いします。

バックスラッシュ(\)を用いたエスケープシーケンスを用いることで、特別な意味を持つものやキーボードから直接表現できないものを表現することができます。\n以外のエスケープシーケンスについて知りたい方は「エスケープシーケンスについて」を参照してください。

テンプレートリテラルによる改行表現

msg = `初めまして
よろしくお願いします。`
console.log('msg') 
//初めまして
//よろしくお願いします。

このようにバッククォートを用いることで改行の効果を反映し、複数行の文字列を反映することができます。

HTMLファイル内での改行

HTML内部で改行をするためには</br>を挿入する必要があります。したがって次のような記述をしても、改行は行われません。

<body>
    <div id='app'></div>
    <script lang="text/javascript">
        msg = '初めまして\nよろしくお願いします。'
        document.getElementById("app").innerHTML = msg
    </script>
</body>

HTMLにも対応するためには直接</br>をテキストに挿入する必要があります。

msg = '初めまして</br>よろしくお願いします。'

またはStringオブジェクトのreplaceメソッドを用いて\nを</br>に置換する方法もあります。

msg = '初めまして\nよろしくお願いします。'
msg = msg.replace(/\n/g, "</br>")

または

msg = `初めまして
よろしくお願いします`
msg = msg.replace(/\n/g, "</br>")

replaceメソッドについて詳しく知りたい方は「JavaScriptで文字列を置換する方法(replace)について解説」を参照してみてください！

エスケープシーケンスについて

本項ではエスケープシーケンスについて説明していきます。

エスケープシーケンスとは

エスケープシーケンスとは特別な意味を持つものやキーボードから直接表現できない文字を「\と文字」を用いることで表現するものです。\（バックスラッシュ）はMacOSではoption + ¥で入力することができますWindowsでは「ろ」のキーで入力することができます。

代表的なエスケープシーケンス

記法	意味
\n	改行
\r	復帰
\t	タブ文字
\b	バックスペース
\f	改ページ
\’	シングルクォート
\”	ダブルクォート
\\	バックスラッシュ

\nや\tなどのキーボードから直接入力ができない文字に加えて、シングルクォートやダブルクォートなどの文字自体にリテラルでの意味を持つものもエスケープする必要があります。ちなみに、ダブルクォート内ではシングルクォートをエスケープする必要はありません。さらに、バッククォート内ではダブルクォートもシングルクォートもエスケープする必要がありません。

msg = "初めまして'田中'と申します。"//初めまして'田中'と申します。
msg = `初めまして'田中'と申します。` //初めまして"田中"と申します。

一方でバッククォートで囲まれた部分では${}の内部に変数や式を挿入することができるため$と{がセットになっている場合と特定の意味を持つものとして扱われます。したがってバッククォート内では${や${}と表現したい場合は$か{のどちらかをエスケープする必要があります。このように特定の意味を持つ文字などに対してエスケープしなくてはならない場合があります。バッククォートで囲むテンプレートリテラルについて詳しく知りたい方は「JavaScriptの文字列操作について解説」も参考にしてみてください！

正規表現のエスケープ

2.2項の後半でも述べたように文字以外の特定の意味を持つ文字に対してはエスケープをする必要があります。そして、正規表現の場合、特にエスケープに注意する必要があります。詳しくは「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」を参照してみるのがいいですが、いくつか紹介します。

. * + ^ | [ ] ( ) ? $ { }\

これらの文字は文字以外の意味を持つためエスケープ処理が必要です。さらに、[]内では次の文字をエスケープする必要があります。

-\^]

また、それぞれの文字に対してその位置によってエスケープする必要がある場合とない場合があるため、注意が必要です。（自分で書く際には余分にエスケープしても動く場合が多いですが、他の人が書いた表現を読む際に知っておかないと混乱する可能性が高いです。）さらに詳しい正規表現のエスケープについては詳しくは「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」で実際の正規表現をもとに学習するのがおすすめです。

この記事のまとめ

本記事ではJavaScriptで改行を表現する方法やエスケープシーケンスについて説明しました！最後に記事の要点をまとめてみましょう。

改行は\nの記法で表現することができる。
バッククォートで囲まれた部分では改行がそのまま反映できる。
HTMLでは</br>によって改行を示す必要がある。
エスケープシーケンスで特別な意味を持つものやキーボードから直接表現できない文字を表現できる。
バッククォート内部や正規表現など、場合によっては特定の文字に対してエスケープをする必要がある。

JavaScriptでエスケープシーケンスを是非活用してみましょう！