Форматирование дат
Отображайте даты с параметрами toLocaleDateString.
«Форматирование дат» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Форматирование дат
JavaScript предоставляет несколько встроенных методов для преобразования даты в читаемый текст: от вывода с учётом региональных настроек до стандартизированных строк ISO.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString())toISOString
toISOString возвращает стандартизированную строку в формате UTC. Она идеально подходит для хранения и обмена данными, поскольку не допускает неоднозначности.
const d = new Date(Date.UTC(2024, 0, 15, 10, 30, 0))
console.log(d.toISOString())Извлечение части строки ISO
В строке ISO дата расположена в начале, поэтому можно взять первые десять символов, чтобы получить только календарную дату.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))toLocaleDateString
toLocaleDateString форматирует часть, содержащую дату, с учётом региональных настроек и создаёт представление, подходящее для данного региона.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { timeZone: "UTC" })
console.log(typeof text)Аргумент региональных настроек
Первый аргумент — это тег региональных настроек, например en-US или de-DE, который изменяет порядок компонентов и разделители отформатированной даты.
const d = new Date(Date.UTC(2024, 0, 15))
const us = d.toLocaleDateString("en-US", { timeZone: "UTC" })
const iso = d.toISOString().slice(0, 10)
console.log(typeof us, iso)Параметры форматирования
Объект параметров позволяет выбрать способ отображения каждой части, например полное название месяца или числовой год.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" })
console.log(typeof text)toLocaleTimeString
toLocaleTimeString форматирует только часть, содержащую время, также учитывая региональные настройки и переданные параметры.
const d = new Date(Date.UTC(2024, 0, 15, 14, 5, 0))
const text = d.toLocaleTimeString("en-US", { timeZone: "UTC" })
console.log(typeof text)toLocaleString
toLocaleString объединяет дату и время в одну строку с учётом региональных настроек.
const d = new Date(Date.UTC(2024, 0, 15, 9, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)toDateString
toDateString возвращает фиксированное понятное человеку представление даты на английском языке без параметров региональных настроек, что удобно для быстрого журналирования.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof d.toDateString())Intl.DateTimeFormat
Для многократного форматирования Intl.DateTimeFormat создаёт повторно используемый объект форматирования, что эффективнее многократных вызовов методов с учётом региональных настроек.
const fmt = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", dateStyle: "medium" })
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof fmt.format(d))Выбор формата
Используйте строки ISO для хранения данных и работы с API, а методы с учётом региональных настроек — для отображения пользователям в их регионе. Разделяйте эти задачи.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))Быстрая проверка
Проверьте свои знания о форматировании.
Повторение
Повторение: выбирайте подходящий метод форматирования для каждой задачи.
- toISOString — для хранения данных и API
- toLocaleDateString и похожие методы — для отображения пользователям
- Параметры управляют названиями месяцев и стилями отображения чисел
- Intl.DateTimeFormat эффективен при многократном форматировании
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))Часто задаваемые вопросы
Урок «Форматирование дат» бесплатный?
Да — полный текст урока «Форматирование дат» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Форматирование дат»?
Отображайте даты с параметрами toLocaleDateString. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Форматирование дат»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.