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.