JavaScript 判断变量的类型

深山涧水

JavaScript 中有多种方法来判断一个变量的类型。

• 1、typeof 操作符，它可以返回一个字符串来描述变量的类型，如：
  

1. console.log(typeof "hello");  // string
2. console.log(typeof 123);  // number
3. console.log(typeof true);  // boolean
4. console.log(typeof {});  // object
5. console.log(typeof []);  // object
6. console.log(typeof undefined);  // undefined
7. console.log(typeof null);  // object

复制代码

• 2、instanceof 操作符，可以用来判断一个变量是否是某个类的实例，如：
  

1. console.log("hello" instanceof String);  // false
2. console.log(new String("hello") instanceof String);  // true
3. console.log([1, 2, 3] instanceof Array);  // true
4. console.log({} instanceof Object);  // false

复制代码

• 3、Object.prototype.toString.call() 方法，可以返回变量的类型，如：
  

1. console.log(Object.prototype.toString.call("hello"));  // [object String]
2. console.log(Object.prototype.toString.call(123));  // [object Number]
3. console.log(Object.prototype.toString.call(true));  // [object Boolean]
4. console.log(Object.prototype.toString.call({}));  // [object Object]
5. console.log(Object.prototype.toString.call([]));  // [object Array]
6. console.log(Object.prototype.toString.call(undefined));  // [object Undefined]
7. 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 属性，该属性指向创建该对象的函数。可以使用该属性来判断变量的类型。
  

1. console.log("hello".constructor === String);   // true
2. console.log((123).constructor === Number);     // true
3. console.log([].constructor === Array);         // true
4. console.log({}.constructor === Object);        // true
5. console.log(true.constructor === Boolean);     // true
6. console.log(undefined.constructor === undefined);   // true
7. 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() 类似
  

1. console.log("hello"[Symbol.toStringTag]);  // "String"
2. console.log(123[Symbol.toStringTag]);  // "Number"
3. console.log(true[Symbol.toStringTag]);  // "Boolean"
4. console.log({}[Symbol.toStringTag]);  // "Object"
5. console.log([] [Symbol.toStringTag]);  // "Array"
6. console.log(undefined[Symbol.toStringTag]);  // "Undefined"
7. console.log(null[Symbol.toStringTag]);  // "Null"
8. console.log(()=>{}[Symbol.toStringTag]);  // "Function"

复制代码

注意，在使用该方法时需要确保目标浏览器支持ES6的 Symbol 类型，或者使用 babel 等工具进行转换。

• 6、使用第三方库，如 lodash 的 isXXX 系列函数，可以用来判断变量的类型。这些函数的使用方式非常简单，直接调用对应的函数即可，如：
  

1. console.log(_.isString("hello"));  // true
2. console.log(_.isNumber(123));  // true
3. console.log(_.isBoolean(true));  // true
4. console.log(_.isObject({}));  // true
5. console.log(_.isArray([]));  // true
6. console.log(_.isUndefined(undefined));  // true
7. console.log(_.isNull(null));  // true
8. console.log(_.isFunction(() => {}));  // true

复制代码

使用这些函数可以避免在不同环境中类型判断出现问题，更加严谨。
 
综上，JavaScript 中有多种方法来判断变量的类型，如 typeof、instanceof、Object.prototype.toString.call()、constructor属性、Symbol.toStringTag属性以及 lodash 等第三方库，在使用时需要根据实际需求来选择使用。

来源:https://www.cnblogs.com/yuzhihui/p/17055887.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！