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

如何解决console.log 中 %o 和 %O 之间的区别javascript

这与其说是一个严重的问题，不如说是一个好奇的问题，但在控制台.log 的 MDN documentation 中关于字符串替换的内容是这样说的：

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

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

解决方法

两者之间有一些细微的差别。来自console standard：

4. 如果说明符是 %o，可以选择让转换为最新的，并应用最有用的格式。

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

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

具有通用 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 控制台中的输出：