在 JavaScript 中獲取變數的型別

1. 使用 typeof 運算子查詢變數的型別
2. 在條件檢查中使用 typeof 運算子
3. 總結

與 C、Java 等其他程式語言相比，JavaScript 使開發人員可以自由地使用單個關鍵字（var 關鍵字）定義任何型別的變數。反過來，JavaScript 會根據分配給這些變數的值來決定變數的資料型別。確定變數的資料型別似乎很容易。但是有些情況可以讓我們解決問題。特別是在伺服器的 REST API 響應返回值的情況下，我們可能需要在進一步編碼處理之前知道值或變數的型別。

使用 typeof 運算子查詢變數的型別

typeof 是 JavaScript 中的一元運算子，它返回應用它的運算元的型別。它通常將變數型別作為字串物件返回。javascript 中的 typeof 操作符有標準的返回型別。

• string：typeof 返回 string 用於變數型別字串。
• number：它為儲存整數或浮點值的變數返回 number。
• boolean：對於儲存 true 或 false 值的變數，typeof 返回 boolean。
• undefined：如果我們不為變數賦值，則變數的型別將被 JavaScript 標記為 undefined。因此，對於此類未宣告的變數，typeof 運算元將返回 undefined。
• object：對於儲存陣列的變數，或 {} 中的物件，或分配有 null 值的變數，javascript 將此類變數的型別視為物件。因此，typeof 運算元將返回 object。
• function：JavaScript 允許我們將函式分配給變數。對於這種情況，此類變數的型別將是 function。typeof 運算子將為函式賦值返回 function。

以下程式碼片段演示了 typeof 運算子在不同變數賦值和不同場景下的行為。

var s1 = "hello";
var n1 = 120;
var n1 = 11.1234;
var b1 = true;
var x;
var u = undefined;
var o1 = null;
var o2 = { id: 1, value: 200 };
var o3 = [1,2,3];
var f = function() { return 1 + 2 };

console.log(typeof s1);
console.log(typeof n1);
console.log(typeof n1);
console.log(typeof b1);
console.log(typeof x);
console.log(typeof u);
console.log(typeof o1);
console.log(typeof o2);
console.log(typeof o3);
console.log(typeof f);

輸出：

"string"
"number"
"number"
"boolean"
"undefined"
"undefined"
"object"
"object"
"object"
"function"

在條件檢查中使用 typeof 運算子

我們可以在條件檢查中使用 typeof 運算子，例如在 if 塊中，通過檢查運算子返回的值並將其與標準型別值進行比較。我們使用 === 運算子進行比較，因為它包括對運算子兩端運算元的型別檢查。

var a = "hello";
if (typeof a === "string") {
    console.log(true)
}

輸出：

true

同樣，我們可以對 number、boolean、object 甚至是 function 進行條件檢查。作為最佳實踐，我們應該為 JavaScript 的 typeof 運算子返回的標準資料型別建立一個常量變數。然後，將變數的 typeof 與宣告的常量進行比較。這種方法可以在編寫條件塊時輕鬆編碼並減少拼寫錯誤，這些條件塊通常不會一目瞭然。參考以下程式碼更好理解。

const STRING_TYPE = "string";
const NUMBER_TYPE = "number";
var a = "hello";
var b = 123;
if (typeof a === STRING_TYPE) {
    console.log(true)
}
if (typeof b === NUMBER_TYPE) {
    console.log(true)
}

輸出：

true
true

總結

• 對於使用 new 關鍵字分配變數的情況，javascript 會將此類分配視為物件。因此，對於此類賦值，typeof 運算子將返回 object。參考以下程式碼。

var s = new String("hello");
var n = new Number(100);
console.log(typeof s);
console.log(typeof n);

輸出：

object
object

• 如果我們使用 new 關鍵字分配函式，則此類變數的資料型別將被 javascript 視為函式。帶有 new function() 的 typeof 變數將作為 function 而不是 object 返回。讓我們看看下面的程式碼。

var fn = new Function();

輸出：

"function"

• 所有瀏覽器都支援 javascript 的 typeof 運算子，包括舊版本的 Internet Explorer。因此，我們可以在支援多個瀏覽器的專案中毫無顧慮地使用運算子。