Некоторое время назад я писал приложение CRUD, которое отслеживало «время начала» и «время окончания» для записей, которые были созданы и сохранены в базе данных. Я мог бы вычесть эти значения времени, чтобы найти простую «продолжительность времени» для каждой записи. Но получить данные времени в удобном формате оказалось немного сложнее, чем я ожидал.
Дата и время.
Самая сложная часть работы с данными времени - это вероятность того, что крайний случай вызовет зацикливание вашего приложения. Такие вещи, как локализация, 24 часа против 12 часов и другие темы, представляют собой интересные проблемы.
В моем приложении одна сложная концепция заключалась в том, чтобы дать пользователю возможность создать запись, которая длилась более 24 часов. Работа в рамках ограничений формата AM / PM сама по себе может стать серьезной проблемой.
Следующий микропроект предназначен для демонстрации некоторых полезных вещей, которые я обнаружил при работе с отметками времени в JavaScript, и особенно с точки зрения вычисления значения времени.
Настройка проекта
Это очень простой проект, и есть только минимальный CSS, который я не буду здесь включать.
HTML устанавливает базовую схему калькулятора с двумя входами, локальными для даты и времени.
Код JavaScript выглядит следующим образом:
Пока проект выглядит так:
Объяснение проекта
1. Получить временную строку с помощью HTML-ввода
HTML <input type=’datetime-local’> выполняет большую часть тяжелой работы по локализации. Это создаст календарный ввод, который включает поле времени в 12- или 24-часовом формате в зависимости от значений по умолчанию в операционной системе пользователя.
Когда вы получаете значение ввода в JavaScript, у вас будет доступ к строке, которая выглядит следующим образом:
2020-07-21T16:20
2. Преобразование строки даты в метку времени Unix (миллисекунды с 01.01.1970)
Функция обратного вызова, которая срабатывает при нажатии кнопки «Рассчитать», будет преобразовывать строку даты, связанную с вашими временными входами, в числовое значение.
Мы создали переменную, которая соответствует значениям каждого из полей ввода. Затем мы создаем новый объект Date для каждого из этих значений и передаем значения для создания даты. Затем мы используем метод .getTime(), встроенный в объект Date, для преобразования наших строк в метку времени Unix.
Эта временная метка очень гибкая и позволяет обойти многие ошибки, связанные с обработкой временных данных. Это число называется временем Unix или временем эпохи, а в JavaScript оно представляет собой количество миллисекунд, прошедших с начала 1970 года.
Причина, по которой это замечательно, заключается в том, что работа с данными времени в формате строки, объекта или другого типа данных создаст серьезные проблемы, когда начнут появляться граничные случаи вашего приложения. Если ваше приложение изначально настроено на прием данных времени исключительно в формате Unix, вы можете легко манипулировать своими данными Unix по мере необходимости, чтобы отображать полезную информацию для пользователя. Мы сделаем это на следующем шаге.
3. Управление меткой времени Unix для внешнего интерфейса
В случае этого проекта и приложения CRUD, о котором я говорил ранее, я хочу показать пользователю количество часов, прошедших с момента начала до времени окончания.
Это сводится к базовому вычислению вычитания значения времени окончания для Unix из значения времени начала для Unix. Это приведет к разнице в миллисекундах, которую мы можем разделить на количество миллисекунд в часе (3 600 000). Наконец, мы можем еще больше навести порядок, округлив до второго десятичного знака с помощью .toFixed(2).
После завершения этого расчета мы обновляем значение нашего элемента «результат», чтобы отобразить количество часов, прошедших во внешнем интерфейсе.
4. Добавление базовой проверки
Переменные в нашей функции обратного вызова будут представлять числовые значения на основе строки, которая передается их соответствующим Date объектам. Если они не могут этого сделать, будет возвращено NaN.
Таким образом, мы проверим, что ни одно из полей не возвращает NaN, и выйдем из функции с alert, если одно из них вернет. Мы также проверим, является ли время окончания более поздним, чем время начала.
Это в основном все, что делает этот проект, а готовый продукт с рассчитанным результатом будет выглядеть следующим образом:
Применение этого в других сценариях
Самое прекрасное в работе с данными времени Unix - это то, насколько они универсальны. В большинстве случаев он обходит ограничения, установленные локализацией, настройками отображения времени пользователя и другими ситуациями, с которыми сложно справиться.
Важное предупреждение о хранении данных о времени
Этот проект служит очень простой демонстрацией использования данных времени в JavaScript, но он не охватывает некоторые важные аспекты хранения и отображения этих данных для дальнейшего использования. Когда JavaScript преобразует строку времени во время Unix, он будет использовать UTC. Обычно это в ваших интересах, так как полезно хранить все ваши временные данные в формате UTC, но будет дополнительный шаг для отображения этих данных в удобном формате времени в зависимости от местоположения ваших пользователей.
Другими словами, сохраните данные в формате UTC и преобразуйте внешнее представление этих данных в местное время пользователя.
Ключевые выводы
Работа с датой и временем в JavaScript (и на любом языке программирования) сопряжена с множеством подводных камней. Когда вы начинаете учитывать любую сложную функциональность, которая может потребоваться вашему приложению, вы можете подумать о внедрении времени Unix, чтобы избавиться от многих административных головных болей.
Я хотел бы знать, есть ли у вас какие-либо другие предложения о том, как использовать время в JavaScript, поэтому, пожалуйста, дайте мне знать, если я упускаю что-то интересное.
Спасибо за прочтение.
JavaScript на простом английском языке
Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!
