JavaScriptで文字列に改行やタブを含める方法

JavaScriptには、文字列に改行やタブを含めるための特殊な文字があります。この記事では、それらの使い方について解説します。

JavaScriptで文字列に改行やタブを含めるにはどうしたらいいですか？

JavaScriptで書い改行やタブなどの特殊文字を含めたい場合、エスケープシーケンスという特殊文字を利用します。

文字列に改行とタブを含める

　JavaScriptでは、文字列中に特殊な文字を含める場合、エスケープシーケンスと呼ばれる特殊な文字を使用します。

改行を含めるには、文字列中に改行コード \n を挿入します。

var str = “Hello,\nWorld!”;

タブを含めるには、文字列中にタブコード \t を挿入します。

var str = “Hello,\tWorld!”;

ただし、JavaScriptでは、改行やタブを含めた文字列をHTMLで表示すると、そのままでは改行やタブが反映されません。そのため、HTMLで改行やタブを反映させるには、次のようにします。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScriptで文字列に改行を含める方法</h1>

<p id="demo">ここに文字列が出力されます。</p>

<script>
    var str = "Hello,\nWorld\t!";
    document.getElementById("demo").innerHTML = str.replace(/\n/g, "<br>")
                                                    .replace(/\t/g, "    ");
</script>

</body>
</html>

改行を反映させるには、HTMLの文書内で<br>タグを使用します。

上記の例では、str.replace(/\n/g, "<br>")を使用して、文字列中にある改行を、HTMLの<br>タグに置き換えています。

また、str.replace(/\t/g, "    ")を使用して、文字列中にあるタブを、HTMLの  (ノンブレイキングスペース) に置き換えています。

CHECK

innerHTMLは、HTML要素の中のHTMLコードを取得したり、設定したりするためのプロパティです。

innerHTMLを使用することで、HTML要素の中のHTMLコードを取得したり、設定したりすることができます。HTML要素の中には、HTMLコードだけでなく、テキストや画像などを含むことができます。

主なエスケープシーケンス文字列について

　JavaScriptでは、文字列中に特殊な文字を含める場合、エスケープシーケンスと呼ばれる特殊な文字を使用します。エスケープシーケンスを使用することで、文字列中でも特殊な文字の機能を無効にすることができます。

以下に、JavaScriptで使用できるエスケープシーケンスの一覧を示します。

エスケープシーケンス	意味
\	バックスラッシュを表す
‘	シングルクォーテーションを表す
“	ダブルクォーテーションを表す
\n	改行を表す
\t	タブを表す
\b	バックスペースを表す
\f	改ページを表す
\r	キャリッジリターンを表す

主に利用するエスケープシーケンス

テンプレートリテラルを使用する方法

テンプレートリテラルを使用すると、バッククォート（`）で文字列を囲むことができます。テンプレートリテラル内では、改行やタブなどの特殊文字を直接入力することができます。以下は例です。

// テンプレートリテラルを使用して、改行やタブを含む文字列を作成
const multilineString = `行1
行2
行3`;
console.log(multilineString);

const tabbedString = `列1\t列2\t列3`;
console.log(tabbedString);

上記のコードを実行すると、以下のように出力されます。

行1
行2
行3
列1    列2    列3

String.raw()を使用する方法

String.raw()メソッドを使用すると、エスケープシーケンスを無視して文字列を作成できます。以下は例です。

// String.raw()を使用して、改行やタブを含む文字列を作成
const multilineString = String.raw`行1\n行2\n行3`;
console.log(multilineString);

const tabbedString = String.raw`列1\t列2\t列3`;
console.log(tabbedString);

上記のコードを実行すると、以下のように出力されます。