TypeScript:
文字列の補間

How to: (やり方)

let user = 'Yamada';
let message = `こんにちは、${user}さん!`;
console.log(message); // "こんにちは、Yamadaさん!"

let price = 1500;
let taxRate = 0.1;
let total = `合計: ${price * (1 + taxRate)}円`;
console.log(total); // "合計: 1650円"

上のコードはテンプレートリテラル(バッククォートで囲む)を使っています。変数や式を${}で囲むとその値が文字列に挿入されます。

Deep Dive (探求)

文字列補間はECMAScript 2015 (ES6)で導入されました。それ以前は、プラス記号を使用して文字列を連結する必要がありました。

// ES5以前の例
let user = 'Yamada';
let message = 'こんにちは、' + user + 'さん!';
console.log(message);

テンプレートリテラルの利点は可読性が高く、複数行の文字列も簡単に扱える点です。また、関数を埋め込むこともできます。

function totalPrice(price: number, taxRate: number): string {
  return `合計: ${price * (1 + taxRate)}円`;
}

console.log(totalPrice(1500, 0.1)); // "合計: 1650円"

さらに、タグ付きテンプレートリテラルを使えば、補間される値の処理方法をカスタマイズすることもできます。

See Also (関連する情報)