JavaScript - 複数行の文字列、3つの方法

JavaScriptで文字列を定義するときに、複数行で文字列を定義する方法を紹介します。

1. +で複数の文字列を連結する

最も簡単な方法は、 +演算子を使用して複数の文字列を複数行で書いて連結することです。 +を続けて書くのが不便かもしれませんが、出力される内容を明確に定義するので直感的な方法です。

const str = 'Hello, ' +
    'World, ' +
    'JavaScript ' +
    '!!!';

console.log(str);

Output:

Hello, World, JavaScript !!!

行ごとに改行をしたい場合は、以下の例のように行ごとに改行文字である \n を追加してください。

const str = 'Hello, \n' +
    'World, \n' +
    'JavaScript \n' +
    '!!!';

console.log(str);

Output:

Hello,
World,
JavaScript
!!!

以下のようにBackslashと入力して、複数行の文字列を作成できます。改行するには改行文字を追加するだけです。

const str = 'Hello, \
World, \
JavaScript \
!!!';

console.log(str);

Output:

Hello, World, JavaScript !!!

注意すべき点は、コードを見やすくしようと、以下のように Tab を追加してソートすると、この Tab も文字列として認識されます。

const str = 'Hello, \
    World, \
    JavaScript \
    !!!';

console.log(str);

上記のコードの実行結果を見ると、文字列にTabが追加されました。このような部分を考慮して使用する必要があります。

Hello,     World,     JavaScript     !!!

Backtick（`）を使用して複数行の文字列を作成できます。注意すべき点は、改行で入力したエンターも文字列として認識されます。

const str = `Hello,
World,
JavaScript
!!!`;

console.log(str);

Output:

Hello,
World,
JavaScript
!!!

また、コードを読みやすくするためにTabを追加してコードをソートしても、Tabは文字列として認識されます。これらの部分を知って使用する必要があります。

const str = `Hello,
    World,
    JavaScript
    !!!`;

console.log(str);

Output:

Hello,
    World,
    JavaScript
    !!!