iT邦幫忙

2022 iThome 鐵人賽

DAY 18
0

其實我不知道Biglnt的中文可以叫什麼比較好,直接翻成「大整數」似乎不太精確。

今天會從以下這些角度來介紹:

  1. Biglnt為何而來
  2. 定義及如何使用
  3. 可能會踩的雷區

數字類型 => BiglntNumber

JavaScript中,Biglnt也是其中的一種primitive,也就是基本型別。

複習一些有哪些基本型別,基本上可以由字串、數字、布林值含括:

  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Symbol

除了這些,其實還有一種基本型別叫做Biglnt,也是用來處裡數字的部分,就跟Number一樣的領域。

主要是因為光是Number處理數字會有一些無法顧及到的部分,所以才有了需要Biglnt的誕生。

舉例來說,只要數字太大,Number就沒辦法顯示精準,而這個範圍大致是2**53-1,從Number.MAX_SAFE_INTEGER裡面描述的最大安全整數範圍來判斷,也就是說超過了這個數字,Number就沒辦法維持準確性。

不精確的意思是代表說明明兩個不一樣,但判斷不出來,舉一個例子是在JavaScript當中的2 ** 53 + 12 ** 53 會一樣,非常奇怪。

const A = 2 ** 53 + 1;
const B = 2 ** 53;

console.log(A, B);
// 9007199254740992 9007199254740992

console.log(A === B);
// true

為了要解決這個問題,JavaScript才會需要可以支持任意長度整數都保持精確度的Biglnt

創建Biglnt方式

把數字變成Biglnt的狀態很簡單,有兩種做法:

  1. 在數字後面直接加上n
  2. 使用 BigInt()

就是字面上的意思,加上一個n跟把數字給()起來。

const number = 123;
const bigInt1 = 123n;
const bigInt2 = BigInt(123); //跟bigInt1一模一樣

Number一樣可以使用各種的運算子,可以把Biglnt當作一個後綴加上了nNumber

console.log(1n + 1n); // 2n
console.log(2n * 2n); // 4n
console.log(10n / 2n); // 5n
console.log(50n % 10n); // 0n

console.log(10n > 5n); // true
console.log(20n > 30n); // false

Number有一個不一樣的地方,一般來說當只寫出值,像是10,那它可能是String也可能是Number,而這時候可以使用在這個值前面加上一個+的方式,讓這個值確認變為是Number型別。

console.log(typeof +10); //number

但在Biglnt不支援這種方式,可能是為了避免搞混,如果在Biglnt就會直接報錯給你看。

console.log(+10n); // TypeError

什麼時候使用Biglnt

值超過了最大安全數字的時候,就是值大於2^53再使用Biglnt,正常狀態下好好的可以繼續用Number沒問題。

Biglnt 踩雷區域

以下問題都知道的話就可以直接跳過囉。

  • BigInt可以跟其他常規數字混合使用嗎?
  • BigIntNumber一直切換是好是壞?

直接講結論,沒辦法混合使用,BigIntNumber加再一起送你報錯。

console.log(1 + 1); // 2
console.log(1n + 1n); // 2n
console.log(1n + 1); // TypeError

如果有需要兩者的狀況,應該是要想法把轉換他們,有兩種情況:

  1. number轉換成bigint
console.log(10n + BigInt(10)); // 20n
  1. bigint轉換成number
console.log(Number(10n) + 10); // 20

BigIntNumber一直切換好嗎?
MDN文件裡面說這樣不好,不建議在BigInt值和Number值之間進行強制轉換。

因為Number值和BigInt值之間的強制轉換會導致精度損失。

總結

Biglnt是一個新的數字基本型別,用來處理一些Number沒有辦法處理的數字,像是Number能夠表示的安全整數範圍之外的,就只能夠靠Biglnt來精準顯示。

reference

[1] MDN - BigInt
[2] JavaScript 之旅 (22):BigInt
[3] w3schools - ECMAScript 2020


上一篇
JS之路 Day17 - async/await(Promise語法糖)
下一篇
JS之路 Day19 - What is symbol?
系列文
JavaScript 之路,往前邁進吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言