JavaScript - typeof 運算子

上一頁
下一頁

typeof 運算子

在 JavaScript 中，typeof 運算子是一個一元運算子，用於獲取特定變數的資料型別。它放在其單個運算元之前，該運算元可以是任何型別。它返回一個字串值，指示其運算元的資料型別。JavaScript 包含基本資料型別和非基本資料型別。

JavaScript 中有七種基本資料型別 - 數字、字串、布林值、未定義、空、符號和大整數。還有一個稱為物件的複合資料型別。物件資料型別包含三個子資料型別 - 物件、陣列和日期。

語法

以下是 typeof 運算子的語法：

typeof (operand);

我們可以如下所示編寫不帶括號的運算元：

typeof operand;

引數

  • 運算元 - 它可以是表示物件或基本型別的值、變數或表示式。在 JavaScript 中，基本型別是不具有方法或屬性的物件的資料。

返回值

  • 它返回一個字串值，表示運算元的資料型別。

typeof 運算子返回的資料型別

以下是typeof運算子的返回值列表。

型別 typeof 返回的字串
數字 "number"
字串 "string"
布林值 "boolean"
物件 "object"
函式 "function"
未定義 "undefined"
空 "object"
符號 "symbol"
大整數 "bigint"

JavaScript 中有七種基本資料型別 - 數字、字串、布林值、大整數、未定義、空和符號。typeof 運算子用於識別這些基本資料型別。

typeof 運算子返回所有基本型別的值的相同資料型別，除了空值。它為空值返回“object”。

對於物件、日期和陣列，它返回“object”作為資料型別。

對於函式和類，它返回“function”作為資料型別。

讓我們使用 typeof 運算子逐一識別這些資料型別。

typeof 10; // returns 'number'
typeof 'Hello World'; // returns 'string'
typeof true; // returns 'boolean'
typeof {name:"Tutorialspoint"}; // returns 'object'
typeof function foo(){};// returns 'function'
typeof undefined; // returns 'undefined'
typeof null; // returns 'object'
typeof Symbol(); // returns 'symbol'
typeof 10n; // returns 'bigint'

JavaScript typeof 運算子檢查數字型別

在 JavaScript 中，數字型別表示數值。JavaScript 對所有數字使用浮點表示法。JavaScript typeof 運算子對所有型別的數字（如整數、浮點數、零、Infinity、NaN 等）返回“number”。

typeof 10; //returns "number";
typeof -10; //returns "number";
typeof 0; //returns "number";
typeof 10.20; //returns "number";
typeof Math.LN10; //returns "number";
typeof Infinity; //returns "number";
typeof NaN; //returns "number";
typeof Number('1'); //returns "number";
typeof Number('hello'); //returns "number";

示例

以下示例演示瞭如何使用 typeof 運算子檢查數字資料型別。

<html>
   <body>
      <p> Using typeof operator to check number data type </p>
      <div id="output"></div>
      <script>
         let num = 42;
         document.getElementById("output").innerHTML = typeof num;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

Using typeof operator to check number data type
number
Set the variable to different value and then try...

JavaScript typeof 運算子檢查字串型別

字串表示字元序列。typeof 運算子有助於識別字符串變數。JavaScript 的 typeof 運算子對於所有型別的字串都返回 "string"，例如空字串、字元字串、單詞字串、多行字串等。

typeof "10"; //returns "string";
typeof ""; //returns "string";
typeof "Hello World"; //returns "string";
typeof String(10); //returns "string";
typeof typeof 2; //returns "string";

示例

在下面的示例中，我們使用 typeof 運算子來檢查字串資料型別。

<html>
   <body>
      <div id="output"></div>
      <script>
         let str = "Hello World";
         document.getElementById("output").innerHTML = typeof str;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

string
Set the variable to different value and then try...

JavaScript typeof 運算子檢查布林型別

布林值表示真或假。tyepof 運算元對布林變數返回布林值。

typeof true; //returns "boolean";
typeof false; //returns "boolean";
typeof Boolean(10); //returns "boolean";

示例

在下面的示例中，我們使用 typeof 運算子來檢查布林資料型別。

<html>
   <body>
      <div id="output"></div>
      <script>
         let bool = true;
         document.getElementById("output").innerHTML = typeof bool;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

boolean
Set the variable to different value and then try...

JavaScript typeof 運算子檢查 Symbol 型別

