Symbol.toStringTag

Symbol.toStringTag 静态数据属性代表 众所周知的符号 @@toStringTagObject.prototype.toString()this 值上查找此符号,以查找包含表示对象类型的字符串的属性。

¥The Symbol.toStringTag static data property represents the well-known symbol @@toStringTag. Object.prototype.toString() looks up this symbol on the this value for the property containing a string that represents the type of the object.

Try it

¥Value

众所周知的符号 @@toStringTag

¥The well-known symbol @@toStringTag.

Property attributes of Symbol.toStringTag
Writable no
Enumerable no
Configurable no

示例

¥Examples

默认标签

¥Default tags

有些值没有 Symbol.toStringTag,但有特殊的 toString() 表示。完整列表请参见 Object.prototype.toString()

¥Some values do not have Symbol.toStringTag, but have special toString() representations. For a complete list, see Object.prototype.toString().

js
Object.prototype.toString.call("foo"); // "[object String]"
Object.prototype.toString.call([1, 2]); // "[object Array]"
Object.prototype.toString.call(3); // "[object Number]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(null); // "[object Null]"
// ... and more

内置 toStringTag 符号

¥Built-in toStringTag symbols

大多数内置对象都提供自己的 @@toStringTag 属性。几乎所有内置对象的 @@toStringTag 属性都是不可写、不可枚举、可配置的;Iterator 是个例外,出于兼容性原因,它是可写的。

¥Most built-in objects provide their own @@toStringTag property. Almost all built-in objects' @@toStringTag property is not writable, not enumerable, and configurable; the exception is Iterator, which is writable for compatibility reasons.

对于像 Promise 这样的构造函数对象,该属性安装在 Constructor.prototype 上,这样构造函数的所有实例都继承 @@toStringTag 并且可以字符串化。对于像 MathJSON 这样的非构造函数对象,该属性被安装为静态属性,以便命名空间对象本身可以被字符串化。有时,构造函数还提供自己的 toString 方法(例如 Intl.Locale),在这种情况下,仅当你显式调用 Object.prototype.toString 时才使用 @@toStringTag 属性。

¥For constructor objects like Promise, the property is installed on Constructor.prototype, so that all instances of the constructor inherit @@toStringTag and can be stringified. For non-constructor objects like Math and JSON, the property is installed as a static property, so that the namespace object itself can be stringified. Sometimes, the constructor also provides its own toString method (for example, Intl.Locale), in which case the @@toStringTag property is only used when you explicitly call Object.prototype.toString on it.

js
Object.prototype.toString.call(new Map()); // "[object Map]"
Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]"
Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
// ... and more

使用 toStringTag 自定义标签

¥Custom tag with toStringTag

创建自己的类时,JavaScript 默认使用 "对象" 标签:

¥When creating your own class, JavaScript defaults to the "Object" tag:

js
class ValidatorClass {}

Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"

现在,在 toStringTag 的帮助下,你可以设置自己的自定义标签:

¥Now, with the help of toStringTag, you are able to set your own custom tag:

js
class ValidatorClass {
  get [Symbol.toStringTag]() {
    return "Validator";
  }
}

Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"

toStringTag 可用于所有 DOM 原型对象

¥toStringTag available on all DOM prototype objects

由于 2020 年中期的 WebIDL 规范变更,浏览器正在向所有 DOM 原型对象添加 Symbol.toStringTag 属性。例如,要访问 HTMLButtonElement 上的 Symbol.toStringTag 属性:

¥Due to a WebIDL spec change in mid-2020, browsers are adding a Symbol.toStringTag property to all DOM prototype objects. For example, to access the Symbol.toStringTag property on HTMLButtonElement:

js
const test = document.createElement("button");
test.toString(); // "[object HTMLButtonElement]"
test[Symbol.toStringTag]; // "HTMLButtonElement"

规范

Specification
ECMAScript Language Specification
# sec-symbol.tostringtag

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看