Рубрики
Без рубрики

Окончательное руководство по датам JavaScript

Работа с датами в JavaScript может быть сложной. Изучите все причуды и как их использовать.

Работа с датами может быть сложной . Независимо от технологии, разработчики действительно чувствуют боль.

JavaScript предлагает нам функциональность обработки данных с помощью мощного встроенного объекта: Дата .

Совет: возможно, вам захочется использовать библиотеку при работе с датами. Moment.js и дата – и являются двумя из самых популярных.

Объект данных

Экземпляр объекта даты представляет собой один момент времени.

Несмотря на то, что его назвали Дата , он также обрабатывает время .

Инициализировать объект данных

Мы инициализируем объект даты с помощью

new Date()

Это создает объект даты, указывающий на текущий момент времени.

Внутренне даты выражаются в миллисекундах с 1 января 1970 года (UTC). Эта дата важна, потому что с точки зрения компьютеров все началось именно там.

Возможно, вы знакомы с меткой времени UNIX: она представляет собой количество секунд , прошедших с той знаменитой даты.

Важно: временная метка UNIX отображается в секундах. JavaScript датирует причину в миллисекундах.

Если у нас есть временная метка UNIX, мы можем создать экземпляр объекта даты JavaScript с помощью

const timestamp = 1530826365
new Date(timestamp * 1000)

если только метка времени не была сгенерирована JS, в этом случае она уже находится в правильном масштабе.

Убедитесь, что вы передали номер (строка выдаст вам результат “неверная дата” – используйте parseInt() сомневаюсь)

Если мы пройдем 0, мы получим объект даты, который представляет время на 1 января 1970 года (UTC):

new Date(0)

Если мы передаем строку, а не число, то объект Date использует метод parse , чтобы определить, какую дату вы передаете. Примеры:

new Date('2018-07-22')
new Date('2018-07') //July 1st 2018, 00:00:00
new Date('2018') //Jan 1st 2018, 00:00:00
new Date('07/22/2018')
new Date('2018/07/22')
new Date('2018/7/22')
new Date('July 22, 2018')
new Date('July 22, 2018 07:22:13')
new Date('2018-07-22 07:22:13')
new Date('2018-07-22T07:22:13')
new Date('25 March 2018')
new Date('25 Mar 2018')
new Date('25 March, 2018')
new Date('March 25, 2018')
new Date('March 25 2018')
new Date('March 2018') //Mar 1st 2018, 00:00:00
new Date('2018 March') //Mar 1st 2018, 00:00:00
new Date('2018 MARCH') //Mar 1st 2018, 00:00:00
new Date('2018 march') //Mar 1st 2018, 00:00:00

Здесь очень много гибкости. Вы можете добавить или опустить начальный ноль в месяцах или днях.

Будьте осторожны с позицией месяц/день, иначе вы можете в конечном итоге неправильно истолковать месяц как день.

Вы также можете использовать Date.parse :

Date.parse('2018-07-22')
Date.parse('2018-07') //July 1st 2018, 00:00:00
Date.parse('2018') //Jan 1st 2018, 00:00:00
Date.parse('07/22/2018')
Date.parse('2018/07/22')
Date.parse('2018/7/22')
Date.parse('July 22, 2018')
Date.parse('July 22, 2018 07:22:13')
Date.parse('2018-07-22 07:22:13')
Date.parse('2018-07-22T07:22:13')

Date.parse вернет метку времени (в миллисекундах), а не объект даты.

Вы также можете передать набор упорядоченных значений, представляющих каждую часть даты: год, месяц (начиная с 0), день, час, минуты, секунды и миллисекунды:

new Date(2018, 6, 22, 7, 22, 13, 0)
new Date(2018, 6, 22)

Минимум должен составлять 3 параметра, но большинство движков JavaScript также интерпретируют меньше, чем эти:

new Date(2018, 6) //Sun Jul 01 2018 00:00:00 GMT+0200 (Central European Summer Time)
new Date(2018) //Thu Jan 01 1970 01:00:02 GMT+0100 (Central European Standard Time)

В любом из этих случаев результирующие данные относятся к часовому поясу вашего компьютера. Это означает, что два разных компьютера могут выводить разное значение для одного и того же объекта даты .

JavaScript, без какой-либо информации о часовом поясе, будет рассматривать дату как UTC и автоматически выполнит преобразование в текущий часовой пояс компьютера.

Итак, подводя итог, вы можете создать новый объект даты 4 способами

  • передача без параметров создает объект даты, представляющий “сейчас”
  • передача числа , которое представляет миллисекунды с 1 января 1970 года 00:00 по Гринвичу
  • передача строки , представляющей дату
  • передача набора параметров , которые представляют различные части даты

Часовые пояса

При инициализации даты вы можете передать часовой пояс, чтобы дата не считалась UTC, а затем была преобразована в ваш местный часовой пояс.

Вы можете указать часовой пояс, добавив его в формате +ЧАСОВ или добавив имя часового пояса, заключенное в круглые скобки:

new Date('July 22, 2018 07:22:13 +0700')
new Date('July 22, 2018 07:22:13 (CET)')

Если вы укажете неправильное название часового пояса в скобках, JavaScript по умолчанию будет использовать UTC без жалоб.

Если вы укажете неправильный числовой формат, JavaScript будет жаловаться на ошибку “Недопустимая дата”.

Преобразование и форматирование данных

Учитывая объект даты, существует множество методов, которые будут генерировать строку с этой даты:

const date = new Date('July 22, 2018 07:22:13')

