JavaScriptのテンプレートリテラル（テンプレート文字列）の使い方

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

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

従来の文字列結合では、プラス記号（+）を使って変数をつなげる必要がありました。 しかしテンプレートリテラルを使うと、変数を直接文字列に埋め込めるので、読みやすく簡単に書けます。

const name = "太郎";
const age = 20;

// 従来の書き方
console.log("私の名前は" + name + "です。年齢は" + age + "歳です。");

// テンプレートリテラルを使った書き方
console.log(`私の名前は${name}です。年齢は${age}歳です。`);

私の名前は太郎です。年齢は20歳です。
私の名前は太郎です。年齢は20歳です。

このように${}内に変数や式を書くことで、文字列の中に動的に値を挿入できます。

2. 計算結果を文字列に埋め込む

2. 計算結果を文字列に埋め込む

テンプレートリテラルでは変数だけでなく、計算式や関数の戻り値も埋め込めます。 例えば、合計値を文字列に表示したい場合に便利です。

const a = 5;
const b = 10;

console.log(`合計は${a + b}です。`);

合計は15です。

文字列と数値を簡単に組み合わせられるので、計算結果を表示するのもスムーズです。

3. 複数行の文字列を作成する

3. 複数行の文字列を作成する

テンプレートリテラルの大きな特徴のひとつに、複数行の文字列を簡単に作れることがあります。 従来は改行を\nで書く必要がありましたが、バッククオートを使うだけでそのまま改行できます。

const message = `こんにちは
私の名前は太郎です
よろしくお願いします`;
console.log(message);

こんにちは
私の名前は太郎です
よろしくお願いします

このように複数行の文字列を見やすく書けるのもテンプレートリテラルの魅力です。

4. 式を埋め込むときの注意点

4. 式を埋め込むときの注意点

${}内には任意のJavaScriptの式を入れられますが、文字列以外の型も自動で文字列に変換されます。 配列やオブジェクトを埋め込む場合は、意図しない表示になることがあります。

const obj = {name: "太郎", age: 20};
console.log(`オブジェクトの内容は${obj}です。`);

オブジェクトの内容は[object Object]です。

オブジェクトを文字列として表示したい場合はJSON.stringify()を使うと見やすくなります。

console.log(`オブジェクトの内容は${JSON.stringify(obj)}です。`);

オブジェクトの内容は{"name":"太郎","age":20}です。

5. テンプレートリテラルの活用例

5. テンプレートリテラルの活用例

テンプレートリテラルは、HTML生成やログ出力、メール文面の作成など様々な場面で活躍します。 文字列結合の煩雑さを解消し、読みやすく保守しやすいコードを書くことができます。

const user = {name: "太郎", points: 150};
const html = `<div class="user-card">
  <h2>${user.name}</h2>
  <p>ポイント: ${user.points}</p>
</div>`;
console.log(html);

<div class="user-card">
  <h2>太郎</h2>
  <p>ポイント: 150</p>
</div>

このようにテンプレートリテラルを使えば、変数を埋め込んだHTMLや文章も簡単に作成できます。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

JavaScriptのテンプレートリテラルとは何ですか？初心者でもわかるように教えてください

JavaScriptのテンプレートリテラルとは、バッククオートで囲んだ文字列のことで、変数や計算結果を簡単に埋め込める便利な機能です。従来の文字列結合よりもシンプルで読みやすく、初心者にもおすすめの書き方です。