JavaScript 判斷變數的型別

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 等第三方庫，在使用時需要根據實際需求來選擇使用，

標籤：其他

上一篇：JavaScript 淺拷貝和深拷貝

下一篇：輕松解決 CSS 代碼都在一行的問題