JavaScript判斷是否為數字的方式有哪些

蝸牛 互聯網技術資訊 2022-06-15 90 0

本篇內容主要講解“JavaScript判斷是否為數字的方式有哪些”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“JavaScript判斷是否為數字的方式有哪些”吧!

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。

  1. parseFloat('123abc')得到123;

  2. !isNaN(123)得到true;

  3. isFinite('123abc')得到false;

  4. 最終結果為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

到此,相信大家對“JavaScript判斷是否為數字的方式有哪些”有了更深的了解,不妨來實際操作一番吧!這里是蝸牛博客網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看