Программисты на JavaScript используют Moment.js, даже если он им не нужен. Я думаю, причина этого в том, что конструктор Date может сбивать с толку, если вы не понимаете, как он работает.

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

Две вещи побудили меня написать эту статью. Во-первых, моему другу, который работает Front-End разработчиком, его коллега по Back-End посоветовал использовать Moment.js. Мой друг был в порядке с Native API, но, поскольку Back-End разработчик использует Moment на сервере, он предпочел, чтобы мой друг также использовал его на стороне клиента.

Второе - это пост, который был опубликован в группе сообщества JavaScript Israel на Facebook.

Почему это может сбивать с толку?

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

Итак, я пытаюсь прояснить ситуацию.

Системное время.

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

Компьютер знает и считает время только в формате UTC.

Чтобы показать нам время в нашем правильном часовом поясе, компьютер просто добавляет часы по нашему часовому поясу к системным часам. Например, если мы находимся в Израиле и часовой пояс UTC + 2 (или UTC + 3 летом), поэтому компьютер просто добавляет 7200000 (1000 мс * 60 с * 60 м * 2 ч) к системным часам и показывает нам время. по нашему часовому поясу.

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

Формат ISO 8601.

Формат ISO - это международный стандарт для представления даты и времени. Дата и время выражаются как ГГГГ-ММ-ДДТЧЧ: ММ: SSZ, когда буква T разделяет дату и время, а Z означает UTC. по умолчанию этот формат дает нам UTC, если мы не используем число + UTC (например, +2) вместо Z.

Теперь, когда мы это понимаем, мы можем немного лучше понять конструктор даты в JavaScript.

Конструктор даты

Конструктор Date поддерживает только местное время пользователя и UTC.

Конструктор Date использует системное время на нашем компьютере, чтобы отображать / управлять временем.

Когда мы пишем Date (). GetTime (), мы фактически получаем UNIX-время в нашей системе. Время, которое компьютер использует для вычисления всех дат. Это число, которое компьютер использует для сравнения дат и т. Д.… И, как вы помните, системное время всегда в формате UTC, поэтому мы получаем количество миллисекунд в формате UTC.

Когда мы пишем Date (). ToISOString (), мы получаем время в формате ISO, конечно, НО, потому что по умолчанию формат ISO находится в UTC - мы получаем время в формате UTC.

Во всех других функциях (кроме, разумеется, функций UTC) механизм JavaScript возвращает нам дату и время по нашему часовому поясу. Механизм JS берет время UNIX, добавляет к нему наш часовой пояс, и в результате получается нечто, что мы можем четко понять.

Когда мы передаем число или строку конструктору Date, мы определяем время, которое мы хотим.

Если мы передаем число - мы определяем «системный» номер в UNIX, и он всегда в формате UTC. Затем, когда мы снова хотим, например, getHours (), движок берет число, которое мы ему передали, добавляет часовой пояс нашего компьютера, а затем возвращает нам часы.

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

Если мы передадим строку в формате ISO, например «2020–10–09», потому что формат ISO по умолчанию установлен в UTC, вся строка, которую движок просматривает, будет:

“2020–10–09T00:00:00.0Z”

Если мы воспользуемся этой строкой и вызовем getHours () в нашем объекте даты, потому что этот часовой пояс на нашем компьютере определен как UTC + 2 - мы получим 2. Теперь, когда вы знаете, как идут дела, это больше не сбивает с толку!

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

Пример:

Мы хотим вычислить, сколько дней осталось между двумя датами:

Из-за времени UNIX нам нужно производить вычисления в миллисекундах. Мне нужно знать, сколько миллисекунд в одном дне. Сегодня мс * м * ч * день. Теперь, когда у нас есть это число, мы можем вычесть две даты, и мы получим разницу между ними в миллисекундах. Теперь нам нужно разделить результат на количество миллисекунд одного дня, которое мы рассчитали заранее.

Выводы

Конструктор Date использует системное время (UNIX) для вычисления даты. Почти для каждого значения, которое мы ему отправляем, конструктор анализирует эти значения в формате UTC (по времени UNIX), за исключением формата ISO и UNIX, которые явно указаны в формате UTC.

Если мы выведем время, созданное конструктором, он добавит к выводу наш местный часовой пояс, кроме случаев, когда мы запрашиваем формат ISO или время UNIX.

Это основа для понимания того, как работают конструктор системного времени и JS Date. Если вы это понимаете, вам вообще не нужен Moment.js, потому что вы знаете, что делаете. Больше никаких сюрпризов при работе с датой и временем.

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

Удачи!

Надеюсь, я правильно объяснил эту тему. Если у вас есть вопрос или вы думаете, что я ошибся, свяжитесь со мной 😊