JavaScript: 改行文字、連結演算子、テンプレートリテラルを使った複数行の文字列作成

JavaScriptで複数行の文字列を作成する方法

従来の方法では、以下の2つの方法で複数行の文字列を作成できます。

改行文字を使用する

文字列内に改行文字 (\n) を挿入することで、複数行に分割できます。

const message = "こんにちは、世界！\n" +
                "これは複数行の文字列です。";

console.log(message); // こんにちは、世界！
                      // これは複数行の文字列です。

連結演算子を使用する

複数の文字列を連結演算子 (+) で連結することで、複数行の文字列を作成できます。

const message = "こんにちは、世界！" + " " +
                "これは複数行の文字列です。";

console.log(message); // こんにちは、世界！ これは複数行の文字列です。

テンプレートリテラル

ES6で導入されたテンプレートリテラルは、より簡潔で分かりやすく複数行の文字列を作成できます。

const message = `こんにちは、世界！

これは複数行の文字列です。`;

console.log(message); // こんにちは、世界！

// これは複数行の文字列です。

テンプレートリテラルは、以下の特徴を持ちます。

• バッククォート (`) で囲む
• 改行文字やインデントをそのまま反映
• 変数や式を埋め込むことができる

その他の方法

• heredoc: 特殊な構文を使用して、複数行の文字列を記述する方法
• スクリプトファイル: 複数行の文字列を外部ファイルに記述し、読み込む方法

これらの方法は、特殊な用途で使用されることが多いです。

JavaScriptで複数行の文字列を作成するには、いくつかの方法があります。それぞれの特徴と使い分けを理解し、状況に応じて適切な方法を選択することが重要です。

従来の方法

改行文字を使用する

const message = "こんにちは、世界！\n" +
                "これは複数行の文字列です。";

console.log(message); // こんにちは、世界！
                      // これは複数行の文字列です。

連結演算子を使用する

const message = "こんにちは、世界！" + " " +
                "これは複数行の文字列です。";

console.log(message); // こんにちは、世界！ これは複数行の文字列です。

テンプレートリテラル

const message = `こんにちは、世界！

これは複数行の文字列です。`;

console.log(message); // こんにちは、世界！

// これは複数行の文字列です。

heredoc

const message = <<<'EOD'
こんにちは、世界！

これは複数行の文字列です。

EOD;

console.log(message); // こんにちは、世界！

// これは複数行の文字列です。

スクリプトファイル

// script.js

const message = "こんにちは、世界！";

// index.html

<script src="script.js"></script>

<script>
console.log(message); // こんにちは、世界！
</script>

他の方法

const message = <<<'EOD'
こんにちは、世界！

これは複数行の文字列です。

EOD;

console.log(message); // こんにちは、世界！

// これは複数行の文字列です。

heredocは、以下の特徴を持ちます。

• 文字列の前に <<< と終端文字を記述

heredocは、テンプレートリテラルが登場する以前によく使用されていましたが、現在はあまり使われていません。

スクリプトファイル

// script.js

const message = "こんにちは、世界！";

// index.html

<script src="script.js"></script>

<script>
console.log(message); // こんにちは、世界！
</script>

• ファイルの読み込みに時間がかかる
• ファイルの管理が煩雑になる

スクリプトファイルは、長文の文字列を扱う場合や、複数のファイルで同じ文字列を使用する場合に有効です。

上記以外にも、以下のような方法があります。

• String.prototype.replace() メソッドを使用する
• String.prototype.split() メソッドと Array.prototype.join() メソッドを使用する