Number.toLocaleString() в JavaScript — формат числа

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

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

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

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

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

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

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

1. Додаткові опції форматування: Метод 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() виконується повільніше, ніж багато інших методів форматування чисел. Для одноразового форматування це може бути несуттєво, але якщо вам потрібно форматувати великі масиви чисел, розгляньте можливість оптимізації або використання альтернативних методів.

автор: Bond правити

Нотатка

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

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

автор: Bond правити

Нотатка

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

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Параметри

locales

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

автор: Bond

правити

options

Об'єкт для налаштування формату виводу. Відповідає параметру options конструктора Intl.NumberFormat().

автор: Bond

правити

Повернення

string

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Number.prototype.toLocaleString()</h2>
  <p class="description">Форматує число згідно вибраної локалі.</p>
</header>
<main>
  <div class="result">
    <label>Введіть число: <input type="number" id="numberInput" value="1234567.89"></label><br><br>
    <label>Виберіть локаль: 
      <select id="localeSelector">
        <option value="uk-UA">Українська</option>
        <option value="en-US">Англійська (США)</option>
        <option value="fr-FR">Французька</option>
      </select>
    </label><br><br>
    <button onclick="updateResult()">Форматувати</button>
    <hr>
    <p>Результат: <span id="output"></span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  padding: 8px 15px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

function updateResult() {
  const number = parseFloat(document.getElementById("numberInput").value);
  const locale = document.getElementById("localeSelector").value;
  const formattedNumber = number.toLocaleString(locale, { style: 'currency', currency: 'USD' });
  document.getElementById("output").innerText = formattedNumber;
}
//# sourceURL=pen.js

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

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 ₴