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实现的淘宝旅行通用日历组件,以实例形式分析了该日历组件的相关设置及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
js跟随滚动条滚动浮动代码
js跟随滚动条滚动浮动代码，对于firefox不兼容。
2009-12-12
JS获取年月日时分秒的方法分析
这篇文章主要介绍了JS获取年月日时分秒的方法,结合实例形式分析了JS获取具体时间的常犯错误与相应解决方法,需要的朋友可以参考下
2016-11-11
微信小程序自定义底部弹出框动画
这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
uni-app实现web-view图片长按下载解决方案
uniapp的web-view中图片无法长按保存，IOS下是正常的，但是Android下长按无反应，这篇文章主要介绍了uni-app实现web-view图片长按下载解决方案,需要的朋友可以参考下
2023-09-09
Javascript中字符串和数字的操作方法整理
字符串和数字的操作在js中非常频繁，也非常重要。以往看完书之后都能记得非常清楚，但稍微隔一段时间不用，便会忘得差不多，记性不好是硬伤啊。下面这篇文章就对字符串和数字的一些常用操作做个整理，一者加深印象，二者方便今后温习查阅。需要的朋友们可以参考借鉴。
2017-01-01
javascript实现tab切换的两个实例
这篇文章主要介绍了javascript实现tab切换的两个实例，是对之前方法原理的进一步延伸，需要深入了解的同学可以参考一下
2015-11-11
underscore 防抖技巧学习示例
这篇文章主要为大家介绍了underscore 防抖技巧学习示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
javascript实现获取图片大小及图片等比缩放的方法
这篇文章主要介绍了javascript实现获取图片大小及图片等比缩放的方法,涉及javascript针对图形图像相关属性获取与修改相关操作技巧,需要的朋友可以参考下
2016-11-11
Solid.js和React框架的多维度比较
2025年有5个框架脱颖而出,成为开发者们关注的焦点,其中React和SolidJS更是引发了广泛讨论,这篇文章主要介绍了Solid.js和React框架的多维度比较,需要的朋友可以参考下
2026-05-05