本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!
大家好,我是大澈!
本文约 1000+ 字,整篇阅读约需 2 分钟。
今天分享一段优质 JS 代码片段,非常适合在需要准确数据类型判断的场景下使用。
老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!
function checkDataType(data) {
return Object.prototype.toString.call(data).slice(8, -1);
}
checkDataType(1); // Number
checkDataType('a'); // String
checkDataType(true); //Boolean
checkDataType(null); //Null
checkDataType(undefined); //Undefined
checkDataType(Symbol('b')); //Symbol
checkDataType(BigInt(10)); //BigInt
checkDataType([]); //Array
checkDataType({}); //Object
checkDataType(function fn() {}); //Function
checkDataType(new Date()); //Date
checkDataType(new RegExp()); //RegExp
checkDataType(new Error()); //Error
checkDataType(document); //HTMLDocument
checkDataType(window); //Window
分享原因
这段代码展示了如何使用JavaScript中的 Object.prototype.toString 方法来精准地获取变量的具体数据类型。
这种方法比 typeof 更加精确,尤其在区分对象类型(如数组、日期、正则表达式等)时非常有用。
以后在项目中要检测数据类型,只用它就足够了!
代码解析
1. Object.prototype.toString.call(data)
通过调用 Object.prototype.toString 方法并传入 data,我们可以获取数据类型的字符串表示。
例如,对于数组,会返回 "[object Array]"。
2. .slice(8, -1)
截取从索引8到倒数第一个字符之间的子字符串,以去除 "[object " 和 "]",仅保留类型名称。
例如,对于 "[object Array]",结果为 "Array"。
3. 具体原理
Object.prototype.toString.call(obj),由于toString是Object.prototype上的方法,因此我们传递给它的参数应该是一个对象。
而Object.prototype.toString方法本身却没有传递参数,所以这就是为什么我们需要用call将它与需要检查类型的对象连接起来,该方法可以指定函数内的this关键字上下文。
因此,我们将检查类型的对象作为首个参数传递给了toString方法,并使用call方法将Object.prototype.toString作为一个函数来执行。
这样JavaScript就会在上下文对象上执行Object.prototype.toString方法,从而返回一个表示该对象类型的字符串。
对于自定义对象, 调用 Object.prototype.toString.call()方法,都只会返回 [object Object]。此时就要使用 Symbol.toStringTag 来指定一个确定的类型了。
Symbol.toStringTag 是一个内置符号属性,它的值是一个字符串,用于表示一个对象的默认描述,也就是调用 Object.prototype.toString 会返回的内容。
上面的 Object.prototype.toString 方法,之所以对不同的数据类型,返回不同的标识字符串,就是因为 Symbol.toStringTag 。
- end -