javascript - 为什么 Chrome console.log 以如此烦人的方式显示 String 对象？

Question

原始字符串在 Chrome 控制台中显示得很好。但是 String 对象是这样出来的:

s = new String('foo bar')
==> String {0: "f", 1: "o", 2: "o", 3: " ", 4: "b", 5: "a", 6: "r", length: 7, [[PrimitiveValue]]: "foo bar"}

我知道我可以使用 s+'' 或 s.toString() 更漂亮地看到它。但是我经常需要查看充满这些东西的数组和其他结构。所以我得到了不太有用的信息:

[s,s,s]
==> [String, String, String]

当我展开其中一个字符串时，我得到了整个字符数组的垂直表示。

如果没有好的答案，也许有人至少可以同情我。

Answer 1

厚颜无耻的答案是 Chrome 以这种方式显示它，因为这就是 String 对象。 Chrome 尝试将任何旧对象转换为原始对象有意义吗？

Dandavis 评论是对的 - 根据您的用途，您可以修改 String 原型(prototype)，然后使用基元提高可读性并依赖 primitive being cast to a String object (从而使您的方法可用):

JavaScript automatically converts primitives to String objects, so that it's possible to use String object methods for primitive strings.

例如

String.prototype.upper = function () {
    return this.toUpperCase();
};
document.write("foo bar".upper());

如果你真的想，你可以像这样写一个类似的对象:

function MyString(value) {
    this['[[PrimitiveValue]]'] = value;
    this.length = value.length;
    for (var i = 0;i<value.length;i++) { this[i] = value.charAt(i); }
    this.charAt = function(val) {
            return this[val];
        };
    this.toString = function() { return this.primitive };
    return this;

}
var myString = new MyString('foo bar');
var string = new String('foo bar');
document.write('custom:', myString, ' native:', string, '<br/> check the console too');
console.log('custom:', myString, ' native:', string)

这将向控制台输出如下内容:

MyString {0: "f", 1: "o", 2: "o", 3: " ", 4: "b", 5: "a", 6: "r", [[PrimitiveValue]]: "foo bar", length: 7, charAt: function, toString: function}