【初心者向け】【Javascript】文字列を途中で改行する方法を解説

Javascriptでプログラムを書いていると、文字列を途中で改行したくなることってありますよね。文字列に改行を加えることで、Javascriptで作ったプログラムのアウトプットがより見やすくなるようにデザインすることができます。

今回は、Javascriptで文字列を改行する方法を紹介します。

初心者の方にもわかりやすいように、サンプルコードを豊富に、かつ解説も丁寧にしていますので、是非参考にしてみてくださいね。

Javascriptの改行コードとは

文字列を表示する操作は、プログラムを書いているうえでは基本的な操作のうちの一つです。

通常、私達がタイピングをしているときには、Enterキーを押下することで文章を改行することができますが、プログラミングの世界では「改行コード」と呼ばれる特殊な記号を使うことで改行を認識させます。

Enterキーを押下することでコンピュータが改行を認識してくれているのは、実はこの改行コードが入力されているからなんですね。しかし、プログラムを作成するときには、自分で意図的に改行コードを入力する必要があります。

文字列としての改行なのか、プログラムの中での改行なのか見分けがつかないので、人間がコンピュータに教えてあげる必要があるんですね。難しい内容ではありませんので、しっかりマスターしていきましょう。

文字列を途中で改行する方法

それでは早速、Javascriptで文章を改行する方法を紹介していきます。

Javascriptでは2つの方法で文章を改行することができます。順番に説明していきますので、ついてきてくださいね。Javascriptの実行環境がある方は、是非サンプルコードを実行しながらみてみてください。より理解が深まると思いますよ。

改行コードを利用する場合

まずはじめに紹介するのは、改行コードを利用して改行する方法です。

後に紹介するテンプレート文字列を利用するよりも、こちらの方が一般的な改行の方法です。Javascriptでは「\n」(バックスラッシュとn)を入力することで改行と理解されます。

ここでのバックスラッシュは「エスケープシーケンス」と呼ばれ、この後に続く特定の文字列は特殊な意味で使いますよ、ということを宣言するためのものです。尚、今回は紹介しませんが、特殊文字は改行だけではなく、タブキーやNULL文字など他の意味を示す文字もあります。

興味のある方は調べてみてくださいね。それでは改行コードを使用している例を見てみましょう。

「/n」を入れたところで改行されましたね。

実は改行コードには「\n」、「\r」、「\r\n」の3種類があります。どの改行コードが適切なのかは利用しているOSや実行環境によって異なりますので、必要に応じて使い分けてください。

場合によっては複数のOSやブラウザで正常に動作するか確かめておいたほうがいいかも知れません。

テンプレート文字列を利用する場合

次に、テンプレート文字列を利用して改行する方法を紹介します。

この方法はJavascriptのES2015以降で利用できる、比較的新しい方法です。新しいといっても数年前のものなのでおおよそ正常に動作しますが、Javascriptを実行する環境によっては対応していないことがありますので使うときには注意が必要です。

Javascriptでは文字列を表す際に「” ”」(ダブルクオーテーション)や「’ ’」(シングルクォーテーション)で囲いますが、代わりに「 」(バッククオート)で囲うことにより、コードに書いた改行をそのままプログラムが認識してくれるようになります。使用例を見てみましょう。

改行コードを使ったときと同じ出力結果が得られましたね。最近の環境ではどちらの方法も使うことができますので、お好みに応じて使ってみてください。

改行を削除する方法

ここまではJavascriptで文字列を改行する方法を紹介してきました。プログラムを書いていると、逆に改行を削除したい場面がでてくると思います。

そこでここでは、replaceAll()メソッドとmatch()メソッドを使って改行を削除する方法をご紹介します。

文章が改行されずに表示されるようになりましたね。それではこのサンプルコードではどのような処理をしていたのか分解してみてみましょう。

まず、一番内部にあるstr.match(/\n/)では、変数strの中にある改行コードを探し出しています。引数として出てきている「’\n’」は先程出てきた改行コードです。

そして一つ外側に使われているreplaceAllメソッドは、replaceAll(変換条件,変換後の文字)というように使います。つまり、今回のコードは、「変数strに格納されている値のうち、改行コードにmatchするものを全て空(“”)にする(置き換える)」という意味になります。

また、このコードは以下の記述することで、もう少しシンプルに記述することもできます。

先程使用したmatch()メソッドがなくなり、代わりに「/\n/g」という文字列になっていますね。

これは正規表現で、改行コードを意味しています。「/ /」のようにスラッシュで囲うと、正規表現ということになります。そして、最後についているgはグローバルの意味で、「条件にマッチするもの全て」という意味合いを持ちます。

gをつけないと最初の改行コードしか削除されませんので注意してくださいね。試しに1度gがない状態で実行してみてもいいかも知れません。正規表現は奥が深い世界ですので、詳細には紹介しませんが、興味のある方は別途調べてみてください。

最初はややこしくて気が引けるかも知れませんが、使いこなすことでより柔軟に条件を表現することができます。

まとめ

いかがでしたか？改行コードを利用する方法も、テンプレート文字列を利用する方法どちらも難しくはなかったですよね。

改行コードを利用する場合は「\n」、テンプレート文字列を利用する場合には「」(バッククオート)を使います。

また、replace()メソッドやmatch()メソッドを利用することで不要な改行を削除することができます。

文章を適切な位置で改行することで、ユーザがより見やすいプログラムを書くことができますよ。是非参考にしてみてくださいね。