便利な `${}` テンプレートリテラル

テンプレートリテラルを知らない者は、変数を含む文字列を
"変数x : " + x + ", 変数y : " + y
// "変数x : 1, 変数y : 2"
と記述するしかない。

しかし！
テンプレートリテラルを知る者は、変数を含む文字列を
`変数x : ${x}, 変数y : ${y}`
// "変数x : 1, 変数y : 2"
こう記述する。

ご存知でしょうか？

これが、
"calc(" + x + "% - " + y + "px)"
// "calc(100% - 20px)"

こう。
`calc(${x}% - ${y}px)`
// "calc(100% - 20px)"

見やすいでしょ～

これが、
"rgb(" + (Math.random() * 360) + "deg, " + s + "%, " + l + "%)"
// "rgb([ランダム]deg, 80%, 50%)"

こう。
`rgb(${Math.random() * 360}deg, ${s}%, ${l}%)`
// "rgb([ランダム]deg, 80%, 50%)"

便利でしょ～

つかいかた

記述

バッククオート``で 囲んだ文字列の中で、 ドル記号$に 波括弧{}をつけたもの ${}の中に式を記述することで、 文字列の中にその評価値を埋め込むことができる。

例:
let str = `文字列${式}文字列`;
console.log(`文字列${式}文字列`);

文字列内の改行

テンプレートリテラル内での改行は、改行文字として反映されます。 `\n`

例:

                        `1行目-
                        -2行目`

                        /*
                         * 1行目-
                         * -2行目
                         */
                    

ソースコード内で改行して続けて記述

ソースコードの複数行にわたって1行の文字列を記述したい場合は、 改行の直前にバックスラッシュ\を 挿入することで、リテラル中で改行できます。 (テンプレートリテラルのみでなく、通常の文字列リテラル ''""でも可能です)

例:

                        `1行目-\
                        -引き続き1行目`

                        /*
                         * 1行目- -引き続き1行目
                         */
                    

`'シングルクォート'と"ダブルクォート"`

テンプレートリテラル内では、 シングルクォーテーション''と ダブルクォーテーション""は 自由に使用できます。

例:
`onclick="window.location.href = '../index.html'"`

おわり