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