forEach 方法的嵌套 console.log 函数中是否支持模板文字？答案

【问题标题】：Are template literals supported inside forEach methods' nested console.log functions?forEach 方法的嵌套 console.log 函数中是否支持模板文字？
【发布时间】：2026-02-21 00:30:01
【问题描述】：

我有一个 forEach 方法，它为数组中的每个元素返回一个 console.log()。如果我在其中放置模板文字，我会在控制台中打印： [object HTMLLIElement] 而不是正确评估对象"<li class="sel">..."

const container = document.querySelector("#start");
let sel = container.querySelectorAll(".sel");

//The following works as it should:
   // sel.forEach((element, pos) => console.log( element,pos));
//This , however does not
sel.forEach((element, pos) => console.log( ` ${element} + ${pos} `)); //and prints " [object HTMLLIElement] + 0 "

 <div id="start">
        <ul>
            <li class="sel">valoare 1</li>
            <li class="sel">valoare 2</li>
            <li class="sel">valoare 3</li>
            <li>valoare 4</li>
            <li class="sel">valoare 5</li>
        </ul>
    </div>

【问题讨论】：

console.log（在浏览器中），特别对待 HTMLElements 并为它们提供交互式菜单。通过将它们转换为带有模板文字的字符串，您将失去这种能力。如果你也想记录位置，你可以试试console.log(element, "+", pos)。
“而不是正确评估对象”是什么意思？您正在对一个对象执行 toString()。
我在修改问题的编辑时遇到了麻烦，因为在我尝试提交更改时其他人也更正了它 - 我说控制台中出现的正确评估“
..." （当我运行有效的代码时 sel.forEach((element, pos) => console.log( element,pos));

【解决方案1】：

模板文字的使用会强制对 element 引用调用 .toString()，该引用返回为 [object HTMLLIElement]。

来自the docs：

如果此方法没有在自定义对象中被覆盖，toString() 返回 "[object type]"，其中 type 是对象类型。

如果没有模板字面量，您将把它留给浏览器来呈现值，这会返回调用 element.valueOf() 的隐式结果并返回元素的未解析 HTML。

const div = document.querySelector("div");
console.log(div);             // Implicit .valueOf() call
console.log(div.valueOf());   // Explicit .valueOf() call

const el = div;
console.log(`${div}`);        // Implicit .toString() call
console.log(div.toString());  // Explicit .toString() call

&lt;div&gt;test&lt;/div&gt;

因此，在使用模板文字时，您需要了解您要求记录 元素本身 的字符串表示，而不是 some元素的属性。

在您的情况下，不需要模板文字，因为 the forEach arguments 让您可以通过 element node interface 访问您可能需要的数据，并且调用 element.outerHTML 将返回整个元素的 HTML。

document.querySelectorAll("#start .sel").forEach(
  (element, pos) => {
    // The forEach element argument provides a reference to the
    // element instance being iterated. You can access anything
    // you need to using that element's API:
    console.log(element.nodeName, 
                element.className, 
                element.textContent, 
                element.outerHTML,
                pos);
   }
);

<div id="start">
        <ul>
            <li class="sel">valoare 1</li>
            <li class="sel">valoare 2</li>
            <li class="sel">valoare 3</li>
            <li>valoare 4</li>
            <li class="sel">valoare 5</li>
        </ul>
    </div>

【讨论】：

【解决方案2】：

您可以插入元素的outerHTML。

const container = document.querySelector("#start");
let sel = container.querySelectorAll(".sel");

sel.forEach((element, pos) => console.log( `${element.outerHTML} + ${pos} `));

 <div id="start">
        <ul>
            <li class="sel">valoare 1</li>
            <li class="sel">valoare 2</li>
            <li class="sel">valoare 3</li>
            <li>valoare 4</li>
            <li class="sel">valoare 5</li>
        </ul>
    </div>

【讨论】：