今日は、ES6（ECMAScript 2015）から導入された新しい文字列の書き方「テンプレートリテラル」を学びました。これを使うと、文字列の中に変数や定数を簡単に埋め込むことができます。
テンプレートリテラルとは
テンプレートリテラルは、文字列の中に変数や定数を埋め込める新しい記法です。
構文: `文字列 ${変数名} 文字列`
const name = '太郎';
const age = 25;
console.log(`私の名前は${name}です。年齢は${age}歳です。`);
// 私の名前は太郎です。年齢は25歳です。
クォーテーションの種類（全3種類）
JavaScriptには3種類のクォーテーションがあります。
| 種類 | 記号 | 用途 |
|---|---|---|
| シングルクォーテーション | ' | 通常の文字列 |
| ダブルクォーテーション | " | 通常の文字列 |
| バッククォーテーション | ` | テンプレートリテラル |
// シングルクォーテーション
console.log('こんにちは');
// ダブルクォーテーション
console.log("こんにちは");
// バッククォーテーション（テンプレートリテラル）
const name = '太郎';
console.log(`こんにちは、${name}さん`);
テンプレートリテラルの書き方
基本構文
- 文字列全体をバッククォーテーション
`で囲む - 変数や定数を埋め込む部分は
${変数名}と書く
const price = 500;
const quantity = 3;
console.log(`合計金額は${price * quantity}円です`);
// 合計金額は1500円です
${} の中では、計算式を書くこともできます。
従来の方法（+ による連結）との比較
const name = '太郎';
const age = 25;
// ❌ 従来の方法（複雑で読みにくい）
console.log('私の名前は' + name + 'です。年齢は' + age + '歳です。');
// ✅ テンプレートリテラル（シンプルで読みやすい）
console.log(`私の名前は${name}です。年齢は${age}歳です。`);
テンプレートリテラルを使うと、+ で文字列を連結する必要がなくなり、コードがスッキリします。
テンプレートリテラルのメリット
1. 可読性が高い
const item = 'りんご';
const price = 120;
// 従来の方法
console.log(item + 'は' + price + '円です');
// テンプレートリテラル
console.log(`${item}は${price}円です`);
どこに変数が入るか一目瞭然です。
2. 計算式も埋め込める
const price = 500;
const taxRate = 0.1;
console.log(`税込価格: ${price * (1 + taxRate)}円`);
// 税込価格: 550円
3. 改行も簡単
テンプレートリテラルでは、改行もそのまま書けます。
const message = `こんにちは
今日はいい天気ですね
よろしくお願いします`;
console.log(message);
// こんにちは
// 今日はいい天気ですね
// よろしくお願いします
従来の方法では \n を使う必要がありましたが、テンプレートリテラルならそのまま改行できます。
注意点：バッククォーテーションを使う
テンプレートリテラルを使うには、必ずバッククォーテーション ` で囲む必要があります。
const name = '太郎';
// ❌ シングルクォーテーションだと動かない
console.log('こんにちは、${name}さん');
// こんにちは、${name}さん（そのまま表示される）
// ✅ バッククォーテーションが必須
console.log(`こんにちは、${name}さん`);
// こんにちは、太郎さん
Pythonとの比較
Pythonにも同様の機能があります（f-string）。
# Python（f-string）
name = '太郎'
age = 25
print(f'私の名前は{name}です。年齢は{age}歳です。')
// JavaScript（テンプレートリテラル）
const name = '太郎';
const age = 25;
console.log(`私の名前は${name}です。年齢は${age}歳です。`);
書き方は似ていますが、JavaScriptでは $ が必要という点が違います。
今日の学びのポイント
- テンプレートリテラル = 文字列の中に変数を埋め込める
- バッククォーテーション
`で囲む（必須） ${変数名}で変数や定数を埋め込む- クォーテーションは3種類：
'"` - メリット：可読性が高い、計算式も書ける、改行も簡単
- ES6（2015年）から導入された新しい記法
テンプレートリテラルは、現代のJavaScript開発では標準的に使われています。文字列に変数を埋め込むときは、積極的に使っていきましょう。
コメント