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.