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

Question

这与其说是一个严重的问题，不如说是一个好奇的问题，但是在 MDN documentation 中，对于 console.log 关于字符串替换，它说：

%o or %O Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.

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

Answer 1

两者之间存在一些细微差别。来自 console standard:

If specifier is %o, optionally let converted be current with optimally useful formatting applied.

If specifier is %O, optionally let converted be current with generic JavaScript object formatting applied.

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

An object with generic JavaScript object formatting is a potentially expandable representation of a generic JavaScript object. An object with optimally useful formatting is an implementation-specific, potentially-interactive representation of an object judged to be maximally useful and informative

考虑两者之间差异的一种方法是 %O 就像使用 console.dir() as this will log the object's generic JavaScript object formatting, showing you specific properties of the object, whereas using %o is like using console.dirxml() 或常规 console.log() 因为这将在其 中最佳地记录对象有用的格式 ，可以是对象的 developer-friendly/simplified 表示。因此，%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 控制台中的输出：

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

Difference between %o and %O in console.log (javascript)

javascript

ecmascript-6

console.log