0Pricing
JavaScript Academy · Урок

Форматирование чисел и валют

Используйте Intl.NumberFormat для форматирования чисел с учётом локали.

«Форматирование чисел и валют» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Пространство имён Intl

Intl — встроенный API JavaScript для интернационализации. Он форматирует числа, даты, валюты и другие данные в соответствии с правилами локали — библиотека не требуется.

console.log(typeof Intl); // "object"
console.log(typeof Intl.NumberFormat); // "function"

Основы Intl.NumberFormat

Создайте форматировщик с указанием локали, а затем вызовите format(). В локалях используются теги BCP 47, например "en-US" или "de-DE".

const nf = new Intl.NumberFormat("en-US");
console.log(nf.format(1234567.89)); // "1,234,567.89"

Различия локалей

Одно и то же число отображается по-разному в разных локалях. В немецком языке для разделения тысяч используются точки, а для десятичных разрядов — запятая.

const n = 1234567.89;
console.log(new Intl.NumberFormat("en-US").format(n)); // 1,234,567.89
console.log(new Intl.NumberFormat("de-DE").format(n)); // 1.234.567,89

Форматирование валюты

Передайте style: "currency" и код currency. Символ валюты и его расположение зависят от локали.

const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
console.log(usd.format(2999.5)); // "$2,999.50"

Валюта в разных локалях

Валюта остаётся той же, но её представление адаптируется к выбранной локали.

const opts = { style: "currency", currency: "EUR" };
console.log(new Intl.NumberFormat("en-IE", opts).format(1000)); // €1,000.00
console.log(new Intl.NumberFormat("de-DE", opts).format(1000)); // 1.000,00 €

Процентный стиль

style: "percent" умножает значение на 100 и добавляет знак процента, используемый в локали.

const pct = new Intl.NumberFormat("en-US", { style: "percent" });
console.log(pct.format(0.1875)); // "19%"
console.log(new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 2 }).format(0.1875)); // "18.75%"

Управление десятичными разрядами

minimumFractionDigits и maximumFractionDigits управляют количеством десятичных разрядов.

const f = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(f.format(3));    // "3.00"
console.log(f.format(3.14159)); // "3.14"

Единицы измерения

style: "unit" вместе с unit форматирует величины, например километры или литры.

const speed = new Intl.NumberFormat("en-US", { style: "unit", unit: "kilometer-per-hour" });
console.log(speed.format(120)); // "120 km/h"

Компактная запись

notation: "compact" сокращает большие числа (1.2K, 3.4M) — это удобно для отображения количества в социальных сетях.

const c = new Intl.NumberFormat("en-US", { notation: "compact" });
console.log(c.format(1500));    // "1.5K"
console.log(c.format(2300000)); // "2.3M"

Отображение знака

signDisplay: "always" показывает знак даже для положительных чисел — это удобно для разностей и изменений.

const s = new Intl.NumberFormat("en-US", { signDisplay: "always" });
console.log(s.format(5));  // "+5"
console.log(s.format(-5)); // "-5"

Повторное использование форматировщиков

Создание форматировщика требует сравнительно много ресурсов. Создайте его один раз и используйте повторно для множества значений вместо создания нового при каждом вызове.

const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
const prices = [9.99, 19.5, 100];
console.log(prices.map((p) => money.format(p)));

Быстрая проверка

Проверьте форматирование чисел.

Итоги: числа и валюта

Вы форматировали числа с учётом локали, работали с валютами, процентами, единицами измерения, компактной записью и отображением знака, управляли количеством десятичных разрядов и научились повторно использовать форматировщики. Далее: даты и время.

Часто задаваемые вопросы

Урок «Форматирование чисел и валют» бесплатный?

Да — полный текст урока «Форматирование чисел и валют» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Форматирование чисел и валют»?

Используйте Intl.NumberFormat для форматирования чисел с учётом локали. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Форматирование чисел и валют»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Форматирование чисел и валют
  2. Форматирование дат и времени
  3. Относительное время и множественные формы
  4. Сортировка с учётом локали
← Назад к JavaScript Academy