为何两段console.log()代码输出结果不一致？

你忽略的是console.log对不同类型值的处理逻辑，以及模板字符串的隐式类型转换规则：

• 直接调用 console.log(clickedEvent.target) 时，浏览器控制台会识别这是一个DOM元素对象，会以可视化的DOM节点形式展示它的结构（也就是你看到的 <div>Account</div>），这是控制台为方便开发者调试做的专属优化。
• 而使用模板字符串 ${clickedEvent.target} 时，会触发隐式类型转换：JavaScript会自动把DOM元素对象转换成字符串。所有普通对象的默认toString()方法都会返回类似[object 构造函数名]的格式，DOM元素作为对象，自然会返回[object HTMLDivElement]。

如果想在模板字符串里也得到元素的HTML结构，可以手动调用DOM元素的outerHTML或innerHTML属性：

console.log(`Clicked Element:${clickedEvent.target.outerHTML}`)
// 输出：Clicked Element:<div>Account</div>

内容的提问来源于stack exchange，提问作者passion053