【javascript】バッククォート内のドルマークの使い方 ` ${ } `

` ${ } `の意味

`文字列${ 変数 }文字列`と書くことで、変数を文字列ではなく変数として認識してくれます。
点はシングルクォーテーションではなく、バッククォートです。

  const weather = '晴れ';             
  console.log(`今日の天気は${weather}です。`);
  //  結果 => 今日の天気は晴れです。

'文字列' + 変数 + '文字列' と書き換え可

ここでの点は、シングルクォーテーションでもOK！

  const weather = '晴れ';             
  console.log('今日の天気は' + weather  + 'です。');
  //  結果 => 今日の天気は晴れです。

以下のように値を変えて表示できます。

今日の天気は？

 const weatherSelect = document.getElementById("weatherSelect");
  function changeWeather() {
    const weatherText = document.getElementById("text");
    const weather = '<span class="blue">' + weatherSelect.value + '</span>';
    weatherText.innerHTML = `今日の天気は${weather}です。`;
  }
  weatherSelect.onchange = changeWeather;

アニメーションさせる

ボックスをクリックしてみてください。

  const box = document.querySelector(".box");
  let count = 100;
  box.addEventListener("click", ()=>{
    let rotate = setInterval(()=>{
      count++;
      box.style.width = `${count}px`
      if(count>360){
        clearInterval(rotate)
      }
    },10)
  })