🎉

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

2022/11/30に公開約1,200字

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

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

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

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

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

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}とかができます。

使用例

https://github.com/AyaExpTech/AXT-bgSlide

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 : 綾坂こと

Discussion

ログインするとコメントできます