JavaScript Document.querySelector() [重复]

Question

我是 JavaScript 的初学者，我正在关注 javascript30.com 的 30 天任务之一，并第一次看到 document.querySelector()。

阅读这个MDN - Query Selector，我很清楚它的作用，但是我无法弄清楚它是如何在代码中使用的，尤其是：

• 这里的美元符号是什么意思？ （我知道这不是这种语言的特定含义，这让我感到困惑）

• 一般来说，我不明白选择括号 () 之间发生了什么，这个：

  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  

谁能帮帮我？

谢谢！

这是构建架子鼓的代码：

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`);

  if (!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing'); //add class defined in css
}

function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  this.classList.remove('playing');
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

window.addEventListener('keydown', playSound);

<div class="keys">
  <div data-key="65" class="key">
    <kbd>A</kbd>
    <span class="sound">clap</span>
  </div>
  <div data-key="83" class="key">
    <kbd>S</kbd>
    <span class="sound">hihat</span>
  </div>
  <div data-key="68" class="key">
    <kbd>D</kbd>
    <span class="sound">kick</span>
  </div>
  <div data-key="70" class="key">
    <kbd>F</kbd>
    <span class="sound">openhat</span>
  </div>
  <div data-key="71" class="key">
    <kbd>G</kbd>
    <span class="sound">boom</span>
  </div>
  <div data-key="72" class="key">
    <kbd>H</kbd>
    <span class="sound">ride</span>
  </div>
  <div data-key="74" class="key">
    <kbd>J</kbd>
    <span class="sound">snare</span>
  </div>
  <div data-key="75" class="key">
    <kbd>K</kbd>
    <span class="sound">tom</span>
  </div>
  <div data-key="76" class="key">
    <kbd>L</kbd>
    <span class="sound">tink</span>
  </div>
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>

Answer 1

它是在 ECMA 2015 中引入的Template Literal。

模板文字用反引号 (` `) 括起来（重音符号） 字符而不是双引号或单引号。模板文字可以 包含占位符。这些由美元符号和 花括号（${表达式}）。占位符中的表达式和 它们之间的文本被传递给一个函数。默认功能 只是将部分连接成一个字符串。如果有一个 模板文字之前的表达式（此处为标记），模板 字符串被称为“标记模板文字”。在这种情况下，标签 表达式（通常是一个函数）被处理的调用 模板文字，然后您可以在输出之前对其进行操作。到 在模板文字中转义反引号，在 反勾号。

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."