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 (関連する情報)
- Template literals (Template strings) - MDN Web Docs
- TypeScript Handbook: Template Strings - 公式TypeScriptハンドブック