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

 更新时间:2024年11月25日 12:00:45   作者:guokanglun  
`Object.prototype.toString.call()`是JavaScript中判断数据类型的强大方法,可以精确区分所有内置类型,包括原始类型和对象类型,适用于跨环境检测和区分自定义类实例,感兴趣的朋友跟随小编一起看看吧

Object.prototype.toString.call() 的详解

Object.prototype.toString.call() 是 JavaScript 中判断数据类型的强大方法。它可以精确区分所有的 JavaScript 内置类型,包括原始类型和对象类型。

语法

Object.prototype.toString.call(value)
  • value 是要检测类型的变量。
  • 返回结果是一个类似 "[object Type]" 的字符串,其中 Type 是该变量的类型名称。

为什么使用它?

  • 准确性:它可以区分 nullundefined,以及各种内置对象(如 ArrayDate 等)。
  • 通用性:不依赖环境或原型链,可以用于跨环境的类型判断。

返回值

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

数据类型返回值
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]

适用场景

区分 nullobject

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实现手机震动API代码

    javascript实现手机震动API代码

    一个新的API出来了。HTML5 (很快)将支持用户设备振动。这明显是很有趣的事情,比如它可以用户触发提醒,提升游戏体验,下面小编给大家整理javascript手机震动api,需要的朋友可以参考下
    2015-08-08
  • Webpack常见使用配置小结

    Webpack常见使用配置小结

    本文主要介绍了Webpack常见使用配置小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • webpack常用配置总览(小结)

    webpack常用配置总览(小结)

    这篇文章主要介绍了webpack常用配置总览(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 通过js修改input、select默认字体颜色

    通过js修改input、select默认字体颜色

    这篇文章主要介绍了通过js修改input、select默认字体颜色,需要的朋友可以参考下
    2017-04-04
  • 让getElementsByName适应IE和firefox的方法

    让getElementsByName适应IE和firefox的方法

    让getElementsByName适应IE和firefox的方法...
    2007-09-09
  • js+css实现tab菜单切换效果的方法

    js+css实现tab菜单切换效果的方法

    这篇文章主要介绍了js+css实现tab菜单切换效果的方法,以实例形式完整讲述了css与js的实现代码,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • js数组的基本使用总结

    js数组的基本使用总结

    这篇文章主要给大家介绍了关于js数组的基本使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Microsoft Ajax Minifier 压缩javascript的方法

    Microsoft Ajax Minifier 压缩javascript的方法

    使用Microsoft AJAX 库 (第六个预览版) 其中有一个 ajaxmin.exe 可以压缩Js文件可以在dos 命令下 /? 查看其参数说明。
    2010-03-03
  • Java 生成随机字符的示例代码

    Java 生成随机字符的示例代码

    这篇文章主要介绍了Java 生成随机字符的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • js 函数的副作用分析

    js 函数的副作用分析

    函数副作用 指当调用函数时,除了返回函数值之外,还对主调用函数产生附加的影响。例如修改全局变量(函数外的变量)或修改参数。
    2011-08-08

最新评论