こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptの文字列の改行の仕方や、改行コードの置換方法について説明します。JavaScriptを始めとした多くの言語では、Enterキーを押しただけでは文字列を改行することができず、専用のコードを書く必要があります。この改行コードを使いこなすだけでなく、文字列内の文字と区別したい場面もあり、プログラムに慣れている人でも混乱してしまいます。
JavaScriptの文字列の改行方法や、改行コードの置換について、メソッドの使い方や基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
JavaScriptで文字列を改行する方法
まず、JavaScriptで文字列を改行する方法について説明します。
ワードやテキストなどと違い、プログラミングではEnterキーを押しても文字列は改行できません。その他にも、シングルフォート「’」やバックスラッシュ「\」なども、そのまま入力しても表示させられません。
このような、キーボードから直接的に入力できない文字や、構文などで使用されてしまう記号について表記したい場合は、エスケープシーケンスを用います。
エスケープシーケンス
エスケープシーケンスとは、特殊な文字を表示したい場合に用いる方法です。主に、円マーク「¥」やバックスラッシュ「\」を先頭につけて表現します。どちらの記号を用いるかは、使用PCの環境によりますが、基本的にはどっちの記号でも問題ありません。
このエスケープシーケンスを用いることで、構文に使用されているシングルクオーテーションやダブルクオーテーション、タブ文字やバックスペースなども入力することができます。以下が、使用頻度が高いエスケープシーケンスの一覧となっています。
| 記法 | 意味 |
| \n | 改行 |
| \r | 復帰 |
| \‘ | シングルクオーテーション |
| \“ | ダブルクオーテーション |
| \t | タブ文字 |
| \¥ | 円マーク（¥） |
| \\ | バックスラッシュ（\） |
| \ | バックスペース |
表の左側のように記述することで、右側の意味を表現できます。
改行コード
改行コードについては、上述したように以下の通りに書きます。
|
1 |
変数名 = "1行目\n2行目"; |
このように、改行のエスケープシーケンスである「\n」を直接文中に記述することで、文を改行することができます。ここでは、「1行目」と「2行目」の間で改行された文字列が「変数名」に格納されます。では、実際の使用例を見てみましょう。
改行コードの使用例・結果
|
1 2 3 4 5 |
// 変数strに文字列を格納 var str = "犬\n猫\nネズミ"; // 変数strを表示 console.log(str); |
改行コードを使用したプログラムを記述しました。2行目にて、文中に改行コードの「\n」を用いた文字列を変数strに格納しています。5行目では、変数strを表示するように書かれています。このプログラムを実行すると、以下のような実行結果が表示されます。
|
1 2 3 4 |
// 実行結果を表示 犬 猫 ネズミ |
このようにプログラム結果が表示されます。変数strに格納された文字列は、「犬」と「猫」と「ネズミ」の間に改行コードが記述されているので、その結果が表示されていますね。
<br>による改行
JavaScriptで書かれている文字列を表示する際には、改行コードを始めとしたエスケープシーケンスはHTMLに対応していないため、改行されません。HTMLに対応させるためには、<br>タグを使用してください。以下のように使用することで、ブラウザ上でも改行された文字列が表示されます。
|
1 2 3 4 5 |
// <br>タグを使用して作成した文字列を変数strに格納 var str = "犬<br>猫<br>ネズミ"; // 変数strを表示 console.log(str); |
このように、改行したいところに<br>タグを用いることで、先ほどと同様な結果を得ることができます。
JavaScriptで文字列を置換する方法
続いて、JavaScriptで文字列を置換する際に使用されるreplaceメソッドについて説明します。replaceメソッドは、その名の通り、「置換したい文字」と「置換する文字」を指定することで、文字列を置き換えることができます。それでは、簡単に使い方を見てみましょう。
基本構文
|
1 2 |
var str = "検索対象の文字列"; str.replace(検索したい文字, 置換する文字); |
replaceメソッドは、このように使います。1行目で検索対象となる文字列が定義されていますね。この文字列を変数strに格納しています。
文字列が格納された変数名に対してreplaceと書き、直後の括弧内で第一引数に検索したい文字、第二引数に置換する文字を指定します。こうすることで、文字列内に検索対象の文字が含まれていたら、指定した文字に置換されます。
replaceメソッドについて詳しく知りたい方は、以下の記事を参考にしてください。replaceメソッドの使い方だけでなく、正規表現などについても解説しています。
参考 【初心者向け】JavaScriptで文字の置換ってどうやるの？基本的な方法を分かりやすく解説します。ウェブカツ ブログ改行コードを置換する方法
JavaScriptでは、エスケープシーケンスによる改行コードの「\n」を用いることで、文字列を途中で改行できると説明しました。しかし、JavaScriptで書いた文字列をブラウザに表示したいときは、改行コードの「\n」をHTMLで改行を表す<br>タグに置換する必要があります。
そこで、先述した置換メソッドを用いて、改行コードを置換する方法について説明します。
基本構文
|
1 2 |
// 改行コードを<br>タグに変換 変換したい文字列.replace(/\n/g, "<br>"); |
改行コードの「\n」が含まれている、変換したい文字列に対して、先ほど説明したreplaceメソッドをとります。replace直後の括弧内の第一引数に、「/\n/g」と記述しています。
これは、正規表現を用いて検索を行っています。簡単に説明すると、スラッシュ（/）で囲まれている範囲内の文字を検索しています。また、「g」はオプションでグローバルリサーチといい、文字列内を全部検索するように指定されています。
このように、第一引数で検索したい文字を指定し、第二引数で”<br>”に置換するように指定することで、改行コードを<br>タグに変更することができます。
なお、正規表現については、以下の記事で詳しく解説されているので、参考にしてください。
参考 JavaScriptの正規表現とは？一から分かりやすく説明しますウェブカツ ブログ実践プログラム例
では、実際のプログラム内での使用例を見てみましょう。
|
1 2 3 4 5 6 7 8 |
// 変数strに改行コードの「\n」を用いた文字列を格納 var str = "犬\n猫\nネズミ"; // 改行コードを<br>タグに変換 str_1 = str.replace(/\n/g, "<br>"); // 変数strを表示 console.log(str_1); |
改行コードを<br>タグに変換する処理を、5行目で記述しています。このようにreplaceメソッドと、正規表現を用いて改行コードを検索することで、ブラウザでも表示させることができる<br>タグに置換することができます！
まとめ
いかがでしたでしょうか？今回は、JavaScriptの文字列の改行方法や、改行コードの置換について説明しました。
JavaScriptの改行コードを始めとしたエスケープシーケンスや、置換したいときに用いるreplaceはとても便利なメソッドです。ぜひ、JavaScriptの文字列の改行を始めとした文字列操作法や置換について理解し、Webサービス作成やシステム構築に活かしてください。
