ИТ Блог. Создание сайтов с применением JavaScript
Дата и время является неотъемлемой частью нашей повседневной жизни, и поэтому имеет важное место в компьютерном программировании. В JavaScript, вам, возможно, придется создать сайт с календарем, расписанием занятий, или интерфейс для настройки целей. Эти приложения должны показывать соответствующее время на основе текущего часового пояса пользователя, или выполнять вычисления вокруг времени начала и окончания занятий. Кроме того, вам может понадобиться для создания отчета в определенное время каждый день, или время открытия библиотек и учреждений.
Для достижения всех этих целей и более, JavaScript поставляется со встроенным объектом Date и связанных с ним методов. Эта статья покажет вам, как форматировать и использовать дату и время в JavaScript.
Объект Date является встроенным объектом JavaScript, который хранит дату и время. Он предоставляет ряд встроенных методов для форматирования и управления этими данными.
По умолчанию новый экземпляр Date без аргументов, предоставляется для создания объекта, соответствующий текущей дате и времени. он будет создан в соответствии с настройками системы текущего компьютера.
Для демонстрации даты в JavaScript, давайте создадим переменную и присвоим текущую дату. Эта статья была написана в четверг, 26 октября в Лондоне (GMT), так что это текущая дата, время и часовой пояс, который представлен ниже.
now.js
// Установить переменную текущую дату и время const now = new Date(); // Просмотр выходных данных now;
Вывод
Thu Oct 26 2017 22:40:30 GMT+0000 (UTC)
Глядя на вывод, мы имеем строку даты, содержащую следующее:
| День недели | Месяц | День | Год | Час | минут | второй | Часовой пояс |
|---|---|---|---|---|---|---|---|
| Thu | Oct | 26 | 2017 | 22 | 40 | 30 | GMT + 0000 (UTC) |
Дата и время разбиваются и печатаются таким образом, что мы могли понять, как люди.
JavaScript, однако, понимает дату, основываясь на временной метки, полученной от времени Unix, который представляет собой значение, состоящее из числа миллисекунд, прошедших с полуночи 1 января 1970 года, мы можем получить временную метку при помощи метода getTime().
// Получить текущую метку времени
now.getTime();
Вывод
1508354594000
Большое число, которое выводиться для текущей метки времени представляет собой такое же значение, как указано выше, 26 октября 2017 года.
Эпоха времени, также упоминается как нулевой момент времени, представлено в строке даты 01 January, 1970 00:00:00 Universal Time (UTC), а также отметка время 0. Мы можем проверить это в браузере, создав новую переменную и назначить ей новый экземпляр Date, основанный на временной метке 0.
epoch.js
// Присвоить метку 0 на новую переменную const epochTime = new Date(0); epochTime;
Вывод
01 January, 1970 00:00:00 Universal Time (UTC)
Время было выбрано в качестве стандарта для компьютеров, чтобы измерить время, в первые дни программирования, и это метод, который использует JavaScript. Важно понимать понятие как метки времени и строки даты, так как они оба могут быть использованы в зависимости от настроек и цели приложения.
Мы узнали, как создать новый экземпляр Date на основе текущего времени, и как создать на основе временной метки. В целом, есть четыре формата, с помощью которого вы можете создать новый Date в JavaScript. В дополнении к текущему времени по умолчанию и временной метке, вы можете также использовать строку даты, или указать конкретные дату и время.
| Дата создания | Вывод |
|---|---|
new Date() | Текущая дата и время |
new Date(timestamp) | Создает дату на основе миллисекунд с момента времени Epoch |
new Date(date string) | Создает дату на основе строки даты |
new Date(year, month, day, hours, minutes, seconds, milliseconds) | Создает дату на основе заданной даты и времени |
Для того, чтобы продемонстрировать различные способы относящиеся к конкретной дате, мы создадим новые объекты Date, которые будут представлять 4 июля 1776 в 12:30 по Гринвичу тремя различными способами.
usa.js
// Метод Timestamp
new Date(-6106015800000);
// Строковый метод даты
new Date("January 31 1980 12:30");
// Метод даты и времени
new Date(1776, 6, 4, 12, 30, 0, 0);
Три примера, прежде всего создают дату, содержащую ту же информацию.
Вы заметите, что метод временной метки имеет отрицательное число; любая дата до Эпохи времени будет представлено в виде отрицательного числа.
В методе дате и времени, наши секунды и миллисекунды устанавливаются в 0. Если какой – либо номер отсутствует в создании Date, по умолчанию будет использоваться 0. Однако, порядок не может быть изменен, так что имейте это в виду, если вы решили оставить ряд. Вы можете также заметить, что месяц июль представлен 6, а не обычно 7. Это происходит потому, что дата и время начинаются с цифры 0, так как большинство подсчет делают в программировании. Смотрите следующий раздел для более детального графика.
После того, как мы прочитали дату, мы можем получить доступ ко всем компонентам даты различными встроенными методами. Эти методы будут возвращать каждую часть даты по отношению к местному часовому поясу. Каждый из этих методов начинается с get, и возвращает относительное число. Ниже приводится подробная таблица методов get объекта Date.
| Дата/время | Метод | Диапазон | Пример |
|---|---|---|---|
| Год | getFullYear() | YYYY | 1970 |
| Месяц | getMonth() | 0-11 | 0 = январь |
| День (месяц) | getDate() | 1-31 | 1 = первое число месяца |
| День недели) | getDay() | 0-6 | 0 = воскресенье |
| Час | getHours() | 0-23 | 0 = полночь |
| Минута | getMinutes() | 0-59 | |
| Секунда | getSeconds() | 0-59 | |
| Миллисекунда | getMilliseconds() | 0-999 | |
| Временная метка | getTime() | Миллисекунды, после Epoch время |
Давайте создадим новую дату, основанную на 31 июля 1980 года и присвоим ее переменной.
andreyex.js
// Инициализация нового экземпляра дня рождения 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
// Получить сегодняшнюю дату
const today = new Date();
// Сравнить сегодня с 3-го октября
if (today.getDate() === 3 && today.getMonth() === 9) {
console.log("3 октября.");
} else {
console.log("Это не 3 октября.");
}
Вывод
Это не 3 октября.
Так, на момент написания, это не 3 октября, консоль отражает это.
Встроенные методы Date, которые начинаются с get, позволяют получить доступ к компоненте Date, которые возвращают число, связанное с тем, что мы извлекаются из экземпляра объекта.
Для всех методов get, о которых мы узнали выше, существует соответствующий метод set. Где get используются для получения определенного компонента из даты, set используются для изменения компонентов даты. Ниже приводится подробная диаграмма из методов set объекта Date.
| Дата / время | метод | Ассортимент | пример |
|---|---|---|---|
| Год | setFullYear() | YYYY | 1970 |
| Месяц | setMonth() | 0-11 | 0 = январь |
| День (месяц) | setDate() | 1-31 | 1 = первое число месяца |
| День (недели) | setDay() | 0-6 | 0 = воскресенье |
| Час | setHours() | 0-23 | 0 = полночь |
| Минута | setMinutes() | 0-59 | |
| Секунда | setSeconds() | 0-59 | |
| Миллисекунды | setMilliseconds() | 0-999 | |
| Временная метка | setTime() | Миллисекунды, поскольку Epoch время |
Мы можем использовать методы set, чтобы изменить один и более или все компоненты даты. Например, мы можем изменить год нашего день рождения переменной 2017 вместо 1980.
andreyex.js
// Изменение года рождения birthday.setFullYear(2017); birthday;
Вывод
Thu Jul 31 2017 00:00:00 GMT+0000 (UTC)
Мы видим, в приведенном выше примере, что, когда мы указываем в переменной день рождение, мы получаем новый год как часть вывода.
Встроенные методы, начинающиеся с set модифицируют различные части объекта Date.
В рассмотренных выше методах get извлечение компонентов даты на основе параметров локальных часовых поясов пользователя. Для усиления контроля над датами и временем, вы можете использовать методы getUTC, которые точно так же, как и методы get, за исключением того, что они подсчитывают время, основанное на стандарте UTC (Universal Time). Ниже приведена таблица методов UTC для JavaScript объекта Date.
| Дата / время | метод | Ассортимент | пример |
|---|---|---|---|
| Год | getUTCFullYear() | YYYY | 1970 |
| Месяц | getUTCMonth() | 0-11 | 0 = январь |
| День (месяц) | getUTCDate() | 1-31 | 1 = первое число месяца |
| День (недели) | getUTCDay() | 0-6 | 0 = воскресенье |
| Час | getUTCHours() | 0-23 | 0 = полночь |
| Минута | getUTCMinutes() | 0-59 | |
| Секунда | getUTCSeconds() | 0-59 | |
| Миллисекунды | getUTCMilliseconds() | 0-999 |
Для того, чтобы проверить разницу между локальными и методами UTC get, мы можем запустить следующий код.
UTC.js
// Назначение текущего времени переменной const now = new Date(); // Печать локальных и UTC часовых поясов console.log(now.getHours()); console.log(now.getUTCHours());
Выполнение этого кода выведет текущий час и час часового пояса UTC. Если вы находитесь в настоящее время в часовом поясе UTC, которые выводятся из запуска программы выше, будет то же самое.
UTC полезен тем, что он обеспечивает международный стандарт времени и, следовательно, может держать ваш код согласованным между часовыми поясами, если это применимо к тому, что вы разрабатываете.
В этой статье мы узнали, как создать экземпляр объекта Date, и использовать его встроенные методы для доступа и изменения компонентов на определенную дату.
Зная, как работать с датами имеет важное значение для многих распространенных задач в JavaScript, так как это может позволить вам сделать много вещей, от создания повторяющегося отчета отображения даты до графика в правильной временной зоне.
Тэги: , операторы JavaScript Категории: JavaScript
