Форматирование чисел, дат и валют
n() для чисел, d() для дат, форматы даты и времени и numberFormats для каждой локали
«Форматирование чисел, дат и валют» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Числа и даты зависят от локали
Число 1,000.50 в формате US записывается как 1.000,50 во многих странах Европы. Даты и валюты также различаются. Vue I18n оборачивает API браузера Intl, поэтому числа, даты и денежные значения отображаются правильно для каждой локали.
Настройка numberFormats
Определяйте именованные числовые форматы для каждой локали в опции numberFormats функции createI18n. Каждый именованный формат представляет собой объект параметров Intl.NumberFormat.
const i18n = createI18n({
locale: "en",
numberFormats: {
en: {
currency: { style: "currency", currency: "USD" },
decimal: { style: "decimal", minimumFractionDigits: 2 },
},
},
})Функция n()
Форматируйте число с помощью n(value, formatName) из useI18n() или $n в шаблонах. Используется именованный формат активной локали.
const { n } = useI18n()
n(1234.5, "decimal") // "1,234.50" in enФорматирование валюты
Стиль currency добавляет правильный символ и разделение на разряды. Код валюты в конфигурации формата определяет, какой символ будет отображаться.
const { n } = useI18n()
n(49.99, "currency") // "$49.99" in enФорматирование валюты с учётом локали
Добавьте один и тот же именованный формат для каждой локали, используя подходящие для неё настройки. Переключение locale автоматически изменяет разделение на разряды, десятичные разделители и расположение символа.
numberFormats: {
en: { currency: { style: "currency", currency: "USD" } },
tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)Проценты
Стиль percent умножает значение на 100 и добавляет знак процента в соответствии с локалью.
numberFormats: {
en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}
n(0.256, "percent") // "25.6%"Настройка datetimeFormats
Форматирование дат работает так же, как форматирование чисел. Определяйте именованные форматы в datetimeFormats; каждый из них является объектом параметров Intl.DateTimeFormat.
const i18n = createI18n({
locale: "en",
datetimeFormats: {
en: {
short: { year: "numeric", month: "short", day: "numeric" },
long: { dateStyle: "full", timeStyle: "short" },
},
},
})Функция d()
Форматируйте дату с помощью d(value, formatName) (или $d в шаблонах). Передайте объект Date или временную метку.
const { d } = useI18n()
d(new Date("2026-05-29"), "short") // "May 29, 2026" in enДаты с учётом локали
Как и для чисел, укажите именованный формат даты для каждой локали. Один и тот же вызов при смене локали выдаёт соответствующий порядок элементов и названия месяцев.
datetimeFormats: {
en: { short: { year: "numeric", month: "short", day: "numeric" } },
tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)Использование вспомогательных средств форматирования в шаблонах
В шаблонах используйте $n и $d, передавая значение и именованный формат.
<template>
<p>Total: {{ $n(total, "currency") }}</p>
<p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>Одноразовые встроенные параметры
Помимо именованных форматов, Вы можете передать встроенный объект параметров вторым аргументом, чтобы однократно применить формат без определения его в конфигурации.
const { n, d } = useI18n()
n(0.5, { style: "percent" }) // "50%"
d(new Date(), { weekday: "long" }) // "Friday"Быстрая проверка
Проверьте, насколько хорошо Вы понимаете форматирование с учётом локали.
Итоги
Вы научились форматировать данные с учётом локали:
- Настраивать именованные форматы в
numberFormatsиdatetimeFormatsдля каждой локали. - Использовать
n(value, name)/$nдля форматирования чисел в десятичном, денежном виде и в виде процентов. - Использовать
d(value, name)/$dдля форматирования дат. - При смене
localeавтоматически изменяются группировка разрядов, десятичные разделители, символы и порядок даты. - Также можно передавать встроенный объект параметров для одноразового форматирования.
Часто задаваемые вопросы
Урок «Форматирование чисел, дат и валют» бесплатный?
Да — полный текст урока «Форматирование чисел, дат и валют» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Форматирование чисел, дат и валют»?
n() для чисел, d() для дат, форматы даты и времени и numberFormats для каждой локали Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Форматирование чисел, дат и валют»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка vue-i18n и файлов сообщений
- Композируемый модуль useI18n и функция t()
- Множественное число и связанные сообщения
- Форматирование чисел, дат и валют