Symbol.toStringTag
The Symbol.toStringTag
well-known symbol is a string valued property that is used in the creation of the default string description of an object. It is accessed internally by the Object.prototype.toString()
method.
Property attributes of Symbol.toStringTag |
|
---|---|
Writable | no |
Enumerable | no |
Configurable | no |
Examples
Default tags
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
Built-in toStringTag symbols
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
Custom classes default to object tag
When creating your own class, JavaScript defaults to the "Object" tag:
class ValidatorClass {}
Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
Custom tag with toStringTag
Now, with the help of toStringTag
, you are able to set your own custom tag:
class ValidatorClass {
get [Symbol.toStringTag]() {
return 'Validator';
}
}
Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"
toStringTag available on all DOM prototype objects
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
:
let test = document.createElement('button');
test.toString(); // Returns [object HTMLButtonElement]
test[Symbol.toStringTag]; // Returns HTMLButtonElement
Specifications
Specification |
---|
ECMAScript Language Specification # sec-symbol.tostringtag |
Browser compatibility
BCD tables only load in the browser