console.log 中 %o 和 %O 之间的区别 (javascript)

Question

这与其说是一个严重的问题，不如说是一个好奇心问题，但在 console.log 的 MDN文档中关于字符串替换的内容中写道：

%o 或 %O 输出 JavaScript 对象。单击对象名称会在检查器中打开有关该对象的更多信息。

%o 和 %O 之间有什么区别吗？我没有注意到 chrome 中有任何明显的东西。如果不是，为什么两者都存在？只是一些旧的兼容性问题还是我们两者都有的原因？

Answer 1

两者之间存在一些细微的差异。从控制台标准：

4. 如果说明符为 %o，则可以选择让 conversion 成为当前应用的最佳有用格式。

5. 如果说明符为 %O，则可以选择让 conversion 成为当前应用的通用 JavaScript 对象格式。

然后，该标准描述了最佳有用格式和通用 JavaScript 对象格式 之间的区别：

具有通用 JavaScript 对象格式的对象是通用 JavaScript 对象的潜在可扩展表示。具有最佳有用格式的对象是被判断为最有用且信息丰富的对象的特定于实现的、潜在的交互式表示

思考两者之间差异的一种方法是%O像 using 一样console.dir()，因为这将记录对象的通用 JavaScript 对象格式，向您显示对象的特定属性，而 using%o类似于 usingconsole.dirxml()或常规，因为这将以最有用的console.log()方式记录对象format，它可以是对象的开发人员友好/简化表示。因此，%o通常会为您提供所需的内容，但%O可以为您提供更多详细信息，例如对象的属性。

您可以看到某些对象的差异，以下是其中一些对象：

const regex = /abc/;
console.group("Regex object");
console.log("optimally useful formatting (%%o): %o", regex);
console.log("generic JavaScript object formatting (%%O): %O", regex);
console.groupEnd();

const fn = () => "foo";
console.group("Function object");
console.log("optimally useful formatting (%%o): %o", fn);
console.log("generic JavaScript object formatting (%%O): %O", fn);
console.groupEnd();

const ul = document.querySelector("ul");
console.group("DOM node");
console.log("optimally useful formatting (%%o): %o", ul);
console.log("generic JavaScript object formatting (%%O): %O", ul);
console.groupEnd();

<ul><li>1</li><li>2</li><li>3</li></ul>

Chrome 控制台输出：