JS метод Date.parse()


Загальний опис

Date.parse() є одним з основних методів у вбудованому об'єкті Date в JavaScript. Цей метод призначений для аналізу рядкового представлення дати та часу та конвертації його в числове представлення. Це числове представлення представляє кількість мілісекунд, що минула від 1 січня 1970 року (UTC) до вказаної дати та часу.

А чому це корисно? Уявіть ситуацію, коли ви отримуєте дату у форматі рядка, можливо, з сервера чи введенням користувача. Щоб маніпулювати цією датою, порівнювати її з іншими датами або виконувати різні операції, набагато зручніше мати її у числовому форматі. Тут Date.parse() і приходить на допомогу.

Розглянемо основний синтаксис:

Date.parse(dateString);

Де dateString - рядок, що представляє дату в розпізнаваному форматі.

Приклад 1:

let timestamp = Date.parse("March 21, 2022");
console.log(timestamp);  // це виведе числове представлення дати "21 березня 2022 року".

Важливо знати, що якщо Date.parse() не може розпізнати введений рядок, він поверне NaN.

Приклад 2:

let timestamp = Date.parse("Неправильний рядок дати");
console.log(timestamp);  // це виведе NaN.

Це дозволяє легко перевіряти, чи було розпізнання успішним.

Приклад 3:

const timestamp = Date.parse("someString");
if (isNaN(timestamp)) {
    console.error("Failed to parse the date string");
}

Date.parse() може розпізнати рядок дати у різних форматах. Проте найбільш надійний формат — це формат ISO 8601, який виглядає так: "YYYY-MM-DDTHH:mm:ss.sssZ". Розберемо його складові докладніше:

  • YYYY представляє рік і складається з чотирьох цифр. Наприклад: 2023.
  • MM — це місяць, представлений двома цифрами, де "01" — січень, а "12" — грудень.
  • DD — день місяця, також представлений двома цифрами, від "01" до "31" в залежності від місяця.
  • T — це літера-роздільник, яка вказує на початок часової частини.
  • HH — години в 24-годинному форматі, від "00" до "23".
  • mm — хвилини, від "00" до "59".
  • ss — секунди, також від "00" до "59".
  • .sss — мілісекунди, три цифри, які можуть бути від "000" до "999".
  • Z вказує на то, що час представлений у координованому всесвітньому часі (UTC). Якщо замість "Z" буде вказано зсув часового поясу, наприклад "+03:00", то час буде відноситися до конкретного часового поясу.

Використання цього формату надає однозначне та послідовне представлення дати та часу, що особливо корисно при обміні даними між різними системами або часовими поясами. Наприклад, якщо ви хочете представити 15 червня 2023 року о 14:30:45.123 в UTC, то це буде виглядати так: 2023-06-15T14:30:45.123Z.

Приклад 4:

let timestamp1 = Date.parse("2022-03-21T10:00:00.000");
console.log(timestamp1);  // місцевий час

let timestamp2 = Date.parse("2022-03-21T10:00:00.000Z");
console.log(timestamp2);  // UTC час
автор: Bond

Порада

Якщо ви часто отримуєте NaN, це означає, що вхідний рядок не може бути розпізнаний як дійсна дата. Переконайтеся, що ваш рядок дійсно представляє дату в підтримуваному форматі.

автор: Bond
Порада

Якщо в рядку дати не вказано часовий пояс, Date.parse() інтерпретує дату як місцевий час. Якщо ви хочете вказати дату в UTC, використовуйте "Z" наприкінці рядка.

автор: Bond
Порада

Незважаючи на те, що Date.parse() може розпізнати рядок дати у різних форматах, результати можуть відрізнятися в залежності від браузера або середовища виконання. При використанні нестандартних форматів завжди тестуйте результат у різних браузерах.

автор: Bond
Порада

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

автор: Bond
Порада

Не всі браузери однаково обробляють рядкові дати, що не є в форматі ISO. Тому завжди рекомендується використовувати формат ISO 8601 для найкращої сумісності.

автор: Bond

Синтаксис

Date.parse(dateString)

Параметри

dateString

Рядок у форматі дати та часу.

автор: Bond

Повернення

timestamp

Повертає число, яке представляє timestamp заданої дати. Якщо рядок dateString не може бути розпізнаний як коректна дата, повертається значення NaN.

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 3 12 3
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

У цьому прикладі ми використовуємо функцію isValidDate, яка використовує Date.parse для спроби перетворити рядок на дату. Якщо результат є NaN (що означає "не число"), це зазначає, що рядок не може бути розпізнаний як дата.

// Використання Date.parse() для перевірки, чи є рядок правильною датою
function isValidDate(dateString) {
    return !isNaN(Date.parse(dateString));
}

const dateToTest = "2023-06-15T14:30:45.123Z";
if (isValidDate(dateToTest)) {
    console.log("Це вірна дата!");
} else {
    console.log("Це невірна дата!");
}
автор: Bond

У цьому прикладі користувач може ввести рядкове представлення дати у поле введення, натиснути кнопку, і JavaScript використовує Date.parse() для перетворення цього рядка на таймстемп. Якщо рядок має правильний формат, результат відображається у зеленому кольорі, інакше - у червоному з повідомленням про помилку.

автор: Bond

У цьому прикладі ми створюємо функцію daysDifference, яка приймає дві дати у рядковому форматі. За допомогою Date.parse ми перетворюємо ці рядки у таймстемпи (час в мілісекундах від початку епохи Unix). Далі ми визначаємо різницю між цими двома таймстемпами, ділимо її на кількість мілісекунд у одному дні та округлюємо результат.

// Використання Date.parse() для обчислення різниці між двома датами
function daysDifference(dateString1, dateString2) {
    const ONE_DAY = 24 * 60 * 60 * 1000; // кількість мілісекунд у одному дні
    const timestamp1 = Date.parse(dateString1);
    const timestamp2 = Date.parse(dateString2);

    return Math.round(Math.abs((timestamp1 - timestamp2) / ONE_DAY));
}

const startDate = "2023-06-01T00:00:00.000Z";
const endDate = "2023-06-15T00:00:00.000Z";
const difference = daysDifference(startDate, endDate);
console.log(`Різниця між датами складає {difference} днів.`);
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід