DEV Community

Ayowande Oluwatosin
Ayowande Oluwatosin

Posted on

Simplify Large Numbers with Style: A Guide to Human-Readable Representations in JavaScript

Introduction
In the world of finance, dealing with large numbers is a common occurrence. Imagine handling numbers representing amounts in the billions or trillions; it's essential to present these figures in a user-friendly and readable format. This blog post will delve into a JavaScript function that converts large numbers into a more compact and human-readable form.

The Challenge
Consider a situation where you have a value, say 1,360,000,000,000, and you want to convert it into a more manageable format like 1.36T. The challenge is not just about adding commas but about intelligently choosing the appropriate unit (K, M, B, T) based on the magnitude of the number.

reduceAmount(value){
    const shortsymbols = {
        4: 'T',
        3: 'B',
        2: 'M'
    }

    let number  = value.toString().split('.')[0];
    let commaCount = Math.floor((number.length-1)/3);

    if(commaCount > 1){
        let symbol = shortsymbols[commaCount];
        let dotPlacement = number.length % 3;

        if(dotPlacement === 0) dotPlacement = 3; 


        if(Number(number.substr(dotPlacement+1)) > 0) symbol += '+';


        number = number.substr(0, dotPlacement) + '.' + number.substr(dotPlacement)

        // Rounds to tenths place
        number = Math.floor(Number(number) * 10) / 10

        number += symbol
    } else {
        number = this.addCommas(number);
    }

    console.log(number);
    return number;
},

addCommas(x){
  x = (Math.round(x * 100)/ 100).toFixed(2);
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            }
Enter fullscreen mode Exit fullscreen mode

Explanation
Short Symbols: The function starts with a dictionary shortsymbols mapping the length of the number to a symbol (e.g., 'B' for billion).

Number Formatting: The function takes a numeric value, converts it to a string, and splits it at the decimal point, considering only the whole part.

Comma Counting: It calculates the number of commas required by dividing the length of the number (minus one) by three.

Handling Large Numbers: If the number is in the millions or above, it applies a shorthand symbol and intelligently decides whether to add a plus sign based on the remaining part after the dot.

Dot Placement: It calculates the placement of the dot and ensures that there's no need for a dot if the dot placement is 3.

Rounding: It rounds the number to the tenths place.

Result: The final result is a compact, rounded, and symbol-appended representation of the original number.

Conclusion
This function goes beyond merely formatting numbers; it intelligently chooses the appropriate unit and presents large figures in a concise, user-friendly manner. Whether you're dealing with financial data or any domain with large numerical values, this function provides a valuable tool for better data representation.

Top comments (0)