JavaScript 中有多种方法来判断一个变量的类型。
- 1、
typeof
操作符,它可以返回一个字符串来描述变量的类型,如:
console.log(typeof "hello"); // string
console.log(typeof 123); // number
console.log(typeof true); // boolean
console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof undefined); // undefined
console.log(typeof null); // object
- 2、
instanceof
操作符,可以用来判断一个变量是否是某个类的实例,如:
console.log("hello" instanceof String); // false
console.log(new String("hello") instanceof String); // true
console.log([1, 2, 3] instanceof Array); // true
console.log({} instanceof Object); // false
- 3、
Object.prototype.toString.call()
方法,可以返回变量的类型,如:
console.log(Object.prototype.toString.call("hello")); // [object String]
console.log(Object.prototype.toString.call(123)); // [object Number]
console.log(Object.prototype.toString.call(true)); // [object Boolean]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(null)); // [object Null]
值得注意的是,在判断null时,typeof 和 Object.prototype.toString.call() 都会返回 'object',而 instanceof 会返回false,此时可以使用 x === null
来判断是否是null。
- 4、使用 JavaScript 原生的
constructor
属性。每个对象都有一个constructor
属性,该属性指向创建该对象的函数。可以使用该属性来判断变量的类型。
console.log("hello".constructor === String); // true
console.log((123).constructor === Number); // true
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log(true.constructor === Boolean); // true
console.log(undefined.constructor === undefined); // true
console.log(null.constructor === null); // Uncaught TypeError: Cannot read property 'constructor' of null
但是这种方法有一个缺陷,当变量是 null
或 undefined
时,访问该变量的 constructor
属性会抛出错误。
需要注意的是,以上所有方法在判断函数时都会返回 'function',如果需要精确的函数类型,可以使用 Object.prototype.toString.call() 来获取类型 "[object Function]" 或者使用 Function.name 来获取函数名称。
- 5、使用ES6新增的
Symbol.toStringTag
属性,它可以返回一个字符串来描述变量的类型,这个方法与使用 Object.prototype.toString.call() 类似
console.log("hello"[Symbol.toStringTag]); // "String"
console.log(123[Symbol.toStringTag]); // "Number"
console.log(true[Symbol.toStringTag]); // "Boolean"
console.log({}[Symbol.toStringTag]); // "Object"
console.log([] [Symbol.toStringTag]); // "Array"
console.log(undefined[Symbol.toStringTag]); // "Undefined"
console.log(null[Symbol.toStringTag]); // "Null"
console.log(()=>{}[Symbol.toStringTag]); // "Function"
注意,在使用该方法时需要确保目标浏览器支持ES6的 Symbol 类型,或者使用 babel 等工具进行转换。
- 6、使用第三方库,如
lodash
的isXXX
系列函数,可以用来判断变量的类型。这些函数的使用方式非常简单,直接调用对应的函数即可,如:
console.log(_.isString("hello")); // true
console.log(_.isNumber(123)); // true
console.log(_.isBoolean(true)); // true
console.log(_.isObject({})); // true
console.log(_.isArray([])); // true
console.log(_.isUndefined(undefined)); // true
console.log(_.isNull(null)); // true
console.log(_.isFunction(() => {})); // true
使用这些函数可以避免在不同环境中类型判断出现问题,更加严谨。
综上,JavaScript 中有多种方法来判断变量的类型,如 typeof
、instanceof
、Object.prototype.toString.call()
、constructor
属性、Symbol.toStringTag
属性以及 lodash
等第三方库,在使用时需要根据实际需求来选择使用。