Symbol 在 ES6 中引入，提供了一種建立唯一識別符號的方法。使用 typeof 運算子與 Symbol 一起使用時，會返回 "symbol"。

typeof Symbol(); //returns "symbol";
typeof Symbol("unique values"); //returns "symbol";

示例

在下面的示例中，我們使用 typeof 運算子來檢查 Symbol 資料型別。

<html>
   <body>
      <div id="output"></div>
      <script>
         let sym = Symbol("Hello");
         document.getElementById("output").innerHTML = typeof sym;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

symbol
Set the variable to different value and then try...

JavaScript typeof 運算子檢查 Undefined 和 Null

"undefined" 型別表示缺少值。"null" 型別表示沒有任何物件值。當使用 typeof 運算子與未定義變數一起使用時，它會返回 'undefined'。令人驚訝的是，使用 typeof 運算子與 null 一起使用也會返回 "object"，這是 JavaScript 中已知的怪癖。

typeof undefined; //returns "undefined";
typeof null; //returns "object";

請注意，typeof 運算子將對未宣告的變數和已宣告但未賦值的變數都返回 "undefined"。

示例

在下面的示例中，我們使用 typeof 運算子來檢查 undefined 資料型別。

<html>
   <body>
      <div id="output"></div>
      <script>
         let x;
         document.getElementById("output").innerHTML = typeof x;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

undefined
Set the variable to different value and then try...

JavaScript typeof 運算子檢查物件型別

對於所有型別的物件，例如 JavaScript 物件、陣列、日期、正則表示式等，JavaScript typeof 運算子都返回 "object"。

const obj = {age: 23};
typeof obj; //returns "object";
const arr = [1,2,3,4];
typeof arr; //returns "object";
typeof new Date(); //returns "object";
typeof new String("Hello World"); //returns "object";

示例

在下面的示例中，我們使用 typeof 運算子來檢查物件資料型別。

<html>
   <body>
      <div id="output"></div>
      <script>
         const person = {name: "John", age: 34};
         document.getElementById("output").innerHTML = typeof person;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

object
Set the variable to different value and then try...

JavaScript typeof 運算子檢查函式型別

函式在 JavaScript 中是頭等公民。JavaScript typeof 運算子對所有型別的函式都返回 "function"。有趣的是，它對類也返回 "function"。

const myFunc = function(){return "Hello world"};
typeof myFunc; //returns "function";
const func = new Function();
typeof func; //returns "function";
class myClass {constructor() { }}
typeof myClass; // returns "function";

示例

在下面的示例中，我們使用 typeof 運算子來檢查函式資料型別。

<html>
   <body>
      <div id="output"></div>
      <script>
         const myFunc = function(){return "Hello world"};
         document.getElementById("output").innerHTML = typeof myFunc;
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

function
Set the variable to different value and then try...

JavaScript typeof 運算子檢查 BigInt 型別

typeof 運算子對 BigInt 數字返回 "bigint"。BigInt 值是數值，其大小超過了 number 原語所能表示的範圍。

typeof 100n; // returns "bigint"

JavaScript typeof 運算子在即時開發中的應用

例如，開發人員從 API 獲取資料。如果只有一個字串，API 返回字串響應，對於多個字串，API 返回字串陣列。在這種情況下，開發人員需要檢查響應的型別是字串還是陣列，如果是陣列，則需要遍歷陣列的每個字串。

示例

在下面的示例中，我們檢查 'response' 變數的型別並相應地列印其值。

<html>
   <body>
      <script>
         const response = ["Hello", "World!", "How", "are", "you?"];

         if (typeof response == "string") {
            document.write("The response is - ", response);
         } else {
            document.write("The response values are : ");
			
            // Traversing the array
            for (let val of response) {
               document.write(val, " ");
            }
         }
      </script>
   </body>
</html>

輸出

The response values are : Hello World! How are you?

JavaScript 陣列和 typeof 運算子

儘管陣列在 JavaScript 中是一種物件型別，但它們在使用 typeof 運算子時具有不同的行為。

let numbers = [1, 2, 3];
typeof numbers; // Output: 'object'

使用 typeof 運算子時，陣列返回 "object"，因此為了精確檢測陣列，通常最好使用 Array.isArray()。

示例

<html>
   <body>
      <div id="output"></div>
      <script>
         let numbers = [1, 2, 3];
         document.getElementById("output").innerHTML = Array.isArray(numbers);
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

輸出

true
Set the variable to different value and then try..
列印頁面
上一頁
下一頁
廣告