【初心者向け】JavaScriptで文字列を改行する方法は?改行コードの置換方法についても解説!

こんにちは、大学院でIT系の研究を専攻している、ひらりんです。

JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです!

本記事では、JavaScriptの文字列の改行の仕方や、改行コードの置換方法について説明します。JavaScriptを始めとした多くの言語では、Enterキーを押しただけでは文字列を改行することができず、専用のコードを書く必要があります。この改行コードを使いこなすだけでなく、文字列内の文字と区別したい場面もあり、プログラムに慣れている人でも混乱してしまいます。

JavaScriptの文字列の改行方法や、改行コードの置換について、メソッドの使い方や基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください!

JavaScriptで文字列を改行する方法

まず、JavaScriptで文字列を改行する方法について説明します。

ワードやテキストなどと違い、プログラミングではEnterキーを押しても文字列は改行できません。その他にも、シングルフォート「’」やバックスラッシュ「\」なども、そのまま入力しても表示させられません。

このような、キーボードから直接的に入力できない文字や、構文などで使用されてしまう記号について表記したい場合は、エスケープシーケンスを用います。

エスケープシーケンス

エスケープシーケンスとは、特殊な文字を表示したい場合に用いる方法です。主に、円マーク「¥」やバックスラッシュ「\」を先頭につけて表現します。どちらの記号を用いるかは、使用PCの環境によりますが、基本的にはどっちの記号でも問題ありません。

このエスケープシーケンスを用いることで、構文に使用されているシングルクオーテーションやダブルクオーテーション、タブ文字やバックスペースなども入力することができます。以下が、使用頻度が高いエスケープシーケンスの一覧となっています。

記法 意味
\n 改行
\r 復帰
\ シングルクオーテーション
\ ダブルクオーテーション
\t タブ文字
\¥ 円マーク(¥)
\\ バックスラッシュ(\
\ バックスペース

表の左側のように記述することで、右側の意味を表現できます。

改行コード

改行コードについては、上述したように以下の通りに書きます。

このように、改行のエスケープシーケンスである「\n」を直接文中に記述することで、文を改行することができます。ここでは、「1行目」と「2行目」の間で改行された文字列が「変数名」に格納されます。では、実際の使用例を見てみましょう。

改行コードの使用例・結果

改行コードを使用したプログラムを記述しました。2行目にて、文中に改行コードの「\n」を用いた文字列を変数strに格納しています。5行目では、変数strを表示するように書かれています。このプログラムを実行すると、以下のような実行結果が表示されます。

このようにプログラム結果が表示されます。変数strに格納された文字列は、「犬」と「猫」と「ネズミ」の間に改行コードが記述されているので、その結果が表示されていますね。

<br>による改行

JavaScriptで書かれている文字列を表示する際には、改行コードを始めとしたエスケープシーケンスはHTMLに対応していないため、改行されません。HTMLに対応させるためには、<br>タグを使用してください。以下のように使用することで、ブラウザ上でも改行された文字列が表示されます。

このように、改行したいところに<br>タグを用いることで、先ほどと同様な結果を得ることができます。

JavaScriptで文字列を置換する方法

続いて、JavaScriptで文字列を置換する際に使用されるreplaceメソッドについて説明します。replaceメソッドは、その名の通り、「置換したい文字」と「置換する文字」を指定することで、文字列を置き換えることができます。それでは、簡単に使い方を見てみましょう。

基本構文

replaceメソッドは、このように使います。1行目で検索対象となる文字列が定義されていますね。この文字列を変数strに格納しています。

文字列が格納された変数名に対してreplaceと書き、直後の括弧内で第一引数に検索したい文字、第二引数に置換する文字を指定します。こうすることで、文字列内に検索対象の文字が含まれていたら、指定した文字に置換されます。

replaceメソッドについて詳しく知りたい方は、以下の記事を参考にしてください。replaceメソッドの使い方だけでなく、正規表現などについても解説しています。

参考 【初心者向け】JavaScriptで文字の置換ってどうやるの?基本的な方法を分かりやすく解説します。ウェブカツ ブログ

改行コードを置換する方法

JavaScriptでは、エスケープシーケンスによる改行コードの\n」を用いることで、文字列を途中で改行できると説明しました。しかし、JavaScriptで書いた文字列をブラウザに表示したいときは、改行コードの「\n」をHTMLで改行を表す<br>タグに置換する必要があります。

そこで、先述した置換メソッドを用いて、改行コードを置換する方法について説明します。

基本構文

改行コードの「\n」が含まれている、変換したい文字列に対して、先ほど説明したreplaceメソッドをとります。replace直後の括弧内の第一引数に、「/\n/g」と記述しています。

これは、正規表現を用いて検索を行っています。簡単に説明すると、スラッシュ(/)で囲まれている範囲内の文字を検索しています。また、「g」はオプションでグローバルリサーチといい、文字列内を全部検索するように指定されています。

このように、第一引数で検索したい文字を指定し、第二引数で”<br>”に置換するように指定することで、改行コードを<br>タグに変更することができます。

なお、正規表現については、以下の記事で詳しく解説されているので、参考にしてください。

参考 JavaScriptの正規表現とは?一から分かりやすく説明しますウェブカツ ブログ

実践プログラム例

では、実際のプログラム内での使用例を見てみましょう。

改行コードを<br>タグに変換する処理を、5行目で記述しています。このようにreplaceメソッドと、正規表現を用いて改行コードを検索することで、ブラウザでも表示させることができる<br>タグに置換することができます!

まとめ

いかがでしたでしょうか?今回は、JavaScriptの文字列の改行方法や、改行コードの置換について説明しました。

JavaScriptの改行コードを始めとしたエスケープシーケンスや、置換したいときに用いるreplaceはとても便利なメソッドです。ぜひ、JavaScriptの文字列の改行を始めとした文字列操作法や置換について理解し、Webサービス作成やシステム構築に活かしてください。