如何掌握JavaScript數字類型

這篇文章主要講解了“如何掌握JavaScript數字類型”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何掌握JavaScript數字類型”吧！

JavaScript中存在兩種表示數字的類型：

1. Number類型，也就是常規意義上的數字類型，以64位的IEEE-754格式存儲，屬于“雙精度浮點數”，截至目前，我們接觸到的數字全部都是Number類型；

2. BigInt類型，表示任意長度的整數，通常情況下我們用不到它們，除非表示 2⁵³ 至 -2⁵³之外的數字，此類專業數據類型我們會在后面的章節詳細介紹；

數字的寫法

數字的寫法本身很簡單，但是JavaScrpt有很多方便快捷的語法糖供我們使用，好好學習這些語法糖不僅能夠提高我們的代碼閱讀能力，同時可以提高我們代碼的高級感（逼格）。

分隔符

十進制的數字最簡單了，幾乎每篇文章我們都多多少少會使用，例如我們創建一個變量，并存儲100億：

let tenbillion = 10000000000;

雖然操作起來非常簡單，但是存在一個問題：很難數清楚1后面到底有幾個0，如果我們寫的是轉賬代碼，錯個0可能會傾家蕩產。

此時，我們可以使用_作為分隔符，如下：

let tenbillion = 10_000_000_000;

上述代碼就可以非常明白的數清0的個數，顯然是最優解！

這里的下劃線_就是JavaScript的一個語法糖，在執行過程中會被引擎忽略，以上兩種寫法效果完全相同，但是閱讀體驗相差很大。

清奇腦回路

有些童鞋就要問了，我從小都是4個0一組的，為啥非要3個0分一組呢？所以，我們可以寫成下面的方式，同樣沒有問題：

let tenbillion = 100_0000_0000;

亦或者寫成這樣：

let tenbillion = 1_0000_0000_00;

這里我想表達的是，不論你采用哪種分割方式，都是不影響數字本身的大小的，快想一個逼格最高的方式吧！

省略的0

雖然使用_可以優雅的分割很多0，但是在實際生活中，我們一般不這么寫，例如我們常常將10000000000寫成“100億”，這樣就可以省略很多0，從而降低犯錯的可能性。

JavaScript同樣提供了一種省略0的寫法，我們可以使用字母e后面跟個數字表示0的個數，舉個栗子：

let tenbillion = 1e10;//100億，1后面10個0console.log(3.14e9);//3140000000,后面7個0，此處疑惑可往下看

上述代碼的理解非常簡單，e10可以理解為1_0000_0000_00，也就是1后面10個0，所以我們可以認為：

1e10 === 1 * 1_0000_0000_00;//e10表示1后面10個03.14e9 === 3.14 * 1_000_000_000;//e9表示1后面9個0

我們還可以使用這種方法表示非常小的數字，例如1納米：

let nm = 0.000000001;//單位（米）

由于0的個數過多，我們也可以使用_分割：

let nm = 0.000_000_001;

當然，還可以使用e的方式省略掉所有的0，如下：

let nm = 1e-9;//1的左邊9個0，包括小數點前面的那個

換句話說，e-9的意思就是1^-9，也就是1/1000_000_000，所以下面的等式是成立的：

1e-9 === 1 / 1_000_000_000;3.14e-8 === 3.14 / 1_000_000_00;

十六、八、二進制

十六進制是編程中常用到的格式，例如表示顏色、編碼等，我們可以在普通數字前加0x表示十六進制數字：

let hex = 0xff;//255，不區分大小寫，0xFF是一樣的

二進制數字使用0b開頭：

let bin = 0b1011;//11

八進制數字使用0o開頭：

let oct = 0o777;//511

這種簡便的寫法只支持這三種特殊類型，至于其他進制的數字可以使用特殊的函數生成（parseInt）。

toString(base)

toString方法可以把數字轉為對應進制base的字符串形式。

舉個栗子：

let num = 996;
console.log(num.toString(8));//轉為8進制字符串
console.log(num.toString(16));//轉為16進制字符串
console.log(num.toString(32));//轉為32進制字符串

代碼執行結果如下：

base的范圍可以從2到36，如果不填默認為10。

注意，如果使用數字直接調用toString方法，在有些情況下需要是應用兩個.，舉例如下：

console.log(123.toString(8));//Error，語法錯誤console.log(123..toString(8));//正確，173

數字后面有兩個.，這是因為在JavaScript中數字后面的第一個.被認為是小數點，第二個點才是調用函數的.。

如果是小數就不存在這個問題，舉個栗子：

console.log(3.14.toString(8));

亦或者，我們使用小括號可以避免使用兩個點，舉個栗子：

console.log((123).toString(8));//'173

舍入

