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

Question

我现在正在使用Javascript30＃1，我一直在想一个小东西...

下面的代码有效。

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

但是，下面的这段代码引发了错误。

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

为什么会这样？
据我检查，如果变量和字符串被反斜杠包围并且使用${}，则任何变量和字符串都是有效的...

Answer 1

查看输出...

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

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

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

但是，我已经仔细检查过了，看来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中传递的选择器值。

数据- *值是字符串。为了在选择器中使用数字值，还必须使用数字引号。

在您的第一个代码中，值是字符串并通过测试，而在第二个代码中（不带引号），这些值不被视为有效的选择器。