date.toString() // "Sun Jul 22 2018 07:22:13 GMT+0200 (Central European Summer Time)"
date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)"
date.toUTCString() //"Sun, 22 Jul 2018 05:22:13 GMT"
date.toDateString() //"Sun Jul 22 2018"
date.toISOString() //"2018-07-22T05:22:13.000Z" (ISO 8601 format)
date.toLocaleString() //"22/07/2018, 07:22:13"
date.toLocaleTimeString()	//"07:22:13"
date.getTime() //1532236933000
date.getTime() //1532236933000

Методы получения объектов данных

Объект даты предлагает несколько методов для проверки его значения. Все это зависит от текущего часового пояса компьютера:

const date = new Date('July 22, 2018 07:22:13')

date.getDate() //22
date.getDay() //0 (0 means sunday, 1 means monday..)
date.getFullYear() //2018
date.getMonth() //6 (starts from 0)
date.getHours() //7
date.getMinutes() //22
date.getSeconds() //13
date.getMilliseconds() //0 (not specified)
date.getTime() //1532236933000
date.getTimezoneOffset() //-120 (will vary depending on where you are and when you check - this is CET during the summer). Returns the timezone difference expressed in minutes

Существуют эквивалентные версии этих методов в формате UTC, которые возвращают значение UTC, а не значения, адаптированные к вашему текущему часовому поясу:

date.getUTCDate() //22
date.getUTCDay() //0 (0 means sunday, 1 means monday..)
date.getUTCFullYear() //2018
date.getUTCMonth() //6 (starts from 0)
date.getUTCHours() //5 (not 7 like above)
date.getUTCMinutes() //22
date.getUTCSeconds() //13
date.getUTCMilliseconds() //0 (not specified)

Редактирование даты

Объект даты предлагает несколько методов для редактирования значения даты:

const date = new Date('July 22, 2018 07:22:13')

date.setDate(newValue)
date.setFullYear(newValue) //note: avoid setYear(), it's deprecated
date.setMonth(newValue)
date.setHours(newValue)
date.setMinutes(newValue)
date.setSeconds(newValue)
date.setMilliseconds(newValue)
date.setTime(newValue)

Дата установки и |/установить месяц начать нумерацию с 0, так что, например, март – это месяц 2.

Пример:

const date = new Date('July 22, 2018 07:22:13')

date.setDate(23)
date //July 23, 2018 07:22:13

Забавный факт: эти методы “перекрываются”, поэтому, если вы, например, установите date.setHours(48) , это также увеличит продолжительность дня.

Полезно знать: вы можете добавить более одного параметра в установить часы() , чтобы также установить минуты, секунды и миллисекунды: setHours(0, 0, 0, 0) – то же самое относится и к setMinutes и Заданные секунды .

Как забыть , также установите методы имеют эквивалент UTC:

const date = new Date('July 22, 2018 07:22:13')

date.setUTCDate(newValue)
date.setUTCDay(newValue)
date.setUTCFullYear(newValue)
date.setUTCMonth(newValue)
date.setUTCHours(newValue)
date.setUTCMinutes(newValue)
date.setUTCSeconds(newValue)
date.setUTCMilliseconds(newValue)

Получить текущую метку времени

Если вы хотите получить текущую метку времени в миллисекундах, вы можете использовать стенографию

Date.now()

вместо

new Date().getTime()

JavaScript изо всех сил старается работать нормально

Обратить внимание. Если вы переполните месяц количеством дней, ошибки не будет, и дата будет перенесена на следующий месяц:

new Date(2018, 6, 40) //Thu Aug 09 2018 00:00:00 GMT+0200 (Central European Summer Time)

То же самое относится к месяцам, часам, минутам, секундам и миллисекундам.

Форматировать даты в соответствии с местными

API интернационализации, хорошо поддерживаемый в современных браузерах (заметное исключение: UC Browser), позволяет переводить даты.

Он отображается объектом Intl , который также помогает локализовать числа, строки и валюты.

Нас интересует Международный. Формат даты и времени() .

Вот как это использовать.

Форматирование даты в соответствии с языковым стандартом компьютера по умолчанию:

// "12/22/2017"
const date = new Date('July 22, 2018 07:22:13')
new Intl.DateTimeFormat().format(date) //"22/07/2018" in my locale

Форматирование даты в соответствии с другим языком:

new Intl.DateTimeFormat('en-US').format(date) //"7/22/2018"

Международный. Формат даты и времени метод принимает необязательный параметр, который позволяет настраивать вывод. Чтобы также отображать часы, минуты и секунды:

const options = {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
}

new Intl.DateTimeFormat('en-US', options).format(date) //"7/22/2018, 7:22:13 AM"
new Intl.DateTimeFormat('it-IT', options2).format(date) //"22/7/2018, 07:22:13"

Вот ссылка на все свойства, которые вы можете использовать .

Сравните две даты

Вы можете рассчитать разницу между двумя датами, используя Date.getTime() :

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 22, 2018 07:22:13')
const diff = date2.getTime() - date1.getTime() //difference in milliseconds

Таким же образом вы можете проверить, равны ли две даты:

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 10, 2018 07:22:13')
if (date2.getTime() === date1.getTime()) {
  //dates are equal
}

Имейте в виду, что функция getTime() возвращает количество миллисекунд, поэтому при сравнении необходимо учитывать время. Июль 10, 2018 07:22:13 является не равно новому 10 июля 2018 года . В этом случае вы можете использовать setHours(0, 0, 0, 0) чтобы сбросить время.

Оригинал: “https://flaviocopes.com/javascript-dates/”