yeecai/front-end-trivia

Javascript float number problem

Opened this issue · 1 comments

what:

the classic problem 0.1 + 0.2 !== 0.3

why:

fix:

I tried code like:

export const floatCal = (num1 = 0.1, num2 = 0.2, mark = 'plus') => {
  const num1Digits = (num1.toString().split('.')[1] || '').length
  const num2Digits = (num2.toString().split('.')[1] || '').length
  const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits))
  if (mark === 'plus') {
    return (num1 * baseNum + num2 * baseNum) / baseNum
  } else if (mark === 'minus') {
    return (num1 * baseNum - num2 * baseNum) / baseNum
  }
}

But num1 * baseNum the mutiple operation will still cause overflow, then thanks to MikeMcl, bignumber.js library saved my day.

npm install bignumber.js
export const floatCal = (num1 = 0.1, num2 = 0.2, mark = 'plus') => {
  const _num1 = new BigNumber(num1)
  const _num2 = new BigNumber(num2)
  if (mark === 'plus') {
    return _num1.plus(_num2)
  } else if (mark === 'minus') {
    return _num1.minus(_num2)
  }
}

float number * / will cause same problem, so need to transfer the float number into interger (Number(toString)) before doing any calculation.