Понимание даты и времени в JavaScript
Введение
Дата и время являются неотъемлемой частью нашей повседневной жизни и поэтому занимают видное место в компьютерном программировании. В JavaScript вам может понадобиться создать веб-сайт с календарем, расписанием поездов или интерфейсом для назначения встреч. Эти приложения должны отображать релевантное время на основе текущего часового пояса пользователя или выполнять расчеты времени прибытия и отправления или времени начала и окончания. Кроме того, вам может понадобиться использовать JavaScript для создания отчета в определенное время каждый день или фильтровать открытые в настоящее время рестораны и заведения.
Для достижения всех этих и других целей в JavaScript имеется встроенный объект Date
и связанные с ним методы. В этом руководстве будет рассказано, как форматировать и использовать дату и время в JavaScript.
Объект даты
Объект Date
— это встроенный объект в JavaScript, который хранит дату и время. Он предоставляет ряд встроенных методов для форматирования и управления этими данными.
По умолчанию новый экземпляр Date
без аргументов создает объект, соответствующий текущей дате и времени. Он будет создан в соответствии с системными настройками текущего компьютера.
Чтобы продемонстрировать Date
в JavaScript, давайте создадим переменную и назначим ей текущую дату. Эта статья пишется в среду, 18 октября, в Лондоне (GMT), поэтому текущая дата, время и часовой пояс представлены ниже.
// Set variable to current date and time
const now = new Date();
// View the output
now;
OutputWed Oct 18 2017 12:41:34 GMT+0000 (UTC)
Глядя на вывод, у нас есть строка даты, содержащая следующее:
Day of the Week | Month | Day | Year | Hour | Minute | Second | Timezone |
---|---|---|---|---|---|---|---|
Wed | Oct | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
Дата и время разбиты и напечатаны таким образом, что мы, люди, можем их понять.
JavaScript, однако, понимает дату на основе временной метки, полученной из времени Unix, которое представляет собой число миллисекунд, прошедших с полуночи 1 января 1970 года. Мы можем получить временную метку с помощью getTime()
метод.
// Get the current timestamp
now.getTime();
Output1508330494000
Большое число, которое появляется в наших выходных данных для текущей метки времени, представляет то же значение, что и выше, 18 октября 2017 года.
Время эпохи, также называемое нулевым временем, представлено строкой даты 01 января 1970 г. 00:00:00 по всемирному времени (UTC)
и отметкой времени 0
. Мы можем проверить это в браузере, создав новую переменную и назначив ей новый экземпляр Date
на основе метки времени 0
.
// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);
epochTime;
Output01 January, 1970 00:00:00 Universal Time (UTC)
Время эпохи было выбрано в качестве стандарта для компьютеров для измерения времени в ранние дни программирования, и это метод, который использует JavaScript. Важно понимать концепцию как временной метки, так и строки даты, поскольку и то, и другое может использоваться в зависимости от настроек и назначения приложения.
До сих пор мы узнали, как создать новый экземпляр Date
на основе текущего времени и как создать его на основе метки времени. Всего существует четыре формата, с помощью которых вы можете создать новую Дату
в JavaScript. В дополнение к текущему времени по умолчанию и метке времени вы также можете использовать строку даты или указать конкретные даты и время.
Date Creation | Output |
---|---|
new Date() |
Current date and time |
new Date(timestamp) |
Creates date based on milliseconds since Epoch time |
new Date(date string) |
Creates date based on date string |
new Date(year, month, day, hours, minutes, seconds, milliseconds) |
Creates date based on specified date and time |
Чтобы продемонстрировать различные способы обращения к определенной дате, мы создадим новые объекты Date
, которые будут представлять 4 июля 1776 года в 12:30 по Гринвичу тремя разными способами.
// Timestamp method
new Date(-6106015800000);
// Date string method
new Date("July 4 1776 12:30");
// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);
Все три приведенных выше примера создают дату, содержащую одинаковую информацию.
Вы заметите, что метод timestamp имеет отрицательное число; любая дата до времени Эпохи будет представлена как отрицательное число.
В методе даты и времени наши секунды и миллисекунды установлены на 0
. Если в Дата
создания отсутствует какой-либо номер, по умолчанию он будет равен 0
. Однако порядок нельзя изменить, так что имейте это в виду, если решите не указывать номер. Вы также можете заметить, что месяц июль представлен 6
, а не обычным 7
. Это связано с тем, что числа даты и времени начинаются с 0
, как и большинство подсчетов в программировании. См. следующий раздел для более подробной диаграммы.
Получение даты с помощью get
Когда у нас есть дата, мы можем получить доступ ко всем компонентам даты с помощью различных встроенных методов. Методы будут возвращать каждую часть даты относительно местного часового пояса. Каждый из этих методов начинается с get
и возвращает относительное число. Ниже приведена подробная таблица методов get
объекта Date
.
Date/Time | Method | Range | Example |
---|---|---|---|
Year | getFullYear() |
YYYY | 1970 |
Month | getMonth() |
0-11 | 0 = January |
Day (of the month) | getDate() |
1-31 | 1 = 1st of the month |
Day (of the week) | getDay() |
0-6 | 0 = Sunday |
Hour | getHours() |
0-23 | 0 = midnight |
Minute | getMinutes() |
0-59 | |
Second | getSeconds() |
0-59 | |
Millisecond | getMilliseconds() |
0-999 | |
Timestamp | getTime() |
Milliseconds since Epoch time |
Давайте создадим новую дату на основе 31 июля 1980 года и назначим ее переменной.
// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);
Теперь мы можем использовать все наши методы для получения каждого компонента даты, от года до миллисекунды.
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 (for GMT)
Иногда может потребоваться извлечь только часть даты, и встроенные методы get
— это инструмент, который вы будете использовать для достижения этой цели.
Например, мы можем сравнить текущую дату с днем и месяцем 3 октября, чтобы увидеть, 3 октября это или нет.
// Get today's date
const today = new Date();
// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
console.log("It's October 3rd.");
} else {
console.log("It's not October 3rd.");
}
OutputIt's not October 3rd.
Поскольку на момент написания статьи еще не 3 октября, консоль отражает это.
Встроенные методы Date
, начинающиеся с get
, позволяют нам получить доступ к компонентам даты, которые возвращают число, связанное с тем, что мы извлекаем из созданного объекта.
Изменение даты с помощью набора
Для всех методов get
, о которых мы узнали выше, существует соответствующий метод set
. Где get
используется для извлечения определенного компонента из даты, set
используется для изменения компонентов даты. Ниже приведена подробная таблица методов set
объекта Date
.
Date/Time | Method | Range | Example |
---|---|---|---|
Year | setFullYear() |
YYYY | 1970 |
Month | setMonth() |
0-11 | 0 = January |
Day (of the month) | setDate() |
1-31 | 1 = 1st of the month |
Day (of the week) | setDay() |
0-6 | 0 = Sunday |
Hour | setHours() |
0-23 | 0 = midnight |
Minute | setMinutes() |
0-59 | |
Second | setSeconds() |
0-59 | |
Millisecond | setMilliseconds() |
0-999 | |
Timestamp | setTime() |
Milliseconds since Epoch time |
Мы можем использовать эти методы set
для изменения одного, нескольких или всех компонентов даты. Например, мы можем изменить год нашей переменной birthday
сверху на 1997
вместо 1980
.
// Change year of birthday date
birthday.setFullYear(1997);
birthday;
OutputThu Jul 31 1997 00:00:00 GMT+0000 (UTC)
В приведенном выше примере мы видим, что когда мы вызываем переменную birthday
, мы получаем новый год как часть вывода.
Встроенные методы, начинающиеся с set
, позволяют нам изменять различные части объекта Date
.
Методы даты с UTC
Рассмотренные выше методы get
извлекают компоненты даты на основе настроек местного часового пояса пользователя. Для большего контроля над датами и временем вы можете использовать методы getUTC
, которые точно такие же, как и методы get
, за исключением того, что они вычисляют время на основе UTC ( Всемирное координированное время) стандарт. Ниже приведена таблица методов UTC для объекта JavaScript Date
.
Date/Time | Method | Range | Example |
---|---|---|---|
Year | getUTCFullYear() |
YYYY | 1970 |
Month | getUTCMonth() |
0-11 | 0 = January |
Day (of the month) | getUTCDate() |
1-31 | 1 = 1st of the month |
Day (of the week) | getUTCDay() |
0-6 | 0 = Sunday |
Hour | getUTCHours() |
0-23 | 0 = midnight |
Minute | getUTCMinutes() |
0-59 | |
Second | getUTCSeconds() |
0-59 | |
Millisecond | getUTCMilliseconds() |
0-999 |
Чтобы проверить разницу между локальными и UTC-методами get
, мы можем запустить следующий код.
// Assign current time to a variable
const now = new Date();
// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());
Запуск этого кода распечатает текущий час и час часового пояса UTC. Если вы в настоящее время находитесь в часовом поясе UTC, числа, которые выводятся при запуске программы выше, будут такими же.
UTC удобен тем, что он предоставляет ссылку на международный стандарт времени и, следовательно, может поддерживать согласованность вашего кода в разных часовых поясах, если это применимо к тому, что вы разрабатываете.
Заключение
В этом руководстве мы узнали, как создать экземпляр объекта Date
и использовать его встроенные методы для доступа и изменения компонентов определенной даты. Для более подробного ознакомления с датами и временем в JavaScript вы можете прочитать справочник по датам в Mozilla Developer Network.
Знание того, как работать с датами, важно для многих распространенных задач в JavaScript, поскольку это может позволить вам делать множество вещей, от настройки повторяющегося отчета до отображения дат и расписаний в правильном часовом поясе.