理解 Symbol.toStringTag 用法

Posted 2022-05-24 前端精髓

对象的Symbol.toStringTag属性，指向一个方法。在该对象上面调用Object.prototype.toString方法时，如果这个属性存在，它的返回值会出现在toString方法返回的字符串之中，表示对象的类型。也就是说，这个属性可以用来定制[object Object]或[object Array]中object后面的那个字符串。

// 例一
([Symbol.toStringTag]: 'Foo'.toString())
// "[object Foo]"

// 例二
class Collection 
  get [Symbol.toStringTag]() 
    return 'xxx';
  

let x = new Collection();
Object.prototype.toString.call(x) // "[object xxx]"

ES6 新增内置对象的Symbol.toStringTag属性值如下。

1、JSON[Symbol.toStringTag]：‘JSON’
2、Math[Symbol.toStringTag]：‘Math’
3、Module 对象M[Symbol.toStringTag]：‘Module’
4、ArrayBuffer.prototype[Symbol.toStringTag]：‘ArrayBuffer’
5、DataView.prototype[Symbol.toStringTag]：‘DataView’
6、Map.prototype[Symbol.toStringTag]：‘Map’
7、Promise.prototype[Symbol.toStringTag]：‘Promise’
8、Set.prototype[Symbol.toStringTag]：‘Set’
9、%TypedArray%.prototype[Symbol.toStringTag]：'Uint8Array’等
10、WeakMap.prototype[Symbol.toStringTag]：‘WeakMap’
11、WeakSet.prototype[Symbol.toStringTag]：‘WeakSet’
12、%MapIteratorPrototype%[Symbol.toStringTag]：‘Map Iterator’
13、%SetIteratorPrototype%[Symbol.toStringTag]：‘Set Iterator’
14、%StringIteratorPrototype%[Symbol.toStringTag]：‘String Iterator’
15、Symbol.prototype[Symbol.toStringTag]：‘Symbol’
16、Generator.prototype[Symbol.toStringTag]：‘Generator’
17、GeneratorFunction.prototype[Symbol.toStringTag]：‘GeneratorFunction’

webpack 用这个标识对象为 ESmodule 模块对象。所以经常 webpack 打包的代码里面看到如下结构：

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系