JavaScript 中的 NaN 是什麼？

在本教程中，我們將學習 JavaScript 中的NaN。NaN 只是全域性物件的屬性，代表非數字。它主要用於檢查輸入的值是否為數字。NaN 和 Number.NaN 是一樣的，所以下次不要混淆，如果程式中寫了 Number.NaN，它與 NaN 相同。NaN 屬性很少在任何程式中使用，因為在程式中使用 NaN 來標識任何東西並不是一個好習慣。

有一個全域性的isNaN()方法可以完成這項任務，如果傳遞給它的引數不是數字，則返回 true。否則，它將返回 false。

語法

下面的語法將向您展示如何用等於 NaN 的值賦值給變數，以及如何在 JavaScript 中使用 isNaN() 方法的語法：

Number.isNaN
     OR
isNaN(Number);

在上面的語法中，我們已經為變數賦值了 NaN 值，然後使用 isNaN() 方法檢查它是否是 NaN。

讓我們透過實際實現程式碼示例來詳細瞭解 isNaN() 方法和 NaN 屬性的用法。

演算法

步驟 1 - 在演算法的第一步中，我們將在 HTML 文件中定義一個輸入標籤，以獲取使用者輸入的值，以便檢查任何型別的輸入。

步驟 2 - 在這一步中，我們將定義一個帶有 onclick 事件的按鈕，稍後當用戶單擊該按鈕時，它將呼叫一個回撥函式。

步驟 3 - 在下一步中，我們定義一個 JavaScript 函式，該函式將作為回撥函式傳遞給上一步中定義的按鈕的 onclick 事件。

步驟 4 - 在最後一步中，我們將獲取使用者輸入的值，並使用isNaN()方法檢查它是否為數字，並編寫邏輯以根據提供的條件在螢幕上輸出合適的文字。

示例 1

要找出某個值是否為 NaN，請使用 Number.isNaN() 或 isNan() 方法。這是一個檢查示例：

<!DOCTYPE html>
<html>
<body>
   <button onclick="display()">Check</button>
   <p id="test"></p>
   <script>
      function display() {
         var a = "";
         a += "isNaN(6234) : " + isNaN(6234);
         a += "<br>isNaN(-52.1) : " + isNaN(-52.1);
         a += "<br>isNaN('Hello') : " + isNaN('Hello');
         a += "<br>isNaN(NaN) : " + isNaN(NaN);
         a += "<br>isNaN('') : " + isNaN('');
         a += "<br>isNaN(0) : " + isNaN(0);
         a += "<br>isNaN(false) : " + isNaN(false);
         document.getElementById("test").innerHTML = a;
      }
   </script>
</body>
</html>

示例 2

下面的示例將解釋如何使用isNaN()方法來檢查輸入的值是否為數字或非數字：

<!DOCTYPE html>
<html>
<body>
   <h4> Enter any value: </h4>
   <input type="text" id="inp1"> <br> <br>
   <p> Click the below button to check the entered value is a number or not a number (NaN). </p>
   <p id="result"> </p>
   <button onclick="display()"> Check here </button>
   <script>
      var result = document.getElementById("result");

      function display() {
         var inp1 = document.getElementById("inp1");
         var val1 = Number(inp1.value);
         var check = Number.isNaN(val1);
         if (check) {
            result.innerHTML += " The value you entered <b> " + val1 + " </b> is not a number (NaN). <br> ";
         } else {
            result.innerHTML += " The value you entered <b> " + val1 + " </b> is a number. <br> ";
         }
      }
   </script>
</body>
</html>

在上面的示例中，我們獲取了使用者輸入的值，然後使用Number方法將其轉換為數字，如果輸入值為整數，則將其轉換為數字資料型別。否則，它將將其轉換為NaN，然後在isNaN()方法中對其進行檢查並輸出相應的語句。

讓我們再看一個示例，我們將把NaN值賦給一個變數並使用它。

演算法

步驟 1 - 在第一步中，我們將向 HTML 文件新增一個輸入標籤，以獲取使用者的輸入來檢查任何型別的值。

步驟 2 - 在第二步中，必須定義一個帶有 onclick 事件的按鈕標籤，以便在使用者單擊按鈕後呼叫函式。

步驟 3 - 在最後一步中，我們將編寫邏輯，在某些條件下將現有變數的值更改為 NaN，然後將結果顯示給使用者。

示例 3

下面的示例將說明如何在需要時將 NaN 值賦給任何變數：

<!DOCTYPE html>
<html>
<body>
   <h2>NaN in JavaScript </h2>
   <h4> Enter a number: </h4>
   <input type="number" id="inp1"> <br> <br>
   <p> Click the below button to check the entered value is a number or not a number (NaN). </p>
   <p id="result"> </p>
   <button onclick="display()"> Check here </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp = document.getElementById("inp1");
         var val = Number(inp.value);
         if (val < 0 || val > 10) {
            val = Number.NaN;
            result.innerHTML += " The value you entered " + inp.value + " is now become <b> " + inp.value + " </b> Not a Number (NaN), because the value is either less than zero or greater than 10. <br> ";
         } else {
            result.innerHTML += " The value you entered <b>" + val + " </b> is a valid value. Hence, it is not changed to NaN. <br> ";
         }
      }
   </script>
</body>
</html>

在這個例子中，我們在特定條件下將現有變數的值更改為 NaN。

在本教程中，我們藉助程式碼示例瞭解了 JavaScript 中 NaN 屬性是什麼，在前面的示例中，我們檢查了輸入的值是數字還是非數字 (NaN)。而在後面的例子中，我們為程式碼中已存在的變數賦予了 NaN 值。

更新於：2022年11月8日

瀏覽量 520

啟動您的職業生涯

完成課程獲得認證

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