JavaScriptのテンプレートリテラルとは？変数埋め込みの使い方を解説

💡 この記事でわかること

テンプレートリテラルとは、
👉 バッククォート(`)で文字列を囲む書き方で、文字列の中に変数の値をすっきりと埋め込める機能です。

シングルクォート(')やダブルクォート(")と同じく文字列を作れますが、変数を埋め込みたいときや複数行の文字列を書きたいときに特に便利です。

💡 キーボードでバッククォートは、多くの配列だと数字の「1」キーの左隣にあります。シングルクォートと見た目が似ているので、最初は入力するキーを間違えないよう注意しましょう。

文字列の中に${変数名}と書くと、その部分が変数の値に置き換わります。

const name = "田中";
const age = 25;

const message = `${name}さん(${age}歳)`;
console.log(message); // "田中さん(25歳)"

👉 ${}の中には変数だけでなく、計算式や関数呼び出しなど、値を返すものであれば何でも書けます。

const price = 1200;
const taxRate = 0.1;

console.log(`税込価格: ${price * (1 + taxRate)}円`); // "税込価格: 1320円"

テンプレートリテラルの中では、改行をそのまま書くだけで複数行の文字列になります。

const message = `1行目です
2行目です
3行目です`;

console.log(message);
// 1行目です
// 2行目です
// 3行目です

👉 従来のシングル・ダブルクォートで複数行を表現するには、\nという改行文字を文字列の中に書く必要がありましたが、テンプレートリテラルなら見たままのレイアウトで書けます。

テンプレートリテラルがない場合、変数を含む文字列は+演算子でつなぎ合わせて作っていました。

// 従来の書き方(文字列結合)
const message1 = name + "さん(" + age + "歳)";

// テンプレートリテラルを使った書き方
const message2 = `${name}さん(${age}歳)`;

💡 変数の数が増えるほど、+演算子の書き方は引用符とプラス記号だらけになって読みづらくなります。テンプレートリテラルなら、埋め込みたい部分だけ${}で囲めばよいので見通しが良くなります。

${}による埋め込みは、バッククォートで囲んだ文字列の中でしか使えません。シングルクォートやダブルクォートの中に${}と書いても、ただの文字として表示されてしまいます。

const name = "田中";
console.log('${name}さん');  // "${name}さん"(そのまま文字として表示される)
console.log(`${name}さん`); // "田中さん"(正しく埋め込まれる)

コードを見やすくしようとテンプレートリテラルの途中で改行すると、その改行がそのまま文字列に含まれてしまいます。1行の文字列として書きたい場合は、途中で改行しないよう注意しましょう。

${}の中に別のテンプレートリテラルを書くことも可能ですが、複雑になりすぎるとかえって読みにくくなります。式が複雑になる場合は、先に変数や関数の戻り値として計算してから埋め込む方が分かりやすいコードになります。

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

変数を含む文字列を作る場面は非常に多いので、テンプレートリテラルは早めに使い慣れておくと、その後のコードがぐっと書きやすくなります。