音频[data-key=“${event.keyCode}”])。解释此代码

Question

我从一堂关于js的课中创建了一个鼓工具包，但我真的不明白它是什么意思，尤其是第二行。这是js代码。

window.addEventListener('keydown' , event => {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
if(!audio) return;
audio.play();
})

Answer 1

第一行创建一个事件侦听器，用于侦听要按下的键。在第二行，它选择属性data-key等于键盘事件的键代码的audio元素，并将其存储在一个变量中。document.querySelector使用CSS选择器来选择它遇到的第一个具有匹配凭据的元素。event.keyCode获取表示键的Unicode值。这些符号创建了一个模板文字。${ event.keyCode }将event.keyCode替换到查询选择器中。就像如果我这么做了：

console.log(`Visits: ${30 + 20}`);

我期望的是："Visits: 50"

在第三行，它检查音频元素是否存在，如果不存在，则在第四行播放声音之前使用return语句中断函数。

Answer 2

它将一个事件附加到窗口对象上，该对象在键盘上的按键上触发。

在第二行中，通过使用querySelector并传递选择器“audiodata key=”${event.keyCode}“”，从窗口选择音频对象。

"event.keyCode“包含被按下的键的值，它有助于选择应该在该键上播放的音频。

在第三行中，它检查音频元素是否存在，如果不存在，则返回不起作用的内容，否则播放音频。