JavaScript - 変数展開できる! テンプレート文字列

ES2015からテンプレート文字列という便利な機能が使えるようになりました。

何が一番便利かというと、JavaScriptではこれまで出来なかった変数展開が出来ることです。

他にも複数行文字列の記述や、計算もできるのですが、一番使用頻度が高いのは変数展開ですね。

変数展開のサンプルコード

さっそく変数展開のサンプルコードを紹介します。

「〇〇さん、こんにちは」と表示します。〇〇の部分が変数部分です。

これまでのやり方と、テンプレート文字列を使ったやり方を比較してみます。

var str = '田中';

// これまでのやり方
console.log(name + 'さん、こんにちは'); // 田中さん、こんにちは


// テンプレート文字列を使った変数展開
console.log(`${name}さん、こんにちは`); // 田中さん、こんにちは

テンプレート文字列はバッククォートで囲みます「``」。

そしてテンプレート文字列の中にプレースホルダー「${}」を含めます。 プレースホルダーはドル記号「$」と波括弧「{}」です。

上のサンプルコードでは展開する変数が１つですが、 これが２つ、３つと増えるほど、テンプレート文字列の便利さが実感できます。

次は２つの変数展開の場合です。

var str = 'リンゴ';
var price = 100;

// これまでのやり方
console.log(str + 'の価格は ' + price + ' 円です。') // リンゴの価格は 100 円です

// テンプレート文字列
console.log (`${str}の価格は ${price} 円です。`) // リンゴの価格は 100 円です

これまでのように「+」で文字連結をする必要がありません。

複数行文字列

テンプレート文字列では「\n」記号を使うことなく、複数行文字列を表すことができます。

これまでの方法では、改行コード「\n」を改行箇所に入れる必要がありました。

// これまでの方法 3行の文字列
str = '1行目\n'
    + '2行目\n'
    + '3行目' ;

テンプレート文字列では、改行コード「\n」を入れる必要がありません。 テンプレート文字列内での改行が改行コード「\n」として認識されます。

// テンプレート文字列 3行の文字列
str = `1行目
2行目
3行目`;

console.log(str) の結果はどちらも同じように表示されます。

// console.log(str)の結果

1行目
2行目
3行目

計算式も入れることができる

プレースホルダー内「${}」に変数ではなく、計算式を入れることもできます。 「${a + b}」のような記述です。

下のサンプルコードは2つの変数を足した値を表示します。

var a = 1;
var b = 2;

// これまでの方法
console.log('計算結果は ' + (a + b) + ' です。');

// テンプレート文字列
console.log(`計算結果は ${a + b} です。`);

このように計算式も入れることができます。

テンプレート文字列は便利な機能なのでぜひ使ってみてください。