如何在JavaScript中檢查空、未定義或空白變數？

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

在繼續本教程之前，讓我們澄清一下空、未定義或空白變數之間的區別。

空值 VS 未定義

我們可以說空值和未定義變數幾乎相同，但並不完全一樣。

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

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

空值變數的型別是物件，當我們不為空值變數賦值時，它會自動賦值為'undefined'。我們也可以故意將空值賦給變數以使其保持為空，也稱為空值變數。下面，使用者可以看到空值和未定義的值相同，但資料型別不同。

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

空白變數與不包含任何值的空值變數相同。

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

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

語法

if (variable == null || variable === 'undefined') {
   
   // variable is undefined or 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運算子

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

語法

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

示例

在下面的示例中，我們建立了一個變數併為其賦予了空值。我們使用帶有空值變數的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變數返回物件資料型別。

我們學習瞭如何檢查變數是否未定義或為空。空值和未定義變數之間的區別在於這兩個變數的資料型別；空值變數是物件型別，未定義是未定義資料型別。

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

更新於：2022年8月8日

16K+ 瀏覽量

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.