JavaScript判斷是否為數位的幾種方式彙總(推薦!)

2022-06-14 22:00:25

前言

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判斷是否為數位內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！