舍入是數字最常用的操作之一，通常包括：

1. 向下取整，Math.floor(num)

   console.log(Math.floor(3.14));//3
   console.log(Math.floor(9.99));//9
   console.log(Math.floor(-3.14));//-4
   console.log(Math.floor(-9.99));//-10

   不遵循四舍五入原則，直接取小于等于當前數值的最近整數。

2. 向上取整，Math.ceil(num)

   console.log(Math.ceil(3.14));//4
   console.log(Math.ceil(9.99));//10
   console.log(Math.ceil(-3.14));//-3
   console.log(Math.ceil(-9.99));//-9

   不遵循四舍五入原則，直接取大于等于當前數字的最近整數。

3. 就近取整，Math.round(num)

   console.log(Math.round(3.14));//3
   console.log(Math.round(9.99));//10
   console.log(Math.round(-3.14));//-3
   console.log(Math.round(-9.99));//-10

   遵循四舍五入原則，取距離當前數字最近的整數。

4. 移除小數，Math.trunc(num)

   console.log(Math.trunc(3.14));//3
   console.log(Math.trunc(9.99));//9
   console.log(Math.trunc(-3.14));//-3
   console.log(Math.trunc(-9.99));//-9

   直接移除小數點后面的數字，取整數位。IE瀏覽器不支持這個方法

對比以上四種方法：

精度

上述方法只是簡單的把小數舍入成了整數，在有些情況下，我們需要特定精度的小數，例如取圓周率后4位應該怎么辦呢？

有兩種方法：

1. 數學乘除計數

   let pi = 3.1415926;console.log(Math.round(pi * 10000) / 10000);//3.1416

   上述代碼先將pi乘以10000，然后取整，再除以10000，從而得到了符合精度要求的結果。但是，這么做看起啦呆呆的，JavaScript為我們提供了更簡單的方法。

2. toFixed(n)

   let pi = 3.1415926;console.log(pi.toFixed(4));//3.1416

   以上代碼看起來輸出上沒有什么問題，實際上，toFixed返回的是一個字符串，如果我們需要一個數字類型，要轉換一下才行，可以使用單目運算符+ pi.toFixed(4)。

   此外，如果小數的尾數長度不夠，toFixed會在后面補上'0':

   let num = 3.1;console.log(num.toFixed(9));

   代碼執行結果如下：
   

   這也側面證明了toFixed的返回值是一個字符串，否則0會被省略。

偏差

浮點數表示在很多情況下總是存在偏差

在計算機內部，浮點數根據IEEE-754標準進行表示，其中單精度浮點數32位，雙精度浮點數64位。在雙精度浮點數中，1位用于表示符號，52位用于存儲有效數字，11位存儲小數點的位置。

偏差現象

雖然64位已經可以表示非常大的數字了，但是仍然存在越界的可能，例如：

let bigNum = 1e999;console.log(bigNum);//Infinity

越過做最大值的數字將變為Infinity（無窮），這樣就丟失了原有數字的大小，屬于偏差的一種。

還有一種偏差，需要我們學習：

console.log(0.1+0.2 === 0.3);//falseconsole.log(0.1 + 0.2);

代碼執行結果如下：

沒錯，0.1 + 0.2的結果并不是0.3，而是一堆0后面加個4。

這種偏差是非常致命的，尤其在商城、銀行工作場景中，即使是一個非常小的偏差，在高流水場景下都會丟失無盡的財富。

曾經聽說過一個銀行員工通過克扣工人工資，盜取百萬財富的故事，每個員工的工資只克扣2毛！

我想這種事情發生在我身上，我肯定發現不了，所以無時無刻的精確是多么的重要。

這個故事不知真假~~

偏差原因

先以我們常見的十進制為例，我們都知道，小數中存在兩個奇葩，一個叫無限循環小數，另一個叫無限不循環小數，例如1/3就是一個無限循環小數0.3333333(3)，而圓周率就是一個無限不循環小數。無限就意味著無法用數字清楚的描述這個數字的大小，我們能寫出來的都是不精確的。

二進制同樣存在一些無限循環的數字，不同的是在十進制中0.1這種看起啦很簡單的數字，在二進制中卻是無限循環小數。

舉個例子：

let x = 0.1;console.log(x.toFixed(20));

代碼執行結果如下：

是不是覺得不可思議呢？我們只是簡單的創建了一個變量并賦值0.1，然后取小數點后20位，卻得到了一個匪夷所思的結果。

如果我們換一個角度或許會更容易理解這種現象，在十進制中，任何整數除以10或者10整數次冪都是正常的精確的數字，例如1/10或者996/1000。但是，如果以3為除數，就會得到循環的結果，例如1/3。

這種描述如果換到二進制上，同樣是成立的。

