What is the Intl API for?
By FrontendPro Editorial Team Updated 9/26/2026
Answer
Intl formats dates, numbers, lists and plurals according to a locale's own conventions — built into the browser, with no library needed.
new Intl.NumberFormat("vi-VN", { style: "currency", currency: "VND" }).format(1234567);
// "1.234.567 ₫"
new Intl.DateTimeFormat("en-GB", { dateStyle: "long" }).format(new Date());
// "26 September 2026"
new Intl.RelativeTimeFormat("vi").format(-3, "day");
// "3 ngày trước"
Why not format manually
Conventions differ in ways that are easy to get wrong: decimal separators (1,5 vs 1.5), thousands grouping (some locales group by 2 and 4 digits, not 3), date order, month names, currency symbol position, and plural rules — Vietnamese has one plural form, English two, Arabic six.
new Intl.PluralRules("en").select(1); // "one"
new Intl.PluralRules("en").select(2); // "other"
The other useful ones
Intl.Collator sorts strings correctly for a language — plain sort() uses code-point order, which puts accented letters in the wrong place:
["ê", "e", "z"].sort(); // wrong for Vietnamese
["ê", "e", "z"].sort(new Intl.Collator("vi").compare); // correct
Intl.ListFormat produces "a, b and c" with the right conjunction and separators.
One performance note
Creating a formatter is expensive; formatting with it is cheap. Create it once and reuse it, rather than constructing one inside a loop or on every render.
const money = new Intl.NumberFormat("vi-VN", { style: "currency", currency: "VND" });
items.map((i) => money.format(i.price));
What it does not do
Intl formats values; it does not translate text. You still need an i18n library or message catalogue for the words themselves — but for every number and date, Intl replaces code you would otherwise write and get subtly wrong.