JavaScriptのテンプレートリテラル

プログラムはできるだけシンプルに分かりやすく記述することで、バグや認識違いを少なくすることができます。

JavaScriptのテンプレートリテラルは、文字列と数式の組み合わせをシンプルに記述することができて、認識違いを少なくできる手法の1つです。

本記事では、JavaScriptのテンプレートリテラルについて解説します。

記事内に記載しているプログラムは、Node.js14.14.0を使って動作確認をしています。

JavaScriptのテンプレートリテラル
まとめ

JavaScriptのテンプレートリテラル

JavaScriptのテンプレートリテラルについて、以下の内容を解説します。

JavaScriptのテンプレートリテラルとは
テンプレートリテラルの基本形
テンプレートリテラルへの式の挿入
テンプレートリテラル内のエスケープ
タグ付きテンプレート

JavaScriptのテンプレートリテラルとは

テンプレートリテラルとは、文字列の中で変数などの式を扱うことができる文字列リテラルです。
複数行の文字列や文字列挿入機能を使用することができます。

他の言語ではヒアドキュメントと呼ばれたりしており、JavaScriptでは、ECMAScript 2015 (ES 6)から導入されました。

テンプレートリテラルを使うことで、文字列と式の結合を簡潔に記述出来ることが最も大きなメリットとなります。

テンプレートリテラルの基本形

テンプレートリテラルを使用するには、対象となる文字列をバッククォートで括ります。

s = `Hello JavaScript`;
console.log(s); // -> Hello JavaScript

またテンプレートリテラルは、複数行の文字列を改行を含んで、見たままの文字列として扱うことができます。

s = `Hello
JavaScript`;
console.log(s);

上記のプログラムの結果は、改行された文字列がそのまま表示されます。

Hello
JavaScript

テンプレートリテラルへの式の挿入

テンプレートリテラルには、変数や計算式などの式を含めることができます。

s = "JavaScript";
console.log(`Hello ${s}`); // -> Hello JavaScript

上記のプログラムでは、変数sの文字列をテンプレートリテラル内で、${}で記述することで参照しています。
以下のような計算をすることもできます。

s = `1 + 1 = ${1 + 1}`;
console.log(s); // -> 1 + 1 = 2

この他にも、関数を呼び出すなどの様々な式を入れることができます。

テンプレートリテラル内のエスケープ

テンプレートリテラル内では、$や{}などは特殊文字として扱われます。
これらを文字として扱うには、バックスラッシュでエスケープする必要があります。

s = `Hello \$ JavaScript`;
console.log(s); // -> Hello $ JavaScript

バックスラッシュ自体を文字として扱うには、バックスラッシュを重ねます。

s = `Hello \\ JavaScript`;
console.log(s); // -> Hello \ JavaScript

エスケープを忘れてしまうと予期せぬ動作をすることがあります。
これを防止する方法として、後述するタグ付きテンプレートのString.rawを利用することで、エスケープを意識することなく文字として扱うことができます。

s = String.raw`Hello \ JavaScript`;
console.log(s); // -> Hello \ JavaScript

タグ付きテンプレート

タグ付きテンプレートとは、テンプレートリテラルの前に関数を指定して、テンプレートリテラルの解析を行うことが出来るというものです。
先程のString.rawは、raw関数によってテンプレートリテラルで指定された文字列を、そのまま文字列として扱っていました。

上記のString.rawに当たる部分をタグと呼び、指定する関数は独自に作成した関数でも可能です。

function convUpper(str) {
    return str[0].toUpperCase();
}
s = convUpper`JavaScript`;
console.log(s); // -> JAVASCRIPT

上記のプログラムでは、convUpper関数を作成し、テンプレートリテラル内の文字列を大文字に変換して返しています。
テンプレートリテラル内の文字列は、タグで指定された関数に以下のような形で渡されます。

function func(str, ...args) {
    console.log(str); // -> [ 'Hello ', '!!' ]
    console.log(args); // -> [ 'JavaScript' ]
}
lang = "JavaScript";
s = func`Hello ${lang}!!`;
console.log(s); // -> undefined

上記の関数funcでは、第1引数をstr、第2引数以降をまとめてargsに格納しています。
テンプレートリテラルで指定されると、第1引数に式で分割された文字列が配列となって渡され、式の展開結果が第2引数以降に渡されます。
上記のfuncでは、最後に戻り値を返していないので、テンプレートリテラルの結果はundefinedとなります。

function func2() {
    return "JavaScript";
}
s = func2`abc`;
console.log(s); // -> JavaScript

lang = "JavaScript";
s = func2`Hello ${lang}!!`;
console.log(s); // -> JavaScript

上記のプログラムでは、func2で戻り値を返していますが、テンプレートリテラル内の文字列は使用せずに固定の文字列を返しているため、結果は常に戻り値通りとなります。

タグ付きテンプレートは、HTMLタグのサニタイズなど、文字列を決まった形に変換したい処理などでラップしたい場合に、便利な機能となります。