JavaScriptで文字列を改行するためのコードと、具体的な使い方について解説します。併せて、改行がうまくいかない場合の対処法や、改行をもっとシンプルに行えるテンプレートリテラルの使い方についても紹介しますので、参考にしてください。

文字列の途中で改行してみよう

JavaScriptにかかわらず、プログラミングではテキストのようにエンターキーによる改行で文字列が改行されることはありません。

ジョブサポートのフロントエンド(HTML5・CSS・JavaScript)講座でも指導していますが、長い文字列はコードの読みにくさにもつながります。改行は適度に行う必要があるでしょう。

プログラミングによって改行方法は異なりますが、今回はJavaScriptに焦点を当てて改行方法について見ていきましょう。

OSによって使われる改行コードが異なる

OSごとに使われる文字コードや改行コードは異なります。OSごとの改行コードは次の通りです。

Windowsでは「\n」と打つと1行目の文字が消えてしまうだけの結果になってしまうことがあるので注意しましょう。

バックスラッシュの打ち方

「 \」はバックスラッシュと読みます。「バックスラッシュ」と打っても変換はされません。

具体的な方法ですが、欧文フォントであれば半角の「￥」を押すと「\」に変換されるので、まずそちらから確認しましょう。

IMEを半角モードにしてキーボードの 「ろ」キーを押すという方法もありますが、基本的にはプログラミングでは欧文フォントを使う方が簡単です。欧文フォントに設定を変更することで対応しましょう。

■関連記事

JavaScriptにおける引数の基本的考え方と関数への渡し方

改行コードの使用例

改行コードの使用について、実際のコードをみながら解説していきます。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら

confirm、alertダイアログ

confirmダイアログとalertダイアログは、確認を促すことを目的としたダイアログです。confirmダイアログは「はい／いいえ」をユーザーが選択できるダイアログ、alertはできないものと覚えておきましょう。

ホームページを移動する際に「今のページから移ってしまってもよろしいですか？」などの表示を見たことがあるでしょう。あのメッセージはこれらのダイアログの働きによるものです。

この2つは働きも書き方もよく似ています。

confirm(確認の内容);

alert(確認の内容);

という記述で、メッセージ内容を指定します。

confirm("別のサイトへ移動します。\nよろしいですか？");

このように記載すると、メッセージは以下のように表示されます。

別のサイトへ移動します。
　よろしいですか？

改行コードを置換するreplace

文字列の改行コードを残したまま置換するには「replaceメソッド」を使います。書き方は以下の通りです。

var str = "おはようございます。\n いい天気ですね";
var comment = str.replace( '\n', '' );
console.log(comment);

これは2行目の「var comment～」で「\n」を空白に置き換えるという命令をしています。replaceメソッドは便利なので覚えておくと良いでしょう。

■関連記事

JavaScriptの戻り値とは？基本ルールを丁寧に解説

改行されないときの対処法

「\n」を記載しているのに改行されないばかりか、「\n」が出力された文章に記述されてしまうこともあります。そのような場合の対処法について解説しましょう。

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

HTMLとしての改行はbrタグに置き換え

ホームページの記述などに使うマークアップ言語「HTML」では、改行に「br」というタグを使います。ホームページのコードを記載していて「\n」がそのまま表示されている場合は、「br」に置き換えなければなりません。

あるいは別の方法として、コードの中に<script>タグを埋め込むという方法もあります。<script>は、タグの範囲内でJavaScriptを使用するための命令文です。

HTMLとJavaScriptは同じ場所で記載することがあるため、書き方に気をつけましょう。

PHPに書く場合は\\nを利用する

PHP内に記述する場合、\nではエディタによって表示がおかしくなることがあります。そのため、\\nという書き方を利用しましょう。

<?php echo '<script type="text/javascript">alert("別のページに飛びます。\\n確認してください");</script>'; ?>

このように使いますので、覚えておきましょう。

■関連記事

基礎から学ぶJavaScript研修。プランやカリキュラム解説

便利なテンプレートリテラル

テンプレートリテラルの使い方についても覚えておきましょう。

わざわざ「\n」などの改行タグを使わなくても、テキストと同じ要領で改行することができます。

若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

バッククオートを使って改行

テンプレートリテラルの使い方はシンプルです。従来、文字列などを記述するのには「"」や「'」を使っていましたが、これを「`」（バッククオート）にするだけです。

var comment = "おはようございます。\n いい天気ですね";

var comment = `おはようございます。
いい天気ですね`;

上記2つの文章は、同じ内容で出力されます。

バッククオートの打ち方

バッククオートの打ち方は下記の通りです。

• Mac…USキーボードの場合は[ Option ] ＋ [ ~ ]、JISキーボードの場合は [ Shift] ＋ [ @ ]
• Windows…[ Shift] ＋ [ @ ]

■関連サイト

新人SEに必要な研修とは。基本を抑えスキルレベルの差を埋める

改行の表現を覚え上手に使いこなそう

文字列の改行はプログラム言語によって異なります。JavaScriptの場合は「\n」を使うのが一般的な改行です。HTMLやPHPと同じ場所に記述する場合は、それぞれの改行方法と混同しないように気をつけましょう。

また、テキストのように改行できるテンプレートリテラルを覚えておくと便利です。改行することでコードを見やすくして、エラーの発生防止などにつなげることができます。

学歴、学部による「IT知識」「基礎知識」の格差を無くす個別指導の新人研修プロエンジニア育成コース(Java2・3ヶ月コース)はこちら