JavaScript数据类型检测的四种常用方式详解

更新时间：2025年07月10日 08:49:27 作者：LuckySusu

在 JavaScript 开发中,判断数据类型是一项基础但非常重要的技能,由于 JavaScript 是一门动态类型语言,变量可以在运行时被赋予不同的值类型,因此我们需要掌握多种方法来准确检测变量的数据类型,本文给大家讲解了四种常见的类型检测方式,需要的朋友可以参考下

一、typeof 运算符

作用：

用于检测变量的基本数据类型（原始类型）。

示例代码：

console.log(typeof 2);               // "number"
console.log(typeof true);            // "boolean"
console.log(typeof 'str');           // "string"
console.log(typeof []);              // "object"
console.log(typeof function(){});    // "function"
console.log(typeof {});              // "object"
console.log(typeof undefined);       // "undefined"
console.log(typeof null);            // "object"

特点与限制：

类型	检测结果
基本类型（Number、String、Boolean、Undefined）	正确
Null	❌ 错误返回 "object"（历史遗留问题）
对象（Object、Array）	都返回 "object"
函数	返回 "function"

优点：

简单高效；
能正确识别基本类型；

缺点：

无法区分对象和数组；
null 被错误地识别为 "object"；
不能检测 Symbol、BigInt 等复杂类型；

二、instanceof 运算符

作用：

用于检测某个对象是否是某个构造函数的实例（即其原型链中是否存在该构造函数的原型）。

示例代码：

console.log(2 instanceof Number);         // false
console.log(true instanceof Boolean);     // false
console.log('str' instanceof String);     // false

console.log([] instanceof Array);         // true
console.log(function() {} instanceof Function); // true
console.log({} instanceof Object);        // true

特点与限制：

类型	检测结果
原始类型	❌ 不支持（如数字、布尔值等）
引用类型（对象、数组、函数）	✅ 可以正确判断

优点：

能判断引用类型的继承关系；
适用于复杂对象的类型判断；

缺点：

不能判断基本类型；
在跨框架或跨窗口环境中可能失效（如 iframe 中的对象）；

三、constructor 属性

作用：

每个对象都有一个 constructor 属性，指向创建它的构造函数。

示例代码：

console.log((2).constructor === Number);          // true
console.log((true).constructor === Boolean);      // true
console.log(('str').constructor === String);      // true
console.log(([]).constructor === Array);          // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object);         // true

注意事项：

function Fn(){}
Fn.prototype = new Array();
var f = new Fn();

console.log(f.constructor === Fn);   // false
console.log(f.constructor === Array); // true

优点：

可以检测基本类型；
能获取构造函数信息；

缺点：

如果修改了原型链，会导致判断不准确；
不适合在严格模式下使用（某些环境会抛出错误）；
安全性较低，容易被覆盖或篡改；

四、Object.prototype.toString.call() 方法

作用：

这是目前最通用且可靠的数据类型检测方式。它返回 [object Type] 格式的字符串，表示对象的具体类型。

示例代码：

console.log(Object.prototype.toString.call(2));         // "[object Number]"
console.log(Object.prototype.toString.call(true));      // "[object Boolean]"
console.log(Object.prototype.toString.call('str'));     // "[object String]"
console.log(Object.prototype.toString.call([]));        // "[object Array]"
console.log(Object.prototype.toString.call(function(){}));// "[object Function]"
console.log(Object.prototype.toString.call({}));         // "[object Object]"
console.log(Object.prototype.toString.call(undefined));  // "[object Undefined]"
console.log(Object.prototype.toString.call(null));       // "[object Null]"

为什么不用 obj.toString()？

很多内置对象重写了 toString() 方法，比如：

Array.prototype.toString() 返回的是元素拼接成的字符串；
Function.prototype.toString() 返回函数体的字符串表示；
所以调用 obj.toString() 得到的并不是对象的类型信息。

