のべラボ.blog

謙虚に、臆せず、さぼらずにブログを書く

モダンなJavaScriptのお勉強:テンプレート文字列編

今回は、テンプレート文字列を試してみます。

ES2015から、テンプレート文字列を使用して、文字列を構成できるようになっています。

例えば文字列を連結する場合、従来は次のような方法で行っていました。

const firstName = "のべ";
const lastName = "てつお";
const address = "京都";
const  printFormat="氏名: " +  firstName + " " +  lastName + "\n" + "住所: " + address;
console.log(printFormat);

結果:

氏名: のべ てつお
住所: 京都 

テンプレート文字列を使うと、次のように記述できます。

const firstName = "のべ";
const lastName = "てつお";
const address = "京都";
const  printFormat= `氏名: ${firstName} ${lastName} \n住所: ${address}`;
console.log(printFormat);

結果:

氏名: のべ てつお 
住所: 京都

同じ結果にできましたね。 テンプレート文字列では、 ` つまりバッククォートで文字列を囲みますが、その中の ${ } で囲んだ部分には JavaScript の変数や処理結果を埋め込むことができます。

上の例の ${firstName} では、firsrName 変数を埋め込んでいるのでその値が出力できます。

たくさんの + 演算子を使って連結するよりもシンプルで、可読性も向上できそうですね。

${ } で囲んだ部分には JavaScriptの処理も書けるので、試しに次のようなコードを実行してみましたが、期待通り 1100円と出力できました。

function getTaxRate() {
    return 0.1;
}

const productPrice = 1000;
const  priceFormat= `税込み価格 ${productPrice + (productPrice * getTaxRate())} 円`;
console.log(priceFormat);

結果:

税込み価格 1100 円

まとめ

  • テンプレート文字列を使うことで、+ 演算子を用いた文字列の連結によりもシンプルで読みやすいコードを記述できます。
  • テンプレート文字列は、` (バッククォート)で囲みます。この中で、${ }で囲まれた部分には JavaScriptを記述し、変数や動的な値を出力できます。