Поиск по сайту:

Понимание даты и времени в 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;
Output
Wed 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();
Output
1508330494000

Большое число, которое появляется в наших выходных данных для текущей метки времени, представляет то же значение, что и выше, 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;
Output
01 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.");
}
Output
It'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;
Output
Thu 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, поскольку это может позволить вам делать множество вещей, от настройки повторяющегося отчета до отображения дат и расписаний в правильном часовом поясе.