而 Object.prototype.toString.call(obj) 绕过了这些重写，直接调用了原生的方法，返回标准格式的类型标识。

优点：

可以准确判断所有内置类型（包括 null、undefined）；
不受原型链修改影响；
兼容性好，适用于大多数浏览器和环境；

缺点：

写法稍显繁琐；
不能检测自定义类的类型（除非自己实现 Symbol.toStringTag）；

五、总结对比表

检测方式	是否可检测基本类型	是否可检测引用类型	是否可判断 null	是否受原型影响	推荐指数
typeof	✅	❌（对象/数组统一）	❌	否	⭐⭐⭐
instanceof	❌	✅	❌	✅	⭐⭐⭐⭐
constructor	✅	✅	✅	✅	⭐⭐
Object.prototype.toString.call()	✅	✅	✅	否	⭐⭐⭐⭐⭐

六、一句话总结

在 JavaScript 中，typeof 适合检测基本类型，instanceof 和 constructor 适合判断引用类型，而 Object.prototype.toString.call() 是唯一能准确判断所有数据类型的“终极方案”。

进阶建议

学习 ES6 的 Symbol.toStringTag，可以自定义对象的 toString() 表现；
使用 TypeScript 或 Flow 可以提前避免类型判断问题；
在 Vue / React 中结合 PropTypes 或 TypeScript 类型系统提升类型安全性；
使用 lodash.isXXX 系列函数进行类型判断；

以上就是JavaScript数据类型检测的四种常用方式详解的详细内容，更多关于JavaScript数据类型检测的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JavaScript如何实现数组内的值累加
我们会经常在开发过程中,需要获取数组中的值累加,所以下面这篇文章主要给大家介绍了关于JavaScript如何实现数组内的值累加的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
2023-11-11
javascript生成json数据简单示例分享
这篇文章主要介绍了javascript生成json数据示例,需要的朋友可以参考下
2014-02-02
使用原生JS实现拍照功能
今天我们聊一聊,一个非常有趣且重要的问题,如何用原生js实现拍照功能？这时候,有的朋友会说,为什么要用原生js实现呀,这么麻烦还要自己动脑子,直接用第三方库多好呀,但是,你难道不好奇它的底层js实现吗？感兴趣的同学跟着小编一起来瞧瞧吧
2023-12-12
javascript的trim,ltrim,rtrim自定义函数
今天用到javascript去掉一个文本框中字符串两端的空格，开始还以为有trim，ltrim，rtrim函数（asp中有这三个函数，弄混了），结果找半天，没有找到。最后找到用正则实现这样功能的自定义函数。
2008-09-09
一文解决前端JS小数运算精度问题
在做项目的时候,前端需要在表格的底部做一个汇总的功能,在采用reduce对当前属性所有值汇总时,发现汇总结果存在好长的小数位,本文给大家介绍了如何解决前端JS小数运算精度问题,需要的朋友可以参考下
2024-02-02
js导入导出excel(实例代码)
这篇文章主要是对js导入导出excel的实例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
基于bootstrap按钮式下拉菜单组件的搜索建议插件
这篇文章主要为大家详细介绍了基于bootstrap按钮式下拉菜单组件的搜索建议插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
javascript parseInt() 函数的进制转换注意细节
parseInt(string, radix) 有2个参数，第一个string 是传入的数值，第二个radix是传入数值的进制，参数radix 可以忽略，默认为 10，各种进制的数转换为十进制整数,接下来详细介绍，感兴趣的朋友可以了解下哦
2013-01-01
Echarts饼图样式之添加内圈阴影达到立体效果
饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,这篇文章主要给大家介绍了关于Echarts饼图样式之添加内圈阴影达到立体效果的相关资料,文中还介绍了echarts饼图外部阴影设置的方法,需要的朋友可以参考下
2024-02-02
JSON键值对序列化和反序列化解析
这篇文章主要介绍了JSON键值对序列化和反序列化知识，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
2017-01-01