JavaScriptの改行文字とは

JavaScriptの改行文字について

JavaScriptにおける改行文字は、\n (バックスラッシュとn) です。

この文字は、テキストを複数行に渡って表示する際に、行の終わりと次の行の始まりを区切るために使用されます。

例:

const multilineText = "This is the first line.\nThis is the second line.";

console.log(multilineText);

このコードを実行すると、以下のように表示されます。

This is the first line.
This is the second line.

ここで、\n が改行を指示しているため、テキストは2行に分かれて表示されます。

注意

• テンプレートリテラル
  テンプレートリテラルを使用する場合、改行文字をそのまま記述することができます。
• 異なるプラットフォームでの改行文字
  Windowsでは\r\n、Unix/Linuxでは\n、macOSでは\rが伝統的に使用されています。しかし、JavaScriptでは\nが標準の改行文字です。

const templateLiteralText = `This is the first line.
This is the second line.`;

console.log(templateLiteralText);

このコードも同様に2行のテキストを表示します。

JavaScriptの改行文字に関するコード例

文字列の直接指定

const textWithNewline = "This is the first line.\nThis is the second line.";

console.log(textWithNewline);

このコードでは、文字列内に直接\nを挿入することで、改行を表現しています。

テンプレートリテラルの使用

const templateLiteralText = `This is the first line.
This is the second line.`;

console.log(templateLiteralText);

テンプレートリテラルを使用すると、改行をそのまま記述することができます。

JavaScriptの組み込み関数String.fromCharCode()

const newlineCharacter = String.fromCharCode(10);
const textWithNewline = "This is the first line." + newlineCharacter + "This is the second line.";

console.log(textWithNewline);

String.fromCharCode()は、指定したUnicodeコードポイントから文字を生成します。\nのUnicodeコードポイントは10なので、これを指定して改行文字を取得しています。

HTMLの<br>タグ

<p>This is the first line.<br>This is the second line.</p>

HTMLの<br>タグは、改行を挿入するために使用されます。JavaScriptからHTMLを生成する場合、このタグを利用することもできます。

const htmlString = "This is the first line.<br>This is the second line.";
document.getElementById("myDiv").innerHTML = htmlString;

CSSのwhite-spaceプロパティ

CSSのwhite-spaceプロパティを使用して、テキストの空白文字の処理方法を制御することができます。pre-wrap値を設定すると、改行文字を尊重しつつ、必要に応じてテキストを折り返します。

.pre-wrap-text {
  white-space: pre-wrap;
}

<div class="pre-wrap-text">
  This is the first line.
  This is the second line.
</div>

JavaScriptのreplace()メソッド

replace()メソッドを使用して、文字列内の特定の文字を別の文字に置き換えることができます。改行文字を別の文字に置き換えて、異なる表示効果を実現することも可能です。

const textWithLineBreak = "This is the first line.\nThis is the second line.";
const textWithHTMLBreak = textWithLineBreak.replace(/\n/g, "<br>");

console.log(textWithHTMLBreak);

split()メソッドを使用して、文字列を指定した区切り文字で分割することができます。改行文字を区切り文字として使用することで、各行を個別の要素として扱うことができます。

const textWithNewlines = "This is the first line.\nThis is the second line.";
const lines = textWithNewlines.split("\n");

console.log(lines);