今回はJavaScriptのテンプレートリテラルについて学んでいきましょう。

テンプレートリテラルって何？

テンプレートリテラルとは、文字列を簡単に作るための方法です。普通の文字列はシングルクォート (') やダブルクォート (") で囲いますが、テンプレートリテラルはバッククォート (`) で囲みます。

バッククォートの使い方

バッククォートはキーボードの左上、エスケープキーの下にある ` キーです。このキーを使ってテンプレートリテラルを書きます。

let message = `こんにちは、みんな！`;
console.log(message); // こんにちは、みんな！

変数を埋め込もう

テンプレートリテラルのすごいところは、変数や式を簡単に埋め込めることです。${}を使って変数を埋め込みます。

let name = "太郎";
let greeting = `こんにちは、${name}さん！`;
console.log(greeting); // こんにちは、太郎さん！

文字列の中に計算を入れる

テンプレートリテラルでは、変数だけでなく、計算結果も埋め込むことができます。

let price = 100;
let tax = 10;
let total = `合計金額は${price + tax}円です。`;
console.log(total); // 合計金額は110円です。

複数行の文字列を簡単に書く

バッククォートを使うと、複数行の文字列も簡単に書けます。これで読みやすいコードが書けると思います。

let multiline = `
こんにちは、
みんな！
これは複数行の
文字列です。
`;
console.log(multiline);

まとめ

テンプレートリテラルを使うと、文字列操作がとても楽になります。

• バッククォートで囲む
• 変数や計算を${}で埋め込む
• 複数行の文字列が簡単に書ける