最牛的数据类型判断方法?分享 1 段优质 JS 代码片段!

261 阅读2分钟

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!

大家好,我是大澈!

本文约 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 -