为什么 es6 模板字符串在这种情况下需要双夸脱 Javascript？

Question

我现在在 Javascript30 #1，我一直在想一些小东西...

下面的代码有效。

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

但是，下面这段代码出错了。

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

为什么会发生这些？
据我检查，任何变量和字符串如果被 back-quarts 包围并使用 ${} 都是有效的......

Answer 1

查看输出...

`audio[data-key="${e.keyCode}"]`
"audio[data-key="Y"]"

`audio[data-key=${e.keyCode}]`
"audio[data-key=Y]"

由于缺少引号（“Y”或 'Y'），前者不能用作选择器。

但是，我 double-checked 看起来 Chrome 可以。 拍下这一页...接下来的工作

var q = "q"
document.querySelector(`#search > div > input[name="${q}"]`)
document.querySelector(`#search > div > input[name='${q}']`)
document.querySelector(`#search > div > input[name=${q}]`)

抱歉没有答案:)

Answer 2

问题不在于模板字符串，而是关于在 querySelector 中传递的选择器值。

data-* 值是字符串。数值也必须用引号引起来才能在选择器中使用它们。

在您的第一个代码中，值是字符串并通过了测试，而在第二个代码中（未用引号引起来）它们未被视为有效选择器。