#CodeNewbie

#CodingTips

#Frontend

#Fullstack

#JavaScript

#LearnToCode

#Programming

#WebDevelopment

JavaScript `Intl` API: Format Dates, Numbers, and Currency Properly

Formatting data for users around the world is harder than it looks.
Different regions use different rules for:
- Dates
- Numbers
- Currency
- Time

The JavaScript `Intl` API solves this reliably.


 

## 🔹 What Is the `Intl` API?

`Intl` is a built-in JavaScript namespace for:
- Internationalization (i18n)
- Locale-aware formatting
- Language-sensitive comparisons

It’s supported in all modern browsers.


 

## 🔹 Formatting Numbers

```js
const nf = new Intl.NumberFormat("de-DE");
nf.format(1234567.89);
// "1.234.567,89"

No custom logic required.


 

🔹 Formatting Currency

new Intl.NumberFormat("ja-JP", {
 style: "currency",
 currency: "JPY"
}).format(5000);
// "¥5,000"

The API handles symbols and rounding automatically.


 

🔹 Formatting Dates and Times

const df = new Intl.DateTimeFormat("en-GB", {
 dateStyle: "long",
 timeStyle: "short"
});

df.format(new Date());

This respects local date and time conventions.


 

🔹 Relative Time Formatting

new Intl.RelativeTimeFormat("en", { numeric: "auto" })
 .format(-1, "day");
// "yesterday"

Great for feeds and notifications.


 

🔹 Sorting and Comparing Strings

const collator = new Intl.Collator("sv");
["z", "ä", "a"].sort(collator.compare);
// ["a", "z", "ä"]

Essential for correct alphabetical order.


 

🔹 Why Not Manual Formatting?

Manual formatting:
    •    Breaks across locales
    •    Is hard to maintain
    •    Misses edge cases

Intl is:
    •    Accurate
    •    Standardized
    •    Future-proof


 

🔹 Common Use Cases

    •    E-commerce pricing
    •    International dashboards
    •    Date-heavy apps
    •    Multilingual products


 

🔹 Best Practices

    •    Always use locale-aware formatting
    •    Store raw data, format at display time
    •    Avoid string-based date manipulation

✅ Recommended:

const locale = navigator.language;
new Intl.NumberFormat(locale).format(value);


 

🎯 Final Thought

Internationalization is not optional —
it’s part of modern UX.

The Intl API lets JavaScript speak the user’s language correctly.