Вступление
Дата и время являются неотъемлемой частью нашей повседневной жизни и поэтому занимают видное место в компьютерном программировании. В JavaScript вам может понадобиться создать веб-сайт с календарем, расписанием поездов или интерфейсом для назначения встреч. Эти приложения должны показывать релевантное время на основе текущего часового пояса пользователя или выполнять расчеты по времени прибытия и отъезда или времени начала и окончания. Кроме того, вам может понадобиться использовать JavaScript для создания отчета в определенное время каждый день или фильтровать через открытые в настоящее время рестораны и заведения.
Для достижения всех этих и многих других целей JavaScript поставляется со встроенным объектом + Date и связанными методами. В этом руководстве рассказывается, как форматировать и использовать дату и время в JavaScript.
Объект Date
+ Date + object - это встроенный в JavaScript объект, который хранит дату и время. Он предоставляет ряд встроенных методов для форматирования и управления этими данными.
По умолчанию новый экземпляр + Date + без предоставленных аргументов создает объект, соответствующий текущей дате и времени. Это будет создано в соответствии с текущими настройками системы компьютера.
Чтобы продемонстрировать JavaScript + Date +, давайте создадим переменную и назначим ей текущую дату. Эта статья пишется в среду, 18 октября, в Лондоне (GMT), поэтому текущая дата, время и часовой пояс представлены ниже.
now.js
// 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 time, которая представляет собой значение, состоящее из количества миллисекунд, прошедших с полуночи 1 января 1970 г. Мы можем получить временную метку с помощью метода + getTime () +.
// Get the current timestamp
now.getTime();Output1508330494000Большое число, которое появляется в наших выходных данных для текущей метки времени, представляет собой то же значение, что и выше, 18 октября 2017 года.
-
Время эпохи *, также называемое нулевым временем, представлено строкой даты
+01 января 1970 г. 00:00:00 по всемирному времени (UTC) +и меткой времени + 0 . Мы можем проверить это в браузере, создав новую переменную и присвоив ей новый экземпляр ` Date +` на основе отметки времени + 0 +.
epoch.js
// 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 на основе текущего времени, и как создать его на основе метки времени. Всего существует четыре формата, с помощью которых вы можете создать новую + Date в JavaScript. В дополнение к текущему времени по умолчанию и метке времени, вы также можете использовать строку даты или указать конкретные даты и время.
| Date Creation | Output |
|---|---|
|
Current date and time |
|
Creates date based on milliseconds since Epoch time |
|
Creates date based on date string |
|
Creates date based on specified date and time |
Чтобы продемонстрировать различные способы обращения к определенной дате, мы создадим новые объекты + Date +, которые будут представлять 4 июля 1776 года в 12:30 по Гринвичу тремя различными способами.
usa.js
// Timestamp method
new Date(-6106015800000);
// Date string method
new Date("January 31 1980 12:30");
// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);Все три примера выше создают дату, содержащую ту же информацию.
Вы заметите, что у метки времени есть отрицательное число; любая дата до начала эпохи будет представлена как отрицательное число.
В методе даты и времени наши секунды и миллисекунды устанавливаются в «+ 0 ». Если какое-либо число отсутствует в созданном ` Date`, по умолчанию оно будет равно` + 0 + . Тем не менее, порядок не может быть изменен, поэтому имейте это в виду, если вы решите оставить номер. Вы также можете заметить, что июльский месяц представлен символом «+ 6 +», а не обычным «+ 7 +». Это происходит потому, что числа даты и времени начинаются с `+ 0 +, как это делает большинство подсчетов в программировании. Смотрите следующий раздел для более подробной диаграммы.
Получение даты с помощью + get +
Когда у нас есть дата, мы можем получить доступ ко всем компонентам даты с помощью различных встроенных методов. Методы будут возвращать каждую часть даты относительно местного часового пояса. Каждый из этих методов начинается с + get + и возвращает относительное число. Ниже приведена подробная таблица методов + get объекта` + Date`.
| Date/Time | Method | Range | Example |
|---|---|---|---|
Year |
|
YYYY |
1970 |
Month |
|
0-11 |
0 = January |
Day (of the month) |
|
1-31 |
1 = 1st of the month |
Day (of the week) |
|
0-6 |
0 = Sunday |
Hour |
|
0-23 |
0 = midnight |
Minute |
|
0-59 |
|
Second |
|
0-59 |
|
Millisecond |
|
0-999 |
|
Timestamp |
|
Milliseconds since Epoch time |
Давайте создадим новую дату, основанную на 31 июля 1980 года, и присвоим ее переменной.
harryPotter.js
// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);Теперь мы можем использовать все наши методы для получения каждого компонента даты, от года до миллисекунды.
getDateComponents.js
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 октября или нет.
oct3.js
// 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`, позволяют нам получить доступ к компонентам даты, которые возвращают число, связанное с тем, что мы получаем из экземпляра объекта.
Изменение даты с помощью + set +
Для всех методов + get, о которых мы узнали выше, существует соответствующий метод` + set`. Где + get + используется для извлечения определенного компонента из даты, + set + используется для изменения компонентов даты. Ниже приведен подробный график методов + set of объекта` + Date`.
| Date/Time | Method | Range | Example |
|---|---|---|---|
Year |
|
YYYY |
1970 |
Month |
|
0-11 |
0 = January |
Day (of the month) |
|
1-31 |
1 = 1st of the month |
Day (of the week) |
|
0-6 |
0 = Sunday |
Hour |
|
0-23 |
0 = midnight |
Minute |
|
0-59 |
|
Second |
|
0-59 |
|
Millisecond |
|
0-999 |
|
Timestamp |
|
Milliseconds since Epoch time |
Мы можем использовать эти методы + set + для изменения одного, нескольких или всех компонентов даты. Например, мы можем изменить год нашей переменной + birthday + сверху на + 1997 + вместо + 1980 +.
harryPotter.js
// 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 +, за исключением того, что они рассчитывают время на основе https://en.wikipedia.org/ Стандарт wiki / Coordinated_Universal_Time [UTC (Всемирное координированное время)]. Ниже приведена таблица методов UTC для объекта JavaScript + Date.
| Date/Time | Method | Range | Example |
|---|---|---|---|
Year |
|
YYYY |
1970 |
Month |
|
0-11 |
0 = January |
Day (of the month) |
|
1-31 |
1 = 1st of the month |
Day (of the week) |
|
0-6 |
0 = Sunday |
Hour |
|
0-23 |
0 = midnight |
Minute |
|
0-59 |
|
Second |
|
0-59 |
|
Millisecond |
|
0-999 |
Чтобы проверить разницу между локальным и UTC + get + методами, мы можем запустить следующий код.
UTC.js
// 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 вы можете прочитать ссылку Date в Mozilla Developer. Сеть.
Знание того, как работать с датами, необходимо для многих распространенных задач в JavaScript, так как это может позволить вам сделать множество вещей от настройки повторяющегося отчета до отображения дат и расписаний в правильном часовом поясе.