JavaScript数据类型判断之Object.prototype.toString.call() 的详解(示例)

更新时间：2024年11月25日 12:00:45 作者：guokanglun

`Object.prototype.toString.call()`是JavaScript中判断数据类型的强大方法,可以精确区分所有内置类型,包括原始类型和对象类型,适用于跨环境检测和区分自定义类实例,感兴趣的朋友跟随小编一起看看吧

语法

Object.prototype.toString.call(value)

value 是要检测类型的变量。
返回结果是一个类似 "[object Type]" 的字符串，其中 Type 是该变量的类型名称。

为什么使用它？

准确性：它可以区分 null 和 undefined，以及各种内置对象（如 Array、Date 等）。
通用性：不依赖环境或原型链，可以用于跨环境的类型判断。

返回值

以下是常见数据类型及其对应的返回值：

数据类型	返回值
`Number`	`[object Number]`
`String`	`[object String]`
`Boolean`	`[object Boolean]`
`Undefined`	`[object Undefined]`
`Null`	`[object Null]`
`Array`	`[object Array]`
`Object`	`[object Object]`
`Function`	`[object Function]`
`Date`	`[object Date]`
`RegExp`	`[object RegExp]`
`Error`	`[object Error]`
`Symbol`	`[object Symbol]`
`Map`	`[object Map]`
`Set`	`[object Set]`
`WeakMap`	`[object WeakMap]`
`WeakSet`	`[object WeakSet]`
`BigInt`	`[object BigInt]`
自定义类实例	`[object Object]`

示例

// 基本类型
console.log(Object.prototype.toString.call(123)); // [object Number]
console.log(Object.prototype.toString.call("hello")); // [object String]
console.log(Object.prototype.toString.call(true)); // [object Boolean]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(null)); // [object Null]
// 对象类型
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call(function() {})); // [object Function]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
console.log(Object.prototype.toString.call(/abc/)); // [object RegExp]
// 特殊对象
console.log(Object.prototype.toString.call(new Map())); // [object Map]
console.log(Object.prototype.toString.call(new Set())); // [object Set]
console.log(Object.prototype.toString.call(Symbol())); // [object Symbol]
console.log(Object.prototype.toString.call(BigInt(123))); // [object BigInt]

适用场景

区分 null 和 object：

console.log(typeof null); // "object" (误导性结果)
console.log(Object.prototype.toString.call(null)); // [object Null]

区分对象类型：

console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call({})); // [object Object]

跨环境检测：
在不同的 JavaScript 环境中（如浏览器和 Node.js），使用 instanceof 有时可能会失败，而 Object.prototype.toString.call() 是可靠的。

封装为通用函数

可以封装为一个类型检测工具：

function getType(value) {
  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}
console.log(getType(123)); // "number"
console.log(getType(null)); // "null"
console.log(getType([])); // "array"
console.log(getType(new Map())); // "map"
console.log(getType(() => {})); // "function"

注意事项

自定义类实例（非内置对象）都会返回 [object Object]，如果需要区分，可以结合 constructor.name：

class MyClass {}
const instance = new MyClass();
console.log(Object.prototype.toString.call(instance)); // [object Object]
console.log(instance.constructor.name); // MyClass

无法检测用户定义的 Symbol.toStringTag 修改：

const obj = { [Symbol.toStringTag]: "CustomTag" };
console.log(Object.prototype.toString.call(obj)); // [object CustomTag]

Object.prototype.toString.call() 是一种强大的数据类型判断方法，特别适用于复杂类型判断。

到此这篇关于JavaScript数据类型判断之Object.prototype.toString.call() 的详解的文章就介绍到这了,更多相关js Object.prototype.toString.call()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Javascript 闭包引起的IE内存泄露分析
Javascript 闭包引起的IE内存泄露分析，js_obj是一个DOM元素的引用，DOM元素它长期在网页当中，不会消失，而这个DOM元素的一属性
2012-05-05
javascript编写简易计算器
这篇文章主要为大家详细介绍了javascript编写简易计算器的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
js实现简单进度条效果
这篇文章主要为大家详细介绍了js实现简单进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_
这篇文章主要介绍了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}，非常具有实用价值，需要的朋友可以参考下
2018-10-10
JS实现的缓冲运动效果示例
这篇文章主要介绍了JS实现的缓冲运动效果,涉及JavaScript数值运算与时间函数相关使用技巧,需要的朋友可以参考下
2018-04-04
momentjs实现DatePicker时间禁用的项目实践
momentjs是一个处理时间的js库,简洁易用,本文来介绍一下momentjs实现DatePicker时间禁用,具有一定的参考价值,感兴趣的可以了解一下
2023-09-09
通过JavaScript实现动态圣诞树详解
这篇文章主要为大家介绍几个好看的基于HTML+CSS+JS的圣诞树，希望圣诞节那天圣诞老爷爷能把我喜欢的你塞到我床上。感兴趣的小伙伴可以跟随小编一起学习一下
2021-12-12
向当前style sheet中插入一个新的style实现方法
今天为了临时解决页面样式问题，为了方便，直接在这个公共的js里面向style sheet插入新的style rule，感兴趣的朋友可以出纳卡下哈
2013-04-04
详解JavaScript按概率随机生成事件
本篇文章主要介绍了详解JavaScript按概率随机生成事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
VScode中配置JavaScript编译环境的方法
这篇文章主要介绍了VSCODE中配置JavaScript编译环境的方法，方式一使用Node.js做为解释器运行JS代码 Node.js的安装和配置，方式二使用VSCODE插件Code Runner运行JS代码，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08