JS метод Number.toLocaleString()

Загальний опис

Number.prototype.toLocaleString() – це метод в JavaScript, який дає можливість перетворити число в рядок згідно з локальними налаштуваннями (форматами). Основна корисність цього методу полягає в тому, що він автоматично адаптує відображення числа до вимог певної локалі, що може бути вельми корисно при міжнародній локалізації веб-застосунків.

Давайте розглянемо, як користуватися цим методом:

Базовий використання: Якщо ви хочете просто відформатувати число за замовчуванням для поточної локалі користувача, ви можете викликати метод без жодних аргументів:

const number = 1234567.89;
console.log(number.toLocaleString()); // наприклад, для української локалі результатом буде "1 234 567,89"

Використання з конкретною локаллю: Ви можете вказати конкретну локаль як аргумент, щоб отримати відформатоване число згідно з цією локаллю:

console.log(number.toLocaleString('uk-UA')); // "1 234 567,89"
console.log(number.toLocaleString('en-US')); // "1,234,567.89"

Додаткові опції форматування: Метод toLocaleString також приймає другий аргумент у вигляді об'єкта опцій, який дозволяє детально налаштувати відображення числа:

console.log(number.toLocaleString('uk-UA', { style: 'currency', currency: 'UAH' })); // "1 234 567,89 ₴"
console.log(number.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 })); // "1,234,567.89"

Важливі особливості методу:

Якщо ви не вказуєте локаль як аргумент, метод буде використовувати поточну локаль користувача.
У випадку, якщо вказана локаль не підтримується середовищем виконання JavaScript, метод може використовувати локаль за замовчуванням.
Опції, які передаються у другому аргументі, можуть розширюватися в залежності від конкретних потреб форматування.

Працюючи з числами у міжнародних веб-застосунках, використання методу toLocaleString допоможе забезпечити коректне відображення чисел для різних користувачів у всьому світі.

Нотатка:

З методом toLocaleString() можна використовувати другий аргумент — об'єкт опцій. Наприклад, якщо вам потрібно відформатувати число як валюту, можна використати опції { style: 'currency', currency: 'USD' }.

console.log(number.toLocaleString('en-US', { style: 'currency', currency: 'USD' }));

Нотатка:

Коли ви викликаєте метод toLocaleString() без аргументів, він автоматично використовує локаль користувача браузера. Це може бути корисно для глобальних веб-сайтів, які слід адаптувати під кожного користувача.

let number = 1234567.89;
console.log(number.toLocaleString()); // результат може відрізнятися в різних локалях.

Порада:

Метод toLocaleString() виконується повільніше, ніж багато інших методів форматування чисел. Для одноразового форматування це може бути несуттєво, але якщо вам потрібно форматувати великі масиви чисел, розгляньте можливість оптимізації або використання альтернативних методів.

Синтаксис

toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)

Параметри

locales: Рядок з мовним тегом BCP 47 або масив таких рядків. Відповідає параметру locales конструктора Intl.NumberFormat().
options: Об'єкт для налаштування формату виводу. Відповідає параметру options конструктора Intl.NumberFormat().

Return

string: Повертає рядок, який представляє число з урахуванням специфіки вибраної мови. У реалізаціях з Intl.NumberFormat, це еквівалентно виконанню new Intl.NumberFormat(locales, options).format(number). Таким чином, результат може бути адаптований під конкретний регіон або мову, що дозволяє коректно відображати числа згідно місцевих стандартів.

Переглядачі

Переглядач
	1	1	1	4	12

Переглядач
	4.4	18	4	1

Переглядач
	0.10.0	1.0

Приклади

Цей приклад демонструє динамічне форматування числа на основі введеного числа та вибраної локалі. Користувач може взаємодіяти зі сторінкою, вводячи число та вибираючи локаль для його форматування.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/ExrPLKb">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми конвертуємо число в локальний формат для деяких країн. Даний метод може бути корисним для відображення цін, зарплат чи інших числових даних у форматі, звичному для конкретного користувача.

let number = 1234567.89;

// Відображення числа у американському форматі
let usFormat = number.toLocaleString('en-US');
console.log(usFormat); // 1,234,567.89

// Відображення числа у європейському форматі
let euFormat = number.toLocaleString('de-DE');
console.log(euFormat); // 1.234.567,89

У цьому прикладі ми використовуємо toLocaleString() для відображення числа у валютному форматі для різних країн. Метод надає можливість відображення значення валюти відповідно до локалі, що може бути корисним у міжнародних онлайн-магазинах.

let price = 1500.50;

// Відображення ціни у доларах для США
let usPrice = price.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
console.log(usPrice); // $1,500.50

// Відображення ціни у євро для Німеччини
let dePrice = price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
console.log(dePrice); // 1.500,50 €

// Відображення ціни у гривнях для України
let uaPrice = price.toLocaleString('uk-UA', { style: 'currency', currency: 'UAH' });
console.log(uaPrice); // 1 500,50 ₴

JS довідник

JavaScript

Наповнення JS розділу