モダンな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);

結果：