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

` ${ } `の意味

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

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

  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)
  })

参考

ここでも` ${ } `を使い、アニメーションさせています。

【CSS】【javascript】conic-gradientで1分カウンターを作る方法