Intl - вбудований у браузер і Node.js API інтернаціоналізації. Він знає правила форматування для сотень мов, тож не потрібно писати власні функції чи підключати важкі бібліотеки.
Числа й гроші:
new Intl.NumberFormat('uk-UA', { style: 'currency', currency: 'UAH' }).format(1234567.891);
// "1 234 567,89 ₴"
new Intl.NumberFormat('uk-UA', { notation: 'compact' }).format(1500000);
// "1,5 млн"
new Intl.NumberFormat('uk-UA', { style: 'percent', maximumFractionDigits: 1 }).format(0.1234);
Українські правила - кома в дробах і нерозривний пробіл між розрядами - застосовуються автоматично.
Дати:
new Intl.DateTimeFormat('uk-UA', { dateStyle: 'long', timeZone: 'Europe/Kyiv' })
.format(new Date('2026-10-04T10:00:00Z'));
// "4 жовтня 2026 р."
timeZone важливий: без нього дата форматується в поясі браузера користувача.
Відносний час:
const rtf = new Intl.RelativeTimeFormat('uk', { numeric: 'auto' });
rtf.format(-1, 'day'); // "учора"
rtf.format(3, 'hour'); // "через 3 години"
rtf.format(-5, 'minute'); // "5 хвилин тому"
Множина - найскладніше для української: три форми плюс дроби.
const rules = new Intl.PluralRules('uk');
rules.select(1); // "one" -> 1 коментар, 21 коментар
rules.select(2); // "few" -> 2 коментарі, 22 коментарі
rules.select(5); // "many" -> 5 коментарів, 11 коментарів
rules.select(1.5); // "other" -> 1,5 коментаря
const forms = { one: 'коментар', few: 'коментарі', many: 'коментарів', other: 'коментаря' };
const label = (n) => `${n} ${forms[rules.select(n)]}`;
Ручне правило «якщо 1 - однина, інакше множина» дає «21 коментарів» і «2 коментарів».
Сортування рядків:
['їжак', 'ґанок', 'яблуко', 'єнот'].sort();
// ["яблуко", "єнот", "їжак", "ґанок"] - за кодами символів
['їжак', 'ґанок', 'яблуко', 'єнот'].sort(new Intl.Collator('uk').compare);
// ["ґанок", "єнот", "їжак", "яблуко"] - за абеткою
Продуктивність: створення форматера відносно дороге - для списків створюйте його один раз і використовуйте format() повторно.
Узгодженість з бекендом: PHP має ті самі правила ICU через розширення intl (NumberFormatter, Number::currency() у Laravel), тож формати на сервері й у браузері збігаються.
