JS isNaN()函數的用法

2020-07-16 10:05:29
在前面我們介紹了對 undefined 進行算術運算以及對一些包含了不合法字元的資料進行數位型別的轉換時,都會得到 NaN 的結果。對 NaN 使用 typeof 運算子,可以得到 number 結果,可知 NaN 是一個非數位的數位型別的資料,其對應的布林值為 false。

通常得到這個值時,意味著程式進行了非法的運算操作。比如 alert('200px'-100) 的結果就是 NaN,因為字串 '200px' 無法轉換為數位,所以不能進行減法運算。需要注意的是,NaN 並不等於本身。

在實際應用中,有時為了程式的健壯性,或者出於某些應用的需要,我們需要對程式的運算結果或某些資料進行是否為數位型別的判斷,即判斷它們的值是否為 NaN。對此需求,JavaScript 提供了 isNaN() 函數來實現。isNaN 對應的英文單詞為:is Not a Number,意思是是否不是一個數位。

isNaN() 函數的使用格式如下:

isNaN(value)

isNaN() 的作用是:判斷指定引數是否為數位,是數位,返回 false,否則返回 true。

需要特別注意的 isNaN() 在判斷引數是否為數位之前,會首先使用 Number() 對引數進行數位型別的轉換。所以 isNaN(value) 其實等效於:isNaN(Number(value))。當引數 value 能被 Number() 轉換為數位時,結果返回 false,否則返回 true。

例如:
alert(isNaN('250'));   //Number()將字串'250'轉換為數位250,結果為:false
alert(isNaN(true));    //Number()將true轉換為數位1,結果為:false
alert(isNaN('100px'));//Number()無法轉換字串100px為數位,結果為:true

下面我們通過一個具體的範例來演示一個 isNaN() 函數的應用。

【例 1】使用 isNaN() 判斷文字方塊輸入的值是否為數位。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用isNaN()判斷文字方塊輸入的值是否為數位</title>
<script>
     window.onload = function(){
         var aInp = document.getElementsByTagName("input");
         aInp[1].onclick = function(){
              var str = aInp[0].value;
              if(isNaN(str)){
                   alert(str + "不是數位");
              }else{
                   alert(str + "是數位");
              }
         };
     }
</script>
<body>
   <input type="text"/>
   <input type="button" value="判斷輸入值是否為數位"/>
</body>
</html>
上述程式碼中的 if…else… 是一種判斷結構程式,用來實現條件判斷,當 if 後面的括號中的值為 true 時,執行if後面大括號中所括的程式碼,否則執行 else 後面大括號所括的程式碼。

上述程式碼中的 if 判斷語句使用 isNaN() 判斷表單文字方塊輸入的值是否為數位作為條件,當輸入的值為數位時,isNaN() 返回 false,此時執行 else 語句塊,否則執行 if 語句塊。執行上述程式碼的最初結果如圖 1 所示。
未輸入數據的狀態
圖 1:未輸入資料的狀態