Оригінальна публікація: How to Format Dates in JavaScript with One Line of Code

Довгий час я користувався бібліотеками, як-от Date-fns, коли мені потрібно було встановити дату в JavaScript. Але їх дивно використовувати у малих проєктах, що вимагають простих форматів дати й часу, які JavaScript пропонує за замовчуванням.

Я дізнався, що так робить багато розробників. І я думав, що це найкращий спосіб, допоки не зрозумів, що не завжди потрібно використовувати бібліотеки для форматування дат в JavaScript.

Якщо хочете спробувати, ось код:👇

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

Ви, мабуть, спробували його та побачили, що все працює. Давайте розберемось, як працює цей код та дізнаємось про інші способи форматування дати в JavaScript за допомогою лише одного рядка коду.

Як форматувати дату й час у JS

Отримати дату й час у JavaScript не викликає проблем, але їхнє форматування може здатись важким для початківців. Через це багато людей користуються бібліотеками.

new Date() — це найпоширеніший метод отримання дати й часу в JavaScript.

За замовчуванням, коли ви запускаєте new Date() у своєму терміналі, використовується часовий пояс вашого браузера та дата/час показані як повний текстовий рядок, наприклад Fri Jul 02 2021 12:44:45 GMT+0100 (British Summer Time).

Але мати щось подібне на вебсторінці або в додатку — непрофесійно та важко для читання. Тому потрібно знайти кращі способи для форматування дати й часу.

Розглянемо деякі методи, які працюють для дати й часу.

Методи дати й часу в JavaScript

Існує багато методів, які можна застосувати до дати й часу. Ці методи можна використовувати, щоб отримати інформацію щодо дати й часу. Ось декілька з них:

  • getFullYear() — для отримання року як чотиризначного числа (yyyy)
  • 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

Метод toDateString() повертає частину дати й часу у вигляді рядка, використовуючи наступний формат:

  1. Перші три літери дня
  2. Перші три літери місяця
  3. Дві цифри, що позначають день (за потреби з нулями зліва)
  4. Принаймні чотири цифри, що позначають рік (за потреби з нулями зліва)
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"

Висновок

Дату і час можна відобразити сімома різними методами. Кожен з цих методів надає певне значення:

  1. toString() надає Fri Jul 02 2021 14:03:54 GMT+0100 (British Summer Time)
  2. toDateString() надає Fri Jul 02 2021
  3. toLocaleString() надає 7/2/2021, 2:05:07 PM
  4. toLocaleDateString() надає 7/2/2021
  5. toGMTString() надає Fri, 02 Jul 2021 13:06:02 GMT
  6. toUTCString() надає Fri, 02 Jul 2021 13:06:28 GMT
  7. toISOString() надає 2021-07-02T13:06:53.422Z

Якщо ви шукаєте передовіші формати дати, вам потрібно буде створити спеціальний формат самостійно.