Относительное время и множественные формы
Используйте RelativeTimeFormat и PluralRules.
«Относительное время и множественные формы» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Intl.RelativeTimeFormat
Intl.RelativeTimeFormat создаёт фразы вроде «3 дня назад» или «через 2 часа» на языке пользователя.
const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-1, "day")); // "1 day ago"
console.log(rtf.format(2, "hour")); // "in 2 hours"Отрицательное значение для прошлого, положительное для будущего
Знак числа задаёт направление: отрицательное значение указывает на прошлое, положительное — на будущее.
const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-3, "week")); // "3 weeks ago"
console.log(rtf.format(5, "minute")); // "in 5 minutes"Числовой параметр
numeric: "auto" использует естественные слова, например «вчера» или «завтра», вместо фразы «1 день назад».
const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
console.log(rtf.format(-1, "day")); // "yesterday"
console.log(rtf.format(0, "day")); // "today"Локализованное относительное время
При смене локали вся фраза автоматически переводится.
console.log(new Intl.RelativeTimeFormat("es").format(-2, "day")); // "hace 2 dias"
console.log(new Intl.RelativeTimeFormat("fr").format(3, "hour")); // "dans 3 heures"Выбор подходящей единицы
В реальных приложениях выбирают самую крупную подходящую единицу. Вычислите разность в секундах и последовательно переходите к меньшим единицам.
function ago(date) {
const diff = (date - Date.now()) / 1000;
const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
if (Math.abs(diff) < 60) return rtf.format(Math.round(diff), "second");
if (Math.abs(diff) < 3600) return rtf.format(Math.round(diff / 60), "minute");
return rtf.format(Math.round(diff / 3600), "hour");
}
console.log(ago(new Date(Date.now() - 90000)));Intl.PluralRules
Образование форм множественного числа — это не просто добавление буквы «s». Intl.PluralRules сопоставляет число с такой категорией, как "one" или "other", в соответствии с правилами языка.
const pr = new Intl.PluralRules("en-US");
console.log(pr.select(1)); // "one"
console.log(pr.select(2)); // "other"
console.log(pr.select(0)); // "other"Создание сообщений с формами множественного числа
Используйте категорию, чтобы выбрать правильное слово.
const pr = new Intl.PluralRules("en-US");
const forms = { one: "item", other: "items" };
function label(n) { return n + " " + forms[pr.select(n)]; }
console.log(label(1)); // "1 item"
console.log(label(5)); // "5 items"Языки с большим количеством форм
Во многих языках существует несколько категорий множественного числа. Например, польский различает "few" и "many" — жёстко заданная логика английского языка дала бы неверный результат.
const pr = new Intl.PluralRules("pl");
console.log(pr.select(1)); // "one"
console.log(pr.select(3)); // "few"
console.log(pr.select(5)); // "many"Порядковые формы множественного числа
Передайте type: "ordinal", чтобы получить категории для порядковых числительных, например 1st, 2nd и 3rd.
const pr = new Intl.PluralRules("en-US", { type: "ordinal" });
const suffix = { one: "st", two: "nd", few: "rd", other: "th" };
function ordinal(n) { return n + suffix[pr.select(n)]; }
console.log(ordinal(1), ordinal(2), ordinal(3), ordinal(11)); // 1st 2nd 3rd 11thСочетание с числами
Сочетайте PluralRules с NumberFormat, чтобы создавать полностью локализованные сообщения о количестве.
const nf = new Intl.NumberFormat("en-US");
const pr = new Intl.PluralRules("en-US");
const forms = { one: "file", other: "files" };
function msg(n) { return nf.format(n) + " " + forms[pr.select(n)]; }
console.log(msg(1000)); // "1,000 files"Intl.ListFormat
И ещё: Intl.ListFormat объединяет элементы с использованием правильных для локали союзов.
const lf = new Intl.ListFormat("en-US", { type: "conjunction" });
console.log(lf.format(["red", "green", "blue"])); // "red, green, and blue"Быстрая проверка
Проверьте относительное время и формы множественного числа.
Итоги: относительное время и формы множественного числа
Вы форматировали относительное время с помощью RelativeTimeFormat (в том числе с numeric: "auto"), выбирали пороги единиц, правильно обрабатывали формы множественного числа с помощью PluralRules для разных языков и порядковых числительных, а также объединяли списки с помощью ListFormat. Далее: сортировка с учётом локали.
Часто задаваемые вопросы
Урок «Относительное время и множественные формы» бесплатный?
Да — полный текст урока «Относительное время и множественные формы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Относительное время и множественные формы»?
Используйте RelativeTimeFormat и PluralRules. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Относительное время и множественные формы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Форматирование чисел и валют
- Форматирование дат и времени
- Относительное время и множественные формы
- Сортировка с учётом локали