文字列に変数を埋め込む

01 / 06

+ の連結は読みにくい

name + "は" + age + "さい" のように + が増えると、どこが文字でどこが変数か分かりにくくなる。

クォートの数を間違えるミスも起きやすい。

const name = "ゆい";const age = 12;console.log(name + "は" + age + "さい");

実行結果

ゆいは12さい

02 / 06

そこで使うのが バッククォート ` `。"` の代わりにこれで囲むと、文字列の中に変数を直接埋め込めるようになる。

埋め込みたい場所に ${変数名} と書くよ。

const name = "ゆい";const age = 12;console.log(`${name}は${age}さい`);

実行結果

ゆいは12さい

03 / 06

+ の連結と見比べると、完成した文の形がそのまま読めるのが分かるはず。

この書き方をテンプレートリテラルと呼ぶよ。

const item = "パン";const price = 150;console.log(`${item}は${price}円です`);

実行結果

パンは150円です

04 / 06

${} の中には変数だけでなく式も書ける。計算した結果がそのまま埋め込まれるよ。

const price = 200;const count = 3;console.log(`ごうけい${price * count}円`);

実行結果

ごうけい600円

05 / 06

` ` は '` (シングルクォート)とよく似ていて見分けにくい。別の記号なので気をつけよう。

スマホのキーボードでは、記号の一覧の中にあることが多いよ。この教材のエディタでは、キーボードの上に出る記号のボタンからも打てるようにしてある。

06 / 06

バッククォートで囲んだ文字列には、もうひとつ便利なところがある。書いた通りに改行が入るんだ。

" で囲んだ文字列では改行できないので、複数行の文を作るときに重宝するよ。

const name = "ゆい";console.log(`こんにちは${name}さん`);

実行結果

こんにちは
ゆいさん