Введение
Дата и время — это не только важнейшие компоненты повседневной жизни, но и часть компьютерного программирования. Нужны ли они вам для бронирования встреч или отображения календаря, существует множество причин, по которым вам могут понадобиться дата и время. Области применения функций даты и времени обширны и чрезвычайно универсальны. Универсальность заключается в том, что вы можете настраивать время и дату в зависимости от пользователя. Каждый пользователь в другом географическом положении получит разный результат в зависимости от своего часового пояса. Эти функции используются для веб-сайтов с интерфейсами записи на прием и системами бронирования, например, для ресторанов.
Программисты часто используют JavaScript для добавления функций даты и времени на свои веб-сайты. Это связано с тем, что в JavaScript уже есть встроенная функция для этих аспектов. В этом руководстве мы подробнее изучим Date более подробно. Мы поговорим о методах, которые вы можете использовать для настройки идеальных параметров даты и времени на вашем веб-сайте. Мы также рассмотрим, как можно изменить формат и многое другое.
Что такое объект Date?
Как мы только что упомянули, в JavaScript есть встроенная функция для работы с датой и временем. Она называется Date . Этот объект позволяет изменять и управлять связанными данными даты и времени. Когда вы создаете экземпляр Date, создается новый объект. Этот объект соответствует настройкам даты и времени вашего компьютера на данный момент.
Чтобы лучше понять работу этого объекта, рассмотрим пример. Сначала создадим переменную. Затем присвоим ей определенную дату. Предположим, что день недели — среда, а дата — 18 октября в часовом поясе Лондона (GMT). Посмотрите на эту конфигурацию:
|
1 2 3 4 |
// Установить переменную на текущую дату и время const now = new Date(); // Просмотреть вывод Now; |
|
1 2 3 |
Output Wed Oct 18 2017 12:41:34 GMT+0000 (UTC) |
Наш вывод показывает строку даты. Она состоит из следующих данных:
| День недели | Месяц | День | Год | Час | Минута | Секунда | Часовой пояс |
| Wed | Oct | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
JavaScript получает данные через временную метку. Эта временная метка берется из времени Unix. Это значение, которое показывает количество миллисекунд, прошедших с полуночи 1 января 1970 года. Для пользователя дата отображается в понятном формате. Если вы хотите получить эту временную метку, вам нужно использовать метод getTime() следующим образом:
|
1 2 3 |
// Получить текущую временную метку now.getTime(); |
|
1 2 3 |
Output 1508330494000 |
Хотя это значение выглядит непонятным, оно представляет то же самое, что и строка даты. Это просто 18 октября 2017 года.
Что такое время эпохи (Epoch Time)?
Следующая концепция, которую необходимо изучить, — это время эпохи. Его также называют нулевым временем. Вы можете лучше понять его как строку данных
01 Январь, 1970 00:00:00 Всемирное время (UTC) и временную метку 0 0. Чтобы протестировать это, создайте новую переменную. Затем присвойте ее новому экземпляру
Date с временной меткой 0 0:
|
1 2 3 4 5 |
// Присвоить временную метку 0 новой переменной const epochTime = new Date(0); epochTime; |
|
1 2 3 |
Output 01 Январь, 1970 00:00:00 Всемирное время (UTC) |
Время эпохи раньше было стандартом для программистов. Это также метод, который JavaScript использует для измерения времени.
Форматы создания дат в JavaScript
Теперь, когда мы знаем, как создать новый экземпляр Date с помощью строки и временной метки, мы можем поговорить о различных форматах. Существует четыре формата, которые подробно описаны ниже:
Это означает, что при необходимости вы можете указывать конкретные даты и время. Вы также можете просто использовать строку данных или временную метку, как мы обсуждали ранее. Для понимания мы рассмотрим, как создавать новые объекты Date тремя различными способами. Предположим, что наша дата и время — 4 июля 1776 года в 12:30 GMT:
|
1 2 3 4 5 6 7 8 |
// Метод временной метки (Timestamp) new Date(-6106015800000); // Метод строки даты new Date("July 4 1776 12:30"); // Метод даты и времени new Date(1776, 6, 4, 12, 30, 0, 0); |
Как видите, все три метода возвращают одну и ту же дату. Одно отличие заключается в том, что если вы используете время до начала эпохи Unix (Epoch time), временная метка будет отрицательным числом. Кроме того, секунды и миллисекунды по умолчанию равны 0 в методе даты и времени. Если вы забудете ввести число, оно также будет установлено в 0 по умолчанию.
Еще один запутанный момент заключается в том, что июль обозначается цифрой 6 вместо 7. Это связано с тем, что нумерация начинается с 0. Помните об этом при создании экземпляров.
Использование команды get для получения даты
Теперь, когда дата установлена, давайте посмотрим, как получить доступ к ее компонентам. Один из способов — использовать команду get. В этой таблице показаны все методы get для объекта Date :
В этом примере мы присвоим новую дату новой переменной, 31 июля 1980 года:
|
1 2 |
// Инициализация нового экземпляра дня рождения const birthday = new Date(1980, 6, 31); |
Вот как это выглядело бы, если бы вы получали все отдельные компоненты даты с помощью этого метода:
|
1 2 3 4 5 6 7 8 9 |
birthday.getFullYear(); // 1980 birthday.getMonth(); // 6 birthday.getDate(); // 31 birthday.getDay(); // 4 birthday.getHours(); // 0 birthday.getMinutes(); // 0 birthday.getSeconds(); // 0 birthday.getMilliseconds(); // 0 birthday.getTime(); // 333849600000 (для GMT) |
В некоторых ситуациях вам может понадобиться только определенная часть даты. Для этого можно использовать эти методы. Вот как можно проверить, наступило ли 3 октября:
|
1 2 3 4 5 6 7 8 |
// Получить сегодняшнюю дату const today = new Date(); // Сравнить сегодня с 3 октября if (today.getDate() === 3 && today.getMonth() === 9) { console.log("Сегодня 3 октября."); } else { console.log("Сегодня не 3 октября."); } |
|
1 2 3 |
Вывод Сегодня'не 3 октября . |
Это тот вывод, который вы получили бы, если бы дата не была 3 октября и вы проверили ее.
Использование команды set для изменения даты
Аналогично командам get, у вас есть соответствующие команды set . Эта команда позволяет изменять компоненты даты. В этой таблице показаны все методы:
Допустим, мы хотим изменить переменную birthday с 1997 на 1980:
|
1 2 3 |
// Изменить год даты рождения birthday.setFullYear(1997); birthday; |
|
1 2 3 |
Вывод Thu Jul 31 1997 00:00:00 GMT+0000 (UTC) |
Теперь наш вывод показывает новый год. Аналогичным образом вы можете изменять и другие компоненты даты.
Методы даты UTC в JavaScript
Если вы извлекаете компоненты даты с помощью метода get, вы получите их на основе локальных системных настроек часового пояса пользователя. Кроме того, вы можете настроить расчет времени по стандарту UTC. UTC означает всемирное координированное время. Вы можете сделать это с помощью метода getUTC. В этой таблице показаны все методы UTC для объекта Date в JavaScript:
Как видите, все методы похожи на команды get . Однако результаты будут отличаться. Вы можете проверить разницу с помощью этого кода:
|
1 2 3 4 5 6 |
// Присвоить текущее время переменной const now = new Date(); // Вывести локальный часовой пояс и часовой пояс UTC console.log(now.getHours()); console.log(now.getUTCHours()); |
Этот код покажет вам текущий час, а также час в часовом поясе UTC. Числа будут одинаковыми, если вы уже находитесь в часовом поясе UTC. Причина, по которой вы будете использовать UTC, заключается в том, что это обеспечивает согласованность между международными зонами и регионами.
Заключение
В этом руководстве мы рассмотрели различные методы для Date объекта. Это включало в себя то, как получать компоненты даты с помощью get и как изменять их с помощью set. Мы также изучили часовые пояса UTC и то, как использовать их в JavaScript.
В конечном счете, JavaScript имеет массу встроенных функций для работы с датой и временем. Это делает программирование сложных веб-сайтов довольно простым. Вы можете узнать больше о функциях даты и времени в JavaScript на Mozilla Developer Network. Тем не менее, это руководство должно помочь вам освоить основы.
Вот еще ресурсы из нашего блога, которые облегчат программирование на JavaScript:
- JavaScript: руководство по индексации, разделению и манипулированию строками
- Работа с JavaScript: как работают прототипы и наследование
- Руководство по добавлению JavaScript в HTML
- Обзор формата обмена данными JSON
Приятного программирования!
Комментарии
Комментариев пока нет. Будьте первым.