“This is the fourth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Front-end digital display, the more commonly used format display and percentage display

If there are decimals, there may be inaccurate accuracy, such as the following two problems:

  1. Rounding is not allowed
  2. Incorrect decimal place

rounded

In the previous article, toFixed() was used to deal with the decimal part in the front-end amount formatting process, which would result in inaccurate rounding of decimal places

Cause: Computer memory limit

Solutions:

// Test data is as follows:
formatMoney(12.035); // 12.04 Normal rounding
formatMoney(12.045); // 12.04 exception, should be 12.05, no rounding

// The solution is as follows, which can be displayed normally
const formatMoney = (money, symbol = "", decimals = 2) = > {
  let float = (
    Math.round((parseFloat(money) + Number.EPSILON) * Math.pow(10, decimals)) /
    Math.pow(10, decimals)
  ).toFixed(decimals);
  return `${symbol} ${float}`;
};
Copy the code
  • Number.EPSILON: Represents the difference between 1 and the smallest floating point Number that Number can represent greater than 1
    • The purpose of this introduction is to set a range of errors for floating-point calculations
  • Math.pow(x, y) : exponent, x to the y
  • Math.round: Returns the nearest integer rounded to the number (rounded)
  • Math.ceil() : Returns the smallest integer greater than or equal to a given number (Take up the whole)
  • Math.floor() : Returns the largest integer less than or equal to a given number (Take down the whole)

Refer to the article

  • JavaScript floating point traps and solutions
  • JS on toFixed() method rounding accuracy problem
  • ECMAScript 6 (ES6) introduction to Number.EPSILON

The decimal digit

Common scenario: The display is performed in percentages and one decimal place is reserved

Example:

0.199= >19.9%;0.2578= >25.8%;0.13= >13.0%;0.1235= >12.4%;0.1245= >12.5%

0.199 * 100 = 19.900000000000002
0.2578 * 100 = 25.779999999999998
Copy the code

Method 1: do not meet only a decimal, sometimes there is no decimal; The rounding is inaccurate

Results: 19.9%; 25.8%; 13%(with problems); 12.3%(with problems); 12.4%(with questions)

const percentFormat = (value, decimals = 1) = >
  parseFloat((value * 100).toFixed(decimals)) + "%";
Copy the code

Method two: not only keep a decimal, sometimes no decimal

Results: 19.9%; 25.8%; 13%(with problems); 12.4%; 12.5%

const percentFormat = (value, decimals = 1) = >
  Math.round(value * 1000) / 10 + "%";
Copy the code

Method 3: Keep one decimal and round it (no problem yet)

Results: 19.9%; 25.8%; 13.0%; 12.4%; 12.5%;

const percentFormat = (value, decimals = 1) = >
  (Math.round(value * 1000) / 10).toFixed(decimals) + "%";
Copy the code

Method 4: Keep a decimal, round (no problem)

Results: 19.9%; 25.8%; 13.0%; 12.4%; 12.5%;

const percentFormat = (value, decimals = 1) = >
  // use the function above
  formatMoney(value * 100."", decimals) + "%";
Copy the code