JavaScriptにおけるマルチライン文字列

• テンプレートリテラルを使用する方法
• エスケープ文字を使用する方法
• 文字列連結を使用する方法
• 実用例
• まとめ

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

テンプレートリテラル（Template Literals）は、ES6（ECMAScript 2015）で導入された機能で、バッククォート (`) を使用してマルチライン文字列を簡単に作成できます。 改行がそのまま文字列に含まれるため、コードが読みやすくなります。

// テンプレートリテラルの例
const multilineString = `これは
マルチラインの
文字列です。`;

console.log(multilineString);
    

テンプレートリテラル内では、${} を使って変数や式を埋め込むこともできます。

// 変数埋め込みの例
const name = "太郎";
const greeting = `こんにちは、${name}さん！
今日は良い天気ですね。`;

console.log(greeting);
    

エスケープ文字を使用する方法

テンプレートリテラルを使わない場合、エスケープ文字 \n を使用して改行を表現することができます。 ただし、この方法ではコードがやや読みにくくなる場合があります。

// エスケープ文字を使ったマルチライン文字列
const multilineString = "これは\nマルチラインの\n文字列です。";

console.log(multilineString);
    

JavaScriptでは、\n が改行、\t がタブ文字を表します。

文字列連結を使用する方法

マルチライン文字列を作るもう1つの方法として、複数の文字列を + 演算子で連結する方法があります。 この方法は古いJavaScriptのバージョンでも使用可能ですが、可読性に欠けます。

// 文字列連結を使ったマルチライン文字列
const multilineString = "これは" +
    "マルチラインの" +
    "文字列です。";

console.log(multilineString);
    

この方法では、各行を明示的に + でつなぐ必要があり、行末に注意が必要です。

実用例

マルチライン文字列は、以下のようなシナリオで役立ちます。

• HTMLやCSSなどのコードを文字列として埋め込む場合
• 長いメッセージや通知文を表示する場合
• 設定ファイルやJSONのテンプレートを作成する場合

// HTMLを埋め込む例
const htmlContent = `
    <div class="container">
        <h1>タイトル</h1>
        <p>これはマルチライン文字列を使用したHTMLです。</p>
    </div>
`;

console.log(htmlContent);
    

// 長いメッセージの例
const message = `お知らせ:
本日はシステムメンテナンスのため、
一部のサービスがご利用いただけません。
ご迷惑をおかけして申し訳ありません。`;

console.log(message);
    

まとめ

JavaScriptでマルチライン文字列を作成するには、主に以下の3つの方法があります。

1. テンプレートリテラルを使用する
2. エスケープ文字を使用する
3. 文字列連結を使用する

近年では、テンプレートリテラルを使用する方法が主流となっており、可読性や利便性に優れています。 シナリオに応じて最適な方法を選択してください。