Complete Guide: Round Numbers to 2 Decimal Places in JavaScript

To round numbers to at most 2 decimal places in JavaScript only when necessary, you can use the combination of toFixed(2) followed by parseFloat() to automatically remove trailing zeros. This approach ensures that integers remain as integers while decimals are properly rounded and extraneous zeros are eliminated.

Contents

• Using toFixed() with parseFloat()
• Math.round() Multiplication Method
• Intl.NumberFormat API
• Custom Utility Functions
• Handling Edge Cases and Precision Issues
• Complete Implementation Examples
• Comparison of Methods

Using toFixed() with parseFloat()

The most straightforward approach is to use JavaScript’s built-in toFixed() method combined with parseFloat(). This method rounds to a specified number of decimal places and returns a string, which we then convert back to a number to remove trailing zeros.

function roundToTwoDecimals(num) {
    return parseFloat(num.toFixed(2));
}

// Examples
console.log(roundToTwoDecimals(10));        // 10
console.log(roundToTwoDecimals(1.7777777)); // 1.78
console.log(roundToTwoDecimals(9.1));       // 9.1

This approach works because toFixed(2) converts the number to a string with exactly 2 decimal places, and parseFloat() parses that string back to a number, automatically removing any trailing zeros after the decimal point.

According to the JavaScript toFixed() Method documentation, the toFixed() method rounds the string to a specified number of decimals, which is exactly what we need for the initial rounding step.

Math.round() Multiplication Method

Another approach involves using Math.round() with multiplication and division to achieve the same result without string conversion:

function roundToTwoDecimalsMath(num) {
    return Math.round(num * 100) / 100;
}

// Examples
console.log(roundToTwoDecimalsMath(10));        // 10
console.log(roundToTwoDecimalsMath(1.7777777)); // 1.78
console.log(roundToTwoDecimalsMath(9.1));       // 9.1

This method works by:

1. Multiplying the number by 100 to shift the decimal point two places to the right
2. Using Math.round() to round to the nearest integer
3. Dividing by 100 to shift the decimal point back to its original position

However, as noted in the Sentry documentation, you may occasionally get rounding errors using this method due to floating-point precision issues.

Intl.NumberFormat API

For more sophisticated formatting, you can use the Intl.NumberFormat API, which provides locale-aware number formatting:

function roundToTwoDecimalsIntl(num) {
    return parseFloat(new Intl.NumberFormat('en-US', {
        minimumFractionDigits: 0,
        maximumFractionDigits: 2
    }).format(num));
}

// Examples
console.log(roundToTwoDecimalsIntl(10));        // 10
console.log(roundToTwoDecimalsIntl(1.7777777)); // 1.78
console.log(roundToTwoDecimalsIntl(9.1));       // 9.1

The JavaScript Round to 2 Decimal Places guide explains that the Intl.NumberFormat API is a versatile constructor for formatting numbers as per locale-specific conventions.

Custom Utility Functions

For a more robust solution, you can create a custom utility function that handles various edge cases:

function toOptionalFixed(num, digits = 2) {
    const number = parseFloat(num.toFixed(digits));
    return number;
}

// Examples
console.log(toOptionalFixed(10));        // 10
console.log(toOptionalFixed(1.7777777)); // 1.78
console.log(toOptionalFixed(9.1));       // 9.1
console.log(toOptionalFixed(1.005));     // 1.01 (handles precision issues)

As shown in the 30 seconds of code example, this approach creates a reusable function that can be applied throughout your application.

Handling Edge Cases and Precision Issues

JavaScript has well-known floating-point precision issues. For example, 1.005 might not round to 1.01 as expected due to binary representation:

// Problematic case
console.log(Math.round(1.005 * 100) / 100); // 1 instead of 1.01

To handle this, you can add a small epsilon value before rounding:

function preciseRound(num, decimals = 2) {
    const factor = Math.pow(10, decimals);
    return Math.round(num * factor + Number.EPSILON) / factor;
}

// Examples
console.log(preciseRound(1.005)); // 1.01 (correctly handles precision)
console.log(preciseRound(10));    // 10
console.log(preciseRound(9.1));   // 9.1

The codeparrot guide mentions that Number.EPSILON accounts for minute inaccuracies in floating-point calculations, improving precision in JavaScript Round to 2 Decimal Places for tricky numbers like 1.005 or 1.255.

Complete Implementation Examples

Here’s a complete implementation with multiple approaches:

// Method 1: toFixed() + parseFloat
function roundToTwoMethod1(num) {
    return parseFloat(num.toFixed(2));
}

// Method 2: Math.round() with multiplication
function roundToTwoMethod2(num) {
    return Math.round(num * 100) / 100;
}

// Method 3: Custom precision-aware function
function roundToTwoMethod3(num) {
    const factor = Math.pow(10, 2);
    return Math.round(num * factor + Number.EPSILON) / factor;
}

// Method 4: Intl.NumberFormat
function roundToTwoMethod4(num) {
    return parseFloat(new Intl.NumberFormat('en-US', {
        minimumFractionDigits: 0,
        maximumFractionDigits: 2
    }).format(num));
}

// Test all methods
const testNumbers = [10, 1.7777777, 9.1, 1.005, 3.14159, 5.5];

console.log('Input\t\tMethod1\tMethod2\tMethod3\tMethod4');
console.log('------\t\t-------\t-------\t-------\t-------');

testNumbers.forEach(num => {
    const m1 = roundToTwoMethod1(num);
    const m2 = roundToTwoMethod2(num);
    const m3 = roundToTwoMethod3(num);
    const m4 = roundToTwoMethod4(num);
    
    console.log(`${num}\t\t${m1}\t${m2}\t${m3}\t${m4}`);
});

Comparison of Methods

For most applications, the toFixed(2) + parseFloat() approach provides the best balance of simplicity and reliability. However, for financial applications where precision is critical, the custom precision-aware function is recommended.

Conclusion

To round numbers to at most 2 decimal places in JavaScript only when necessary, you have several effective options:

1. Use toFixed(2) + parseFloat() - This is the simplest and most reliable method for most use cases
2. Implement precision-aware rounding - Add Number.EPSILON for better handling of edge cases
3. Consider your specific needs - Choose between performance, readability, and precision requirements
4. Test thoroughly - Especially important for financial or scientific applications

The key insight is that you need both rounding logic and trailing zero removal to achieve the desired formatting behavior. The toFixed() method combined with parseFloat() provides this functionality in a clean, readable way that works for most JavaScript applications.

Sources

1. JavaScript toFixed() Method - W3Schools
2. How to round to at most two decimal places in JavaScript - Sentry
3. JavaScript Round to 2 Decimal Places: A Complete Guide - CodeParrot
4. How to round a number to two decimal places in JavaScript - CoreUI
5. Round to 2 Decimal Places in JavaScript (with code) - FavTutor
6. How to Round to 2 Decimal Places in JavaScript - Medium
7. Number to fixed-point notation without trailing zeros - 30 seconds of code
8. Remove trailing zeros from a number in JavaScript - BobbyHadz