Question

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

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

这里的美元符号是什么意思？（我知道这种语言没有具体含义，让我感到困惑）
一般来说，我不明白选择器括号（）之间发生了什么，这个：
```
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
```

任何人都可以帮助我吗？

谢谢！

这是构建鼓组的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是ECMA 2015中引入的Template Literal。

模板文字由后面的勾号（``）（重音符号）括起来字符而不是双引号或单引号。模板文字可以包含占位符。这些由美元符号表示花括号（$ {expression}）。地方持有人和表达者的表达它们之间的文本传递给一个函数。默认功能只需将部分连接成一个字符串即可。如果有的话在模板文字（此处为标记）之前的表达式，模板 string被称为“标记模板文字”。在那种情况下，标签使用已处理的表达式调用表达式（通常是函数）模板文字，然后您可以在输出之前进行操作。至在模板文字中转义后退，在前面加一个反斜杠\ 背蜱。

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

JavaScript Document.querySelector（）

1 个答案: