1. 程式人生 > 實用技巧 >JS(二) isNaN和Number.isNaN()

JS(二) isNaN和Number.isNaN()

遇見問題;
JS 判斷字串是否為數字,不是數字,提示報錯
常用方法(4種):

1.js自帶全域性函式isNaN()   (常用)
	var sTr = 'hello world';
	isNaN(sTr);     // true
缺點:isNaN(value) 空字串,空陣列,null都會被合法轉換為0,輸出false
解決:額外的判空操作

2.正則表示式		(末尾附精)
	var reg=/^[0-9]+.?[0-9]*$/; //判斷字串是否為數字 ,判斷正整數用/^[1-9]+[0-9]*]*$/
	if(!reg.test(num)){
		alert("請輸入數字");
		return false;
	}else{
		alert("數字輸入正確");
		return true;
	}
缺點: 只能判斷正整數

3.利用typeof的返回型別
	var a=123;
	typeof(a) 	//Number
缺點: typeof a === 'number'	返回false
原因:
	typeof Number 類比於 function
	'number' 是String,所以會報錯

4.利用parseFloat的返回值
	var inputData="xxx";
	if (parseFloat(inputData).toString() == “NaN”) {
    	      //alert(“請輸入數字……”);
	    return false;
  	} else {
    	      return true;
	}
缺點:不能判斷空串或空格,會報錯,isNaN()則是會型別轉換

好的,自此進入正題

isNaN(),在不同的教程當中定義的也不一樣,側重點不一樣

1.isNaN() 函式用來確定一個值是否為NaN
2.isNaN() 函式用於檢查其引數是否是非數字值。

如果isNaN函式的引數不是Number型別, isNaN函式會首先嚐試將這個引數轉換為數值,然後才會對轉換後的結果是否是NaN進行判斷。

與 JavaScript 中其他的值不同,NaN不能通過相等操作符(== 和 ===)來判斷 ,因為 NaN == NaN 和 NaN === NaN 都會返回 false,因此引入了Number.isNaN()去專門判斷NaN;

isNaN(value) 空字串,空陣列,null都會被合法轉換為0,布林型 true 轉換為1,false轉換為0

	isNaN("");        			// false
	isNaN(null);        		// false
	isNaN(new String());        // false 
	isNaN([]);        			// false 
	isNaN(true || false);       // false 
	increment(NaN);             // true

ES6,引入Number.isNaN(),不會自行將引數轉換成數字,判斷某個值是否為NaN,不需要進行型別轉換,isNaN是需要先對資料進行型別轉換,再進行判斷,number.isNaN()相當於對isNaN的一個擴充套件

isNaN(NaN); 			// true
isNaN('A String'); 		// true   
isNaN(undefined);		 // true
isNaN({}); 				// true
Number.isNaN(NaN); 		// true
Number.isNaN('A String'); 	// false
Number.isNaN("NaN");      
// false,字串 "NaN" 不會被隱式轉換成數字 NaN。
Number.isNaN(undefined); 	// false
Number.isNaN({}); 			// false

主要的變化,就在於isNaN在判斷的時候是根據NaN:not a number,只要不是數字就會返回true,但由於Numer.isNaN()中String型不會自動型別轉換,因此,返回false,無法用來驗證字串是否是純數字。

isNaN() 函式用於檢查其引數是否是非數字值(自動型別轉換)。
更為精準的判斷NaN還是使用Number.isNaN()(非自動型別轉換,判斷是否為NaN);

參考:

isNaN() - JavaScript | MDN
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/isNaN
JavaScript isNaN() 函式
https://www.w3school.com.cn/jsref/jsref_isNaN.asp
從 Number.isNaN 與 isNaN 的區別說起 - 掘金
https://juejin.im/post/6844903507368083469
js驗證 - 雲+社群 - 騰訊雲
https://cloud.tencent.com/developer/article/1534640