Question

以下是这行：

const parent = document.querySelector(`#${parentId}`);

我知道const parent，document.querySelector()和parentId的含义和作用。

我正在努力找出#，$和{}的组合。

完整的.js：

(function(document) {
  const buttons = document.querySelectorAll('[data-next]');

  for (const item of buttons) {

    const parentId = item.getAttribute('data-parent');

    const parent = document.querySelector(`#${parentId}`);
    console.log(parent);
    const nextDivId = item.getAttribute('data-next');
    const nextDiv = document.querySelector(`#${nextDivId}`);
    if (!nextDiv) {
      console.error('could not find next div for button ', item);
    }
    item.addEventListener('click', function() {
      nextDiv.classList.toggle('hidden');
      parent.classList.toggle('hidden');
    });
  }
})(document);

Answer 1

它称为模板文字。从文档中：

模板文字是允许嵌入表达式的字符串文字。您可以使用多行字符串和字符串插值功能。在ES2015规范的先前版本中，它们被称为“模板字符串”。

从技术上讲，代码为document.querySelector()创建了一个字符串，该字符串将在一天结束时为父母的ID提供选择器。

示例代码：

const parentId = 'randomid';
const result = `#${parentId}`;

console.log(result);

因此，您可以考虑以下代码：

const parentId = item.getAttribute('data-parent');
const selector = `#${parentId}`;

const parent = document.querySelector(selector);

在此处进一步阅读：Template Literals

我希望这会有所帮助！

Answer 2

${parentId}是模板文字表达式

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

这里说的是，“获取变量parentId并在主题标签前面，以指示querySelector()函数的ID。”

例如，在下面的代码中，该行呈现为：

const parent = document.querySelector("#a")

const parentId = "a"
const parent = document.querySelector(`#${parentId}`)
parent.style.color = "#f00"

<div id="a">Text</div>

Answer 3

它称为模板文字。

您可以考虑将一些已解析的代码放入字符串中。

因此，如果要将变量放入字符串'＃'中，则可以这样做：

const someId = 'someid';

const idWithHashTag = `#${someId}`;

您必须使用反引号（), and then you can use $ {}`并在花括号内执行某些操作。

JavaScript中“＃$ {parentId}”的组合是什么意思？

3 个答案: