Как отформатировать даты в JavaScript с помощью одной строки кода

Содержание статьи

Долгое время я использую библиотеки типа Date-fns всякий раз, когда мне нужно отформатировать даты в JavaScript. Но это становится очень странно, когда я делаю это в небольших проектах, требующих простых форматов даты, которые JavaScript предлагает по умолчанию.

Я обнаружил, что большинство разработчиков делает это часто. И я думал, что это самый лучший способ, пока недавно не понял это нам не всегда нужно использовать библиотеки форматировать даты в JavaScript.

Если вам интересно испытать это, вот код:?

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) 
// "Friday, Jul 2, 2021"

Попробовав это в вашем собственном коде и убедившись, что это работает, давайте поймем почему это работает, и узнаем некоторые другие способы форматирования дат в JavaScript только одной строкой кода.

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

Наиболее используемым методом получения даты в JavaScript является метод new Date() объект.

По умолчанию, когда вы запускаете new Date() в терминале он использует часовой пояс вашего браузера и отображает дату в виде полнотекстовой строки, например Пт, 2 июля 2021 года, 12:44:45 GMT+0100 (британское летнее время).

Но иметь что-то похожее на своей веб-странице или в приложении не является профессиональным и нелегко читать. Поэтому это вынуждает вас искать лучшие способы форматирования этих дат.

Давайте посмотрим некоторые методы, которые работают с объектом даты.

Есть так много методов, которые можно применить к объекту даты. Эти методы можно использовать для получения информации с объекта даты. Вот некоторые из них:

getFullYear() – получает год в виде четырехзначного числа (рррр)
getMonth() – получает месяц в виде числа (0-11)
getDate() – получает день в виде числа (1-31)
getHours() – получает час (0-23)

И многое другое…

К сожалению, большинство из этих методов все еще требует много кода для преобразования дат в нужный нам формат.

Например, new Date().getMonth() выведет 6, что означает июль. Чтобы я мог использовать июль в своем проекте, мне понадобится длинный код, похожий на этот, который действительно может быть громоздким:

const currentMonth = new Date();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
console.log(months[currentMonth.getMonth()]);

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

Метод toDateString() в JavaScript

JavaScript toDateString() метод возвращает часть даты объекта даты в виде строки, используя следующий формат:

Первые три буквы названия дня недели
Первые три буквы названия месяца
Двухзначный день месяца, дополненный слева нулем, если необходимо
Четырехзначный год (по крайней мере), дополненный слева нулями, если необходимо

new Date().toDateString();
//"Fri Jul 02 2021"

Одним из основных недостатков этого метода наша неспособность манипулировать выводом дать так, как мы хотим.

Например, это не позволяет нам показывать даты в соответствии с нашим языком. Давайте посмотрим на другой метод, который для меня все еще один из лучших.

Метод toLocaleDateString() в JavaScript

Этот метод возвращает объект даты посредством строки с использованием локальных условий. Он также принимает параметры как аргументы, позволяющие вам / вашим приложениям настроить поведение функции.

Синтаксис:

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

Давайте рассмотрим несколько примеров и их результаты:

const currentDate = new Date();

const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };

console.log(currentDate.toLocaleDateString('de-DE', options));
//Freitag, 2. Juli 2021

console.log(currentDate.toLocaleDateString('ar-EG', options))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(currentDate.toLocaleDateString('en-us', options));
//Friday, Jul 2, 2021

Вы также можете решить не использовать ни локали, ни параметры:

new Date().toLocaleDateString()
// "7/2/2021"

Можно также решить использовать только локали. Это выведет ту же информацию, что и предыдущая, на основе часового пояса моего браузера.

new Date().toLocaleDateString('en-US')
"7/2/2021"

Вы также можете решить скрутить варианты по своему желанию. Есть 4 основных варианта, которые:

weekday – Это выводит день недели в зависимости от того, как вы хотите, чтобы он выглядел (коротким или длинным).
year – Это выводит год в виде числа
month – Это выводит месяц года в зависимости от того, как вы хотите, чтобы он выглядел (коротким или длинным).
day – Наконец, это выводит день в виде числа

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"}) // "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"

Объект даты имеет около семи методов форматирования. Каждый из этих методов дает вам конкретную ценность:

toString() дает тебе Пт, 2 июля 2021, 14:03:54 GMT+0100 (британское летнее время)
toDateString() дает тебе Пт, 2 июля 2021 года
toLocaleString() дает тебе 02.07.2021, 14:05:07
toLocaleDateString() дает тебе 02.07.2021
toGMTString() дает тебе Пт, 2 июля 2021 года, 13:06:02 GMT
toUTCString() дает тебе Пт, 2 июля 2021 года, 13:06:28 GMT
toISOString() дает тебе 2021-07-02T13:06:53.422Z

Если вы ищете более расширенные форматы даты, вам нужно будет создать собственный формат самостоятельно. Ознакомьтесь с нижеприведенными ресурсами, чтобы помочь вам понять, как создать специальные форматы даты.