How to Format Complex Currencies and Units Without a Heavy Internationalization Library

I was once looking at a bundle analysis report for a simple landing page and saw a massive 45KB chunk dedicated solely to "currency formatting." It felt like using a sledgehammer to crack a nut, especially since the user’s browser already knows exactly how to display numbers for their specific region.

We’ve all been there—reaching for numeral.js or accounting.js because we're afraid of the manual regex required to turn 1000 into $1,000.00. But the modern web has a built-in powerhouse called the Intl object. Specifically, Intl.NumberFormat can handle almost any edge case you throw at it without adding a single byte to your bundle.

The "I just want a price" Baseline

The most common mistake is trying to manually concatenate currency symbols. It works until you realize that in Germany, the Euro symbol comes *after* the number, and they use a comma for decimals.

Instead of writing a buggy helper function, let the browser handle the locale logic:

const price = 2500.50;

// The 'undefined' argument tells the browser to use the user's system locale
const formatter = new Intl.NumberFormat(undefined, {
  style: 'currency',
  currency: 'USD',
});

console.log(formatter.format(price)); // "$2,500.50" in the US

If you need to force a specific style (like displaying Yen for a Japanese user), just swap the locale string:

const yenFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY',
});

console.log(yenFormatter.format(price)); // "￥2,501" (Notice it handled the rounding for you!)

Making Large Numbers "Readable"

We’ve all seen those dashboards where a number like 1,250,000 just takes up too much horizontal space. You could write a complex function to divide by a million and append an "M", or you could use the notation property.

This is honestly my favorite hidden gem in the API:

const subscribers = 1450000;

const compactFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  compactDisplay: 'short' // or 'long' for "1.5 million"
});

console.log(compactFormatter.format(subscribers)); // "1.5M"

The best part? It scales. If the number drops to 900, it just shows 900. If it hits a billion, it switches to B. No logic checks required on your end.

Units: Beyond Just Money

I used to think Intl was only for currencies. I was wrong. It handles weights, lengths, volumes, and even bits/bytes. This is incredibly useful for technical specs or fitness apps where you need to toggle between metric and imperial.

const weight = 75;

const kgFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilogram',
  unitDisplay: 'long' // "75 kilograms"
});

const speedFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour',
  unitDisplay: 'short' // "75 mph"
});

console.log(kgFormatter.format(weight));
console.log(speedFormatter.format(weight));

Pro tip: You can find the full list of supported units (like celsius, liter, megabyte) in the MDN documentation.

Handling Ranges Without the Mess

Displaying a price range (like "between $10 and $20") usually involves two formatters and a template string. But there’s a newer method called formatRange that makes this look much cleaner.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

console.log(formatter.formatRange(10, 20)); // "$10 – $20"
console.log(formatter.formatRange(1200, 1500)); // "$1,200 – $1,500"

It even handles "collapsing" the currency symbol. If both numbers use the same currency, it won't necessarily repeat the symbol twice if the locale doesn't require it.

The Performance "Gotcha"

There is one trap you should avoid. Creating a new Intl.NumberFormat object is actually somewhat "expensive" in terms of CPU cycles compared to basic math.

Don't do this inside a loop or a high-frequency React render:

// BAD: Creating a new instance every time
data.map(item => {
  return new Intl.NumberFormat('en-US').format(item.price);
});

Do this instead: Instantiate the formatter once and reuse it.

// GOOD: Reuse the instance
const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });

data.map(item => {
  return usdFormatter.format(item.price);
});

Why This Matters

Every time we add a dependency to a project, we're taking on "maintenance debt." Libraries get outdated, they have security vulnerabilities, and they bloat the bundle.

The Intl API is already there. It’s fast, it’s maintained by the browser vendors, and it’s remarkably consistent across modern environments (including Node.js). Next time you're about to npm install a formatting library, take five minutes to see if the browser can do the job for you. Your users' data plans will thank you.