在二進制中，任何整數除以2或者2的整數次冪都是正常的精確的數字，但是，如果以10為除數，就會得到無限循環的二進制數。

所以，我們就可以得出結論，二進制數字無法精確表示0.1和0.2就像十進制沒有辦法描述1/3一樣。

注意：

這種數據上的偏差并非JavaScript的缺陷，像PHP、Java、C、Perl、Ruby都是同樣的結果。

解決方法

1. 舍入

   在展示一個無限循環小數的時候，我們可以直接使用toFixed方法對小數進行舍入，該方法直接返回字符串，非常方便用于展示價格。

   0.3.toFixed(2);//0.30

2. 使用小單位

   另外一種方式是，我們可以使用較小的單位計算諸如價格、距離，例如采用分而不是元計算總價，實際上很多交易網站都是這么做的。但是這種方法只是降低小數出現的次數，并沒有辦法完全避免小數的出現。

Infinity、NaN

JavaScript數字中有兩個特殊值:Infinity和NaN。

如何判斷一個數字是不是正常數字呢？

我們可以使用兩個方法：

1. isFinite(val)
   該函數會將參數val轉為數字類型，然后判斷這個數字是否是有窮的，當數字不是NaN、Infinity、-Infinity時返回true。

   console.log(isFinite(NaN));//falseconsole.log(isFinite(Infinity));//falseconsole.log(isFinite(3));//trueconsole.log(isFinite('12'));//true

   代碼執行結果如下：
   
   由于無法轉為數字的字符串會被轉為NaN，所以我們可以使用isFinite方法判斷字符串是不是數字串：

   console.log(isFinite('xxxx'));//falseconsole.log(isFinite('Infinite'));//falseconsole.log(isFinite(' '));//true,空串轉為0

   代碼執行結果如下：

2. isNaN(val)
   當val為NaN或者無法轉為數字的其他值時，返回true。

   console.log(isNaN(NaN));//trueconsole.log(isNaN('Infinite'));//true

   代碼執行結果：
   

   為什么要使用isNaN函數而不是直接判讀呢？
   例如：

   console.log(NaN === NaN);//false

   代碼執行結果如下：
   

   這是因為NaN不等于任何數，包括自身。

Object.is

Object.is(a,b)可以判斷參數a和b是否相等，若相等返回true，否則返回false，它的結果只有三種情況：

1. 可以比較NaN

   console.log(Object.is(NaN,NaN));//true

   代碼執行結果：

   

2. 0 和 -0

   console.log(Object.is(0,-0));//false

   代碼執行結果：

   

   在計算機內部，正負使用0和1表示，由于符號不同，導致0和-0實際上是不同的，二者的表示方式也不一樣。

3. 其他
    其他比較情況和a === b完全相同。

parseInt、parseFloat

parseInt和parseFloat可以把字符串轉為數字，與+、Number不同的是，二者的限制更為松散。例如，像"100￥"這樣的字符串使用+和Number必然返回NaN，而parseInt和parseFloat卻能輕松應對。

舉個例子：

console.log(+"100￥");console.log(parseInt("100￥"));console.log(parseFloat("12.5￥"));

代碼執行結果：

parseInt和parseFloat會從字符串中讀取數字，直到無法讀取為止。二者特別適合處理像"99px"、"11.4em"這種數字開頭的字符串情況，但是對于其他字符開頭的字符串則返回NaN。

console.log(parseInt('ff2000'));//NaN

但是，我們發現ff2000實際上是一個十六進制的數字字符串，parseInt同樣可以處理這種情況，不過需要添加一個進制參數。

舉個例子：

console.log(parseInt('FF2000',16));
//16719872
console.log(parseInt('0xFF2000',16));
//16719872
console.log(parseInt('nnnnnn',36));
//1430456963

代碼執行結果：

Math對象

內置的Math對象中包含了許多我們經常用到的常量和方法，以下僅舉例介紹常用的幾個：

1. Math.PI

   圓周率Π是一個無限不循環的常量，我們可以使用Math.PI代替：

   console.log(Math.PI);

   

2. Math.random()
   生成一個位于區間[0,1)的隨機數：

   console.log(Math.random());console.log(Math.random());

如果我們需要一個特定區間內的隨機數，可以乘以特定的值，然后取整哦。

3. Math.pow(a,b)

   計算a^b，舉例如下：

   console.log(Math.pow(2,3));//8

4. Math.max()/Math.min()

   從任意數量的參數中選出一個最大/最小值：

   console.log(Math.max(1,2,3,4,5));//5console.log(Math.min(1,2,3,4,5));//1

感謝各位的閱讀，以上就是“如何掌握JavaScript數字類型”的內容了，經過本文的學習后，相信大家對如何掌握JavaScript數字類型這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！