🎉

テンプレートリテラルのいいところ@JavaScript

2022/12/01に公開

この記事は、Qiitaで公開した『【AXT-bgSlide】思い立ったからHTMLに背景スライドショーを挿入するJavaScript作った』の技術詳細記事です。
https://qiita.com/AXT_AyaKoto/items/fc36fe39ae32ec714ad5

テンプレートリテラルとは？

文字列の中に"や'を入れたい人
文字列に変数の値を挿入したいが+は可読性がな〜などと考えている人

に朗報です、実は`が使えます。

ES6(ES2015)で追加されているので意外と昔から使えてたんだね……知らなかったよ……

『"1"23'4'5』という文字列を扱いたい！！

ES5まで

old_quotation.js

""1"23'4'5" // Error
'"1"23'4'5' // Error
'"1"23' + "'4'5" // 通るけど分かりづらい

ES6から

new_quotation.js

`"1"23'4'5` // 通るしわかりやすい！！！！

変数pointを使って『〇点』と表示したい！！

ES5まで

old_insert.js

alert(point + "点"); // わかりづらい気がする……

ES6から

old_insert.js

alert(`${point}点`); // わかりやすい気がする！！

大まかな仕様

旧来の"や'みたいに囲って文字列にできます。
${変数名}が変数に置き換えられます。
- もっというと${}の中は評価されます。${point+10}とかができます。

使用例

HTMLに挿入する文字列をテンプレートリテラルで生成しています。

example.js

styleTag.innerText += `
@keyframes ${uniqueID}-axt {
    0% {opacity: 0;}
    ${(fade / time) * 100}% {opacity: 1;}
    ${(interval / time) * 100}% {opacity: 1;}
    ${(interval / time + fade / time) * 100}% {opacity: 0;}
    100% {opacity: 0;}}
`;

Author : 綾坂こと

テンプレートリテラルとは？

『"1"23'4'5』という文字列を扱いたい！！

変数pointを使って『〇点』と表示したい！！

大まかな仕様

使用例

Discussion