JavaScriptメモ: テンプレート文字列の機能で文字列リテラル内の変数を展開する (template literal)

テンプレート文字列内で変数展開する

文字列を定義する時に、シングルクォートやダブルクォートの代わりに、バッククォート (`) で囲むと、その文字列リテラルはテンプレート文字列 (template literal) とみなされ、内部で変数や式の評価を行うことができるようになります。

テンプレート文字列内で式の評価を行いたい部分は、${ と } で囲みます。

const name = 'Maku';
const msg = `I am ${name}`;  //=> 'I am Maku'

上記は単純な変数展開を行う例ですが、次のように内部で演算を行ったり、関数呼び出しを行ったりすることもできます。

const a = 1;
const b = 2;
const msg = `1 + 2 = ${a + b}`;  //=> '1 + 2 = 3'

複数行に渡る文字列を定義する

テンプレート文字列の定義の中で改行を行うことで、複数行に渡る文字列を定義することができます。 コード上で行った改行は、そのまま改行コードとして文字列の中に含められます。

const msg = `This is a long
long long long long long
long long long long text.`;

console.log(msg);

This is a long
long long long long long
long long long long text.

シングルクォートやダブルクォートで囲んで定義する文字列リテラルの中で改行を表現するには、次のように、明示的に改行文字 (\n) を含める必要があります。

const msg = "This is a long\n" +
    "long long long long\n" +
    "long long long text.";