Floating-Point Precision Issues and Solutions in JavaScript

Description
In JavaScript, numbers are stored in the double-precision floating-point format of the IEEE 754 standard. This format cannot precisely represent all decimal numbers (especially binary floating-point numbers), leading to common issues such as 0.1 + 0.2 !== 0.3. Understanding the root cause of floating-point precision issues and their solutions is crucial for scenarios like financial calculations, scientific computing, etc.

1. Root Cause: Limitations of Binary Floating-Point Representation

• Core Principle: Computers store numbers in binary, and under the IEEE 754 standard, floating-point numbers are represented using a sign bit, exponent bits, and mantissa bits.
• Example:
  • The binary representation of the decimal 0.1 is a recurring fraction: 0.0001100110011...
  • Double-precision floating-point numbers have only 52 mantissa bits; any excess bits are truncated, leading to loss of precision.
• Verifying the Problem:

  console.log(0.1 + 0.2); // Outputs 0.30000000000000004
  console.log(0.1 + 0.2 === 0.3); // Outputs false
  

2. Common Scenarios Where the Problem Occurs

• Arithmetic Operations: Addition, subtraction, multiplication, and division may produce tiny errors (e.g., 0.3 - 0.2 ≠ 0.1).
• Comparison Operations: Direct comparison of floating-point numbers using === may fail.
• Accumulative Calculations: Repeated accumulation of small errors can amplify them (e.g., repeatedly adding 0.1 in a loop).

3. Solution 1: Precision Correction Method

• Core Idea: Convert floating-point numbers to integers for calculation, then convert them back to decimals.
• Implementation Steps:
  1. Determine the number of decimal places (e.g., the maximum number of decimal places for 0.1 and 0.2 is 1).
  2. Multiply the numbers by a power of 10 (e.g., 10¹⁰) to convert them to integers.
  3. Perform operations on the integers, then divide by the same power of 10 to revert.
• Code Example:

  function add(a, b) {
    const multiplier = Math.pow(10, Math.max(getDecimalLength(a), getDecimalLength(b)));
    return (a * multiplier + b * multiplier) / multiplier;
  }
  
  function getDecimalLength(num) {
    // Get the number of decimal places
    const str = num.toString().split('.')[1];
    return str ? str.length : 0;
  }
  
  console.log(add(0.1, 0.2)); // Outputs 0.3
  

4. Solution 2: Using a Tiny Threshold for Comparison

• Applicable Scenario: Comparing whether two floating-point numbers are "close enough."
• Implementation Method: Define a very small value (e.g., Number.EPSILON) as the tolerance.
• Code Example:

  function isEqual(a, b, epsilon = Number.EPSILON) {
    return Math.abs(a - b) < epsilon;
  }
  
  console.log(isEqual(0.1 + 0.2, 0.3)); // Outputs true
  

5. Solution 3: Using Third-Party Libraries

• Recommended Libraries: decimal.js, big.js are specifically designed for high-precision calculations.
• Advantages: Support arbitrary-precision decimal arithmetic, avoiding binary conversion issues.
• Example:

  // Using decimal.js
  const Decimal = require('decimal.js');
  const result = new Decimal(0.1).plus(0.2).toNumber();
  console.log(result); // Outputs 0.3
  

6. Best Practice Recommendations

• Financial Calculations: Always use integer units (e.g., cents instead of dollars) or libraries like decimal.js.
• Display Handling: Use toFixed() to limit the number of displayed digits, but note that it returns a string.
• Avoid Chained Operations: Consecutive floating-point operations accumulate errors; try to perform calculations step by step.

Summary
The floating-point precision issue is fundamentally due to the limitations of binary representation. By using integer conversion, tolerance-based comparison, or professional libraries, you can balance precision and performance requirements. The key is to choose the appropriate solution based on the scenario, such as using toFixed() for simple UI display and relying on libraries for core calculations to ensure precision.