JavaScript判斷是否為數字的幾種方式匯總(推薦!)
前言
js判斷是否為數字的方式很多:
- typeof、instanceof、Number.isNumber
- parseInt、parseFloat
- isNaN、isFinite
- Number.isNaN、Number.isFinite
- 正則表達式
- 終極方案
我們逐一介紹,希望能幫到大傢。
1. typeof、instanceof、Number.isInteger
typeof判斷值是不是基本類型number,比如:
let num = 1; typeof num === 'number'; // true
instanceof判斷值是不是包裝類Number,比如:
let num = new Number(1); num instanceof Number; // true
Number.isInteger判斷值是否是整數:
Number.isInteger(1); // true Number.isInteger('1'); // false Number.isInteger(1.1); // false
這幾種方式的缺點,都是隻能基於類型判斷,無法判斷字符串是否是數值。
2. parseInt、parseFloat
這個方法的特點,一句話,返回字符串開頭最長的有效數字。
我們可以用!isNaN(parseFloat(value))來判斷字符串是否是數值。
let str1 = '123'; let str2 = 'abc'; !isNaN(parseFloat(str1)); // true,是數字 !isNaN(parseFloat(str2)); // false,不是數字
parseInt和parseFloat解析的時候遇到非法字符結束,返回解析到的數值。也就是說隻要字符串頭部是合法數值,那麼就能解析出數值,哪怕整體不是數值。比如123abc,會被解析程123。
因此,上面的判斷方式還不夠嚴謹,下面的終極方案是比較嚴謹的方式。
3. isNaN、isFinite
在介紹這兩個方法之前,先講下NaN,它表示Not-a-Number。兩個NaN無法直接比較相等,因為我們隻知道它不是數值,是啥不確定,也就無法比較相等。
NaN === NaN; // false NaN == NaN; // false Object.is(NaN, NaN); // false
- isNaN(value),如果ToNumber(value)的結果為NaN返回true,否則返回false。
- isFinite(value),如果ToNumber(value)的結果為數值,且不等於Infinity或-Infinity返回true,否則返回false。
isNaN和isFinite都會先將傳入的值轉成數值,再進行判斷。ToNumber的規則跟直接使用Number函數一樣。一些非數值在類型轉換的時候都能轉成數值,比如:
Number(true); // 1 Number(false); // 0 Number(null); // 0 Number(''); // 0
對null、true、false、''使用isNaN結果都是false,但是它們本身不是數值,因此不能單獨使用isNaN。
4. Number.isNaN、Number.isFinite
這兩個方法跟對應的全局方法是不一樣的。
- Number.isNaN(value),如果value為NaN返回true,否則返回false。
- Number.isFinite(value),如果value為數值,且不等於Infinity或-Infinity返回true,否則返回false。
區別是全局方法會有強制類型轉換,而這兩個方法沒有強制類型轉換:
Number.isNaN(null); // true Number.isNaN(true); // true Number.isNaN(false); // true Number.isNaN(''); // true
可以看,由於沒有類型轉換,所以Number.isNaN判斷null、true、false、''的結果都是true。
但是“副作用”是數字字符串也會得到true:
Number.isNaN('123'); // true
Number.isNaN等價與:
Number.isNaN = Number.isNaN || function(value) { return typeof value === "number" && isNaN(value); }
而Number.isFinite等價於:
if (Number.isFinite === undefined) Number.isFinite = function(value) { return typeof value === 'number' && isFinite(value); }
因此,這兩個方法本質上也是基於類型的,沒法判斷一個字符串是否為數值。
5. 正則表達式
let exp = /^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/; exp.test('+1.9'); // true exp.test('-.1e11'); // true
這個正則可以判斷整數、浮點數、正負數和科學計數法。
不過我覺得判斷是否是數值用正則,有點小題大做瞭。
6. 終極方案(推薦)
我們先看方案:
!isNaN(parseFloat(value)) && isFinite(value);
這其實是jquery中$.isNumeric的源碼,多麼簡潔且優雅。
接下來我們看看它的原理,我們以字符串123abc為例,我們應該得到false。
- parseFloat('123abc')得到123;
- !isNaN(123)得到true;
- isFinite('123abc')得到false;
- 最終結果為false。
單獨使用!isNaN(parseFloat(value))會將123abc當成數值,所以用isFinite額外判斷一次,isFinite的另一個作用是排除無窮數。
!isNaN(parseFloat(Infinity)); // true !isNaN(parseFloat(Infinity)) && isFinite(Infinity); // false
而且,因為parseFloat的解析是純字符串解析,沒有類型轉換,所以不會將null、true、false、''當成數值。
!isNaN(parseFloat(null)) && isFinite(null); // false !isNaN(parseFloat(true)) && isFinite(true); // false !isNaN(parseFloat(false)) && isFinite(false); // false !isNaN(parseFloat('')) && isFinite(''); // false
妙,妙不可言。
7. 結語
對這幾個方法的介紹並不全面,因為我們探討的主題是“判斷值是否為數值”。這幾個方法任何一個單獨拎出來,都能講一篇,有時間再跟大傢分享。
到此這篇關於JavaScript判斷是否為數字的幾種方式的文章就介紹到這瞭,更多相關js判斷是否為數字內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- ECMAScript 數據類型之Number類型
- ECMAScript 6數值擴展實例詳解
- JavaScript數據結構Number
- JavaScript的八種數據類型
- 初識JavaScript的基礎