The Intl API (short for Internationalization API) in JavaScript is a built-in set of objects and methods that help in formatting data for different languages and countries without the need of some custom code. In sum you can make your application have a “local” feel to users around the world.
Instead of manually handling date formats, number separator or some language plural rules, the Intl API gives you the tools for:
- Dates and Times
- Numbers and Currencies
- Collation (Sorting and Comparing)
- Plural Rules
- Relative Time
- Display Names
Why it matters
Nowadays, most applications are global, your users can be in different parts of the world, have different cultures that use different conventions (commas or periods), different date layouts, currencies or different naming conventions.
The Intl API takes care of these differences automatically, no need to build custom formatting, since it’s built into javascript. It’s also consistent and reliable across browsers.
Next we’ll explore with some examples what this API can offer to the developers with some practical uses.
Formatting Dates and Times
The user expects their date format when using an application, one of the most common tasks in internationalization is displaying dates and times. Different regions have very different conventions, and hardcoding a single format often leads to confusion.
Options: weekday, month, year, day, timeZone, hourCycle
Why it’s useful
Even scheduling: Meeting times adjusted per user’s time zones.
User dashboards: localized timestamps (logs, notifications, updates)
Social Media / Posts: Display publish dates in a familiar forma
Formatting Numbers
Numbers is the other area where cultural differences are visible (decimals, separators or currency symbols can vary across the globe.
The Intl.NumberFormat object formats numbers, currencies, percentages, and even units in a locale-aware way.
- In the US, the dollar sign comes before the number.
- In Germany, the euro sign comes after the number, with a non-breaking space.
- In Japan, yen values usually have no decimal fractions.
Why it’s useful
Finance dashboards: Proper grouping of large numbers
Analytics and Stats: Localized percentage and units
Global apps: Avoids confusion from misplaced symbols or separators
Billing: Display prices in the user’s currency
Collation and Text Comparison
When you need to sort or compare text with javascript string methods (<, >, localCompare()) often gives some unexpected results in different languages.
That’s where the use of Intl.Collator comes in, this provides a local-aware string comparison so your app can sort words or names.
Why default string sorting fails
By default, Javascript sorts strings using Unicode code points and not linguistic rules.
As seen in the image above, for example in German “ä” should be considered a variation of “a” so the word “äpfel” should come right after “apple,” not at the end.
Intl.Collator
Using the Intl.Collator fixes by applying language-specific rules:
Why it’s useful
Search & filtering: Search by the terms with your one local language
Sorting user list: Names ordered properly in different language
Catalogs: Product names sorted in ways users expect
Data grids and tables: Consistent ordering across locales
Plural Rules
Pluralization is one of the trickiest parts of internationalization (i18n).
In English, it’s simple:
- 1 apple vs 2 apples
But in other languages, plural forms can be far more complex.
How it’s used:
Intl.PluralRules is the foundation for libraries like React Intl, FormatJS, and i18next.
These frameworks combine plural rules with message templates so apps can show the correct word form automatically.
Relative Time Formating
Dates don’t always make sense as fixed timestamps. For example in social media or posts you don’t want to see 2025-08-21 15:53:20, you want to see “2 hours ago” or “yesterday”.
That’s what the Intl.RelativeTimeFormat does. It converts numbers + time units into natural, human-friendly phrases in the user’s language.
Options
- numeric: “auto” means it uses words like “yesterday” or “tomorrow” instead of raw numbers.
- With numeric: “always”, you only see numeric forms like “1 day ago”.
Display Names
When building apps with dropdowns, menus, or settings, you often need to show human-readable names for countries, languages, or scripts.
Traditionally, developers would create translations or ship large JSON files. But with Intl.DisplayNames, browsers can give you these labels automatically — localized to the user’s language.
Why it’s useful
Apps often need country pickers, language menus, or region settings.
Hardcoding translations is error-prone and doesn’t scale.
Saves time and reduces bundle size compared to loading translation dictionaries.
Best Practices
By using these best practices, you’ll ensure your app is not only functional but also feels native to users around the world.
Always pass a locale explicitly
If you don’t pass a locale, Javascript will use the system / browser default. That can lead to inconsistent results.
Know your browser support
Not all Intl features are available in every browser or Node.js version.
Check compatibility before using, for older environments use polyfils.
Combine Intl with frameworks for Full i18n
i18n (internationalization) – is the process of designing software so it can easily adapt to different languages, cultures, and regions (dates, numbers, currencies, text) without requiring code changes.
The Intl API handles formatting, but full internationalization (i18n) also needs:
- Message translation (different languages for UI text).
- Pluralization rules (e.g., “1 item” vs “2 items”).
- Content direction (left-to-right vs right-to-left).
For larger apps, combine Intl with libraries/frameworks:
- React Intl (part of FormatJS) → easy React integration.
- FormatJS standalone → for vanilla JS or other frameworks.
- i18next → translation + localization engine with Intl support.
These libraries use Intl under the hood but give you a higher-level API for managing translations and localization logic.
Test with different locales
Don’t test only in English or in your local language, try your app with other locals.
Performance
Keep performance in mind. Instead of creating a new Intl formatter every time that can impact performance in large apps, reuse the formatters you already have.
Conclusions
The Intl API is a powerful ally and tool for building truly global applications. It abstracts away some of the complexities of localization and ensures your app adapts naturally to the language, culture, and expectations of users worldwide. By relying on these built-in tools, you save time, reduce errors, and deliver a more inclusive experience. In today’s connected world, internationalization isn’t just an extra feature — it’s a necessity.
