console.log 中 %o 和 %O 之间的区别（javascript）

Question

这更像是一个好奇的问题而不是一个严重的问题，但在关于字符串替换的 console.log 的 MDN 文档中，它说：

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

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

Answer 1

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

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

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

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

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

考虑两者之间的区别的一种方法是%O就像使用console.dir()因为这将记录对象的通用 JavaScript 对象格式，向您显示对象的特定属性，而使用%o就像使用console.dirxml()或常规console.log()因为这将以最佳有用的格式记录对象，这可以是对开发人员友好/简化的对象表示。 因此， %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 控制台中的输出：