在 JavaScript 中獲取變數的型別

Nithin Krishnan 2023年1月30日 2021年10月2日
  1. 使用 typeof 運算子查詢變數的型別
  2. 在條件檢查中使用 typeof 運算子
  3. 總結
在 JavaScript 中獲取變數的型別

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

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

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

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

同樣,我們可以對 numberbooleanobject 甚至是 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。因此,我們可以在支援多個瀏覽器的專案中毫無顧慮地使用運算子。

相關文章 - JavaScript Variable