喜歡博主的文章，歡迎關(guān)注、點(diǎn)贊??、收藏??、留言??支持，謝謝大家

1. typeof、instanceof、Number.isNumber
2. parseInt、parseFloat
3. isNaN、isFinite
4. Number.isNaN、Number.isFinite
5. 正則表達(dá)式
6. 終極方案

我們逐一介紹，希望能幫到大家。

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判斷值是否是整數(shù)：

Number.isInteger(1);   // true
Number.isInteger('1'); // false
Number.isInteger(1.1); // false

這幾種方式的缺點(diǎn)，都是只能基于類型判斷，無法判斷字符串是否是數(shù)值。

2. parseInt、parseFloat

這個(gè)方法的特點(diǎn)，一句話，返回字符串開頭最長的有效數(shù)字。

我們可以用!isNaN(parseFloat(value))來判斷字符串是否是數(shù)值。

let str1 = '123';
let str2 = 'abc';
!isNaN(parseFloat(str1)); // true，是數(shù)字
!isNaN(parseFloat(str2)); // false，不是數(shù)字

parseInt和parseFloat解析的時(shí)候遇到非法字符結(jié)束，返回解析到的數(shù)值。也就是說只要字符串頭部是合法數(shù)值，那么就能解析出數(shù)值，哪怕整體不是數(shù)值。比如123abc，會(huì)被解析程123。

因此，上面的判斷方式還不夠嚴(yán)謹(jǐn)，下面的終極方案是比較嚴(yán)謹(jǐn)?shù)姆绞健?/p>

3. isNaN、isFinite

在介紹這兩個(gè)方法之前，先講下NaN，它表示Not-a-Number。兩個(gè)NaN無法直接比較相等，因?yàn)槲覀冎恢浪皇菙?shù)值，是啥不確定，也就無法比較相等。

NaN === NaN;         // false
NaN == NaN;          // false
Object.is(NaN, NaN); // false

• isNaN(value)，如果ToNumber(value)的結(jié)果為NaN返回true，否則返回false。
• isFinite(value)，如果ToNumber(value)的結(jié)果為數(shù)值，且不等于Infinity或-Infinity返回true，否則返回false。

isNaN和isFinite都會(huì)先將傳入的值轉(zhuǎn)成數(shù)值，再進(jìn)行判斷。ToNumber的規(guī)則跟直接使用Number函數(shù)一樣。一些非數(shù)值在類型轉(zhuǎn)換的時(shí)候都能轉(zhuǎn)成數(shù)值，比如：

Number(true);         // 1
Number(false);        // 0
Number(null);         // 0
Number('');           // 0

對null、true、false、''使用isNaN結(jié)果都是false，但是它們本身不是數(shù)值，因此不能單獨(dú)使用isNaN。

4. Number.isNaN、Number.isFinite

這兩個(gè)方法跟對應(yīng)的全局方法是不一樣的。

• Number.isNaN(value)，如果value為NaN返回true，否則返回false。
• Number.isFinite(value)，如果value為數(shù)值，且不等于Infinity或-Infinity返回true，否則返回false。

區(qū)別是全局方法會(huì)有強(qiáng)制類型轉(zhuǎn)換，而這兩個(gè)方法沒有強(qiáng)制類型轉(zhuǎn)換：

Number.isNaN(null);      // true
Number.isNaN(true);      // true
Number.isNaN(false);     // true
Number.isNaN('');        // true

可以看，由于沒有類型轉(zhuǎn)換，所以Number.isNaN判斷null、true、false、''的結(jié)果都是true。

但是“副作用”是數(shù)字字符串也會(huì)得到true：

Number.isNaN('123');    // true

Number.isNaN等價(jià)與：

Number.isNaN = Number.isNaN || function(value) {
    return typeof value === "number" && isNaN(value);
}

而Number.isFinite等價(jià)于：

if (Number.isFinite === undefined) Number.isFinite = function(value) {
    return typeof value === 'number' && isFinite(value);
}

因此，這兩個(gè)方法本質(zhì)上也是基于類型的，沒法判斷一個(gè)字符串是否為數(shù)值。

5. 正則表達(dá)式

let exp = /^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/;
exp.test('+1.9');   // true
exp.test('-.1e11'); // true

這個(gè)正則可以判斷整數(shù)、浮點(diǎn)數(shù)、正負(fù)數(shù)和科學(xué)計(jì)數(shù)法。

不過我覺得判斷是否是數(shù)值用正則，有點(diǎn)小題大做了。

6. 終極方案（推薦）

我們先看方案：

!isNaN(parseFloat(value)) && isFinite(value);

這其實(shí)是jquery中$.isNumeric的源碼，多么簡潔且優(yōu)雅。

接下來我們看看它的原理，我們以字符串123abc為例，我們應(yīng)該得到false。

1. parseFloat('123abc')得到123；
2. !isNaN(123)得到true；
3. isFinite('123abc')得到false；
4. 最終結(jié)果為false。

單獨(dú)使用!isNaN(parseFloat(value))會(huì)將123abc當(dāng)成數(shù)值，所以用isFinite額外判斷一次，isFinite的另一個(gè)作用是排除無窮數(shù)。

!isNaN(parseFloat(Infinity));  // true
!isNaN(parseFloat(Infinity)) && isFinite(Infinity); // false

而且，因?yàn)?code>parseFloat的解析是純字符串解析，沒有類型轉(zhuǎn)換，所以不會(huì)將null、true、false、''當(dāng)成數(shù)值。

!isNaN(parseFloat(null)) && isFinite(null);   // false
!isNaN(parseFloat(true)) && isFinite(true);   // false
!isNaN(parseFloat(false)) && isFinite(false); // false
!isNaN(parseFloat('')) && isFinite('');       // false

妙，妙不可言。

7. 結(jié)語

對這幾個(gè)方法的介紹并不全面，因?yàn)槲覀兲接懙闹黝}是“判斷值是否為數(shù)值”。這幾個(gè)方法任何一個(gè)單獨(dú)拎出來，都能講一篇，有時(shí)間再跟大家分享。文章來源地址http://www.zghlxwxcb.cn/news/detail-409025.html

到了這里，關(guān)于JavaScript 判斷是否為數(shù)字的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！