如何在 JavaScript 中檢查 null、undefined 或空變數？

在本教程中，我們將學習如何在 JavaScript 中檢查 null、undefined 或空變數。沒有特定的內建庫函式來檢查變數是否為undefined 或null。但是，我們可以使用一些運算子，例如typeof 運算子和等號運算子來檢查變數。

在繼續本教程之前，讓我們先澄清一下 null、undefined 或空變數之間的區別。

Null 與 Undefined

我們可以說 Null 和 undefined 變數幾乎相同，但並不完全相同。

  • Undefined 變數 - 它是在程式中未宣告的變數，編譯器對該變數一無所知。

  • Null 變數 - 它是一個已宣告的變數，但我們尚未為其賦值。

Null 變數的型別是物件，當我們不為 Null 變數賦值時，它會自動賦值為'undefined' 值。此外，我們可以有意地將 null 值賦給變數以使其為空，也稱為 null 變數。下面，使用者可以看到 null 和 undefined 的值相同，但資料型別不同。

let result = null == undefined // returns true
let result = null === undefined // returns false

空變數與Null變數相同，它不包含任何值。

使用嚴格相等運算子 (===) 檢查 null 變數

在這種方法中，我們將使用嚴格相等運算子來檢查變數是否為 null、空或 undefined。如果我們在宣告時不為變數賦值，JavaScript 編譯器會將其賦值為 'undefined' 值。因此，我們可以檢查如果變數包含 null 值或 undefined 值，則表示我們有一個 null 變數。

語法

if (variable == null || variable === 'undefined') {
   
   // variable is undefined or null
}

示例

在下面的示例中，我們聲明瞭兩個變數。在第一個變數中，我們分配了 null 值，在另一個變數中，我們沒有分配值。我們正在使用上述方法檢查它是否為 null，使用者可以在輸出中看到結果。

<html>
<body>
   <h2>Check for variable is undefined or null using <i>strict equality operator</i></h2>
   <h4>output for let var1 = null;</h4>
   <div id = "output1"></div>
   <h4>output for let var1;</h4>
   <div id = "output2"> </div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      function checkVar( variable ) {
         if (variable == null || variable === 'undefined') {
            return " varaible is undefined or null; "
         } else {
            return " variable is properly defined and its value is " + variable;
         }
      }
      let var1 = null;
      let var2;
      output1.innerHTML = checkVar(var1);
      output2.innerHTML = checkVar(var2);
   </script>
</body>
</html>

使用 typeof 運算子

當變數為 undefined 時，表示該變數未宣告。使用者不能像上述方法那樣在 'if-else' 條件語句中使用它。要檢查未宣告變數的型別，我們可以使用typeof 運算子。typeof 運算子將變數作為運算元並返回變數型別。作為typeof 的運算元，我們也可以使用未宣告的變數。

語法

let type = typeof ( variable ) // returns ‘undefined’ for undeclare variable.

示例

在下面的示例中，我們建立了一個變數併為其分配了一個 null 值。我們使用帶有 null 值變數的typeof 運算子，它返回'object'。此外，我們使用 typeof 運算子與第二個變數一起使用，該變數未宣告；它返回 'undefined'。

<html>
<head>
   <title>Check for variable is undefined or null in JavaScript.</title>
</head>
<body>
   <h2>Check for variable is undefined or using <i> typeof operator</i>.
   </h2>
   <h4>output for let var1 = null;</h4>
   <div id = "output1"> </div>
   <h4>output for undeclared variable;</h4>
   <div id = "output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let var1 = null;
      output1.innerHTML = typeof ( var1 );
      output2.innerHTML = typeof ( var2 ); // checking the type of undeclared variable
   </script>
</body>
</html>

在上面的輸出中，使用者可以看到 typeof 運算子為 null 變數返回物件資料型別。

我們已經學習瞭如何檢查變數是否為 undefined 或 null。null 和 undefined 變數之間的區別在於這兩個變數的資料型別；null 變數為物件型別，undefined 為 undefined 資料型別。

如果使用者正在檢查 null 變數，則可以使用第一種方法使用 if-else 條件語句。要檢查未宣告的變數，使用者必須使用第二種方法。否則，當我們使用未宣告的變數時，JavaScript 程式碼會報錯。

更新於: 2022年8月8日

16K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始
廣告