Знание дат JS, которые вам нужно знать, здесь

программист JavaScript

Переводчик: Front-end Xiaozhi

оригинал:CSS-tricks.com/все-…

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

в JSDateСтранный. Когда нам нужно иметь дело с датами и временем, это громоздко, и мы часто используем такие инструменты, какdate-fnsа такжеMomentтакая библиотека.

Но нам не всегда нужно использовать библиотеку. Свидания на самом деле могут быть довольно простыми, если вы знаете, что всегда обращаете внимание на что-то. Далее примерноDateВся информация об объекте

Часовой пояс

В нашем мире сотни часовых поясов. В JavaScript нас интересуют только два,местное времяа такжеВсемирное координированное время(УНИВЕРСАЛЬНОЕ ГЛОБАЛЬНОЕ ВРЕМЯ).

  • местное времяОтносится к часовому поясу, в котором находится ваш компьютер.

  • UTCна самом деле является синонимом среднего времени по Гринвичу (GMT).

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

Дата создания

можно использоватьnew Date()Для создания даты обычно существует четыре распространенных способа передачи параметров:

  1. Использование строковых параметров даты
  2. использовать ряд параметров
  3. Параметр метки времени
  4. без параметров

Использование строковых параметров даты

new Date('1988-03-21')

Этот способ удобен и интуитивно понятен.

Если сейчас написано21-03-1988, что мы можем легко выразить, это 21 марта 1988 года. Но если я напишу 21-03-1988 в JS, я получу неверную дату.

На это есть причина.

Строки даты интерпретируются по-разному в разных частях мира. Например11-06-2019да2019年6月11日еще2019年11月6日. Вы не можете быть уверены, о каком из них я говорю, если не знаете систему дат, которую я использую.

В JS, если вы хотите использовать параметр строки даты, вам нужно использовать формат, принятый во всем мире, одним из которых являетсяРасширенный формат ISO 8601.

// ISO 8601 Extended format
`YYYY-MM-DDTHH:mm:ss:sssZ`
  • YYYY: 4-значный год
  • MM: двузначный месяц (например, 01 для января и 12 для декабря)
  • DD: Двузначная дата (от 0 до 31)
  • -: разделитель даты
  • T: указывает время начала
  • HH: 24-значный час (от 0 до 23)
  • mm: минуты (от 0 до 59)
  • ss: секунды (от 0 до 59)
  • sss: миллисекунды (от 0 до 999)
  • :: разделитель времени
  • Z: если он существуетZ, дата будет установлена ​​в формате UTC, еслиZЕсли оно не существует, это местное время.

Где часы, минуты, секунды и миллисекунды не обязательны, если вы хотите создать дату 11 июня 2019 года, вы можете написать:

new Date('2019-06-11')

Обратите особое внимание здесь, Существует большая проблема с использованием параметра строки даты для создания даты.Вы можете найти проблему, напечатав дату создания.

Если вы живете в районе, который позже **Среднего времени по Гринвичу (GMT)**, вы получите дату, которая6月10日.

Если вы живете в районе, опережающем время по Гринвичу, вам нужно будет только подождать6月11日Дата.

Это происходит потому, что методы со строковыми параметрами даты имеют особое поведение:Если вы создаете дату (без указания времени), вы получаете дату в формате UTC.

В приведенном выше сценарии используйтеnew Date('2019-06-11')При создании даты фактически создается дата 11 июня 2019 г., 12:00 UTC. Вот почему люди, которые живут в районах после GMT, получают6月10日вместо6月11日.

Если вы хотите создать дату в «местном времени», используя метод параметра строки даты, вам необходимо включить время. Если вы включаете время, вам нужно написать как минимумHHа такжеmm

new Date('2019-06-11T00:00')

Сравнение местного времени с UTC с использованием строкового параметра даты может быть неуловимой ошибкой. Поэтому рекомендуется не использовать строки даты для создания методов даты.

Среднее время по ГринвичуGMT

В семнадцатом веке Гринвичская обсерватория производила астрономические наблюдения для плана расширения морского господства. Старая Королевская обсерватория была официально создана в 1675 году, а в 1884 году было решено использовать меридиан, проходящий через Гринвич, в качестве нулевой долготы, разделяющей восточное и западное полушария земли. На стене у входа в обсерваторию висят 24-часовые часы, показывающие текущее время.Для мира время, установленное здесь, является точкой отсчета мирового времени, и мир использует время по Гринвичу в качестве стандарта для установки времени. , Это происхождение всем известного "Среднего времени по Гринвичу (GMT)". Если оно отмечено на часах, это означает, что часы имеют двойную функцию времени, то есть они могут отображать время начала и другое время. страна в то же время.

универсальное глобальное время

Большинство расписаний двух мест выражено в GMT, но в некоторых расписаниях двух мест слово GMT отсутствует, а вместо него появляются три английские буквы UTC Что такое UTC? На самом деле UTC относится к Всемирному координированному времени — универсальному координированному времени (также известному как универсальное стандартное время, универсальное универсальное время), которое представляет собой новую шкалу времени после среднего солнечного времени (основанного на среднем времени по Гринвичу) и движения земная ось.И время, рассчитанное по международному атомному времени в «секундах», процесс расчета очень строгий и точный, поэтому с точки зрения «всеобщего стандартного времени» UTC является более точным, чем GMT. Значение ошибки должно быть в пределах 0,9 секунды.Если оно превышает 0,9 секунды, Центральное бюро по международным вопросам вращения Земли в Париже выдает дополнительную секунду, чтобы согласовать UTC с периодом вращения Земли. Таким образом, в основном суть UTC подчеркивает более точный стандарт мирового времени, чем GMT, но для текущих моделей нет никакой разницы в функции и точности GMT и UTC.

Создано с рядом параметров

Для создания даты/времени можно передать до семи параметров.

  1. Year: 4-значный год

  2. Month: месяц года (0-11)

  3. Day: День месяца (1-31), если он опущен, по умолчанию равен 1.

  4. Hour: час дня (0-23), если он опущен, по умолчанию равен 0.

  5. Minutes: минуты (0-59), если опущено, по умолчанию равно 0.

  6. Seconds: секунды (0-59), если опущено, по умолчанию равно 0.

  7. Milliseconds: миллисекунды (0-999), если опущено, по умолчанию равно 0.

    // 11th June 2019, 5:23:59am, Local Time new Date(2019, 5, 11, 5, 23, 59)

Многие разработчики используют этот метод реже, потому что он выглядит сложным, но на самом деле он очень прост. Может запоминать слева направо: год, месяц, день, час, минуту, секунду и миллисекунду.

На что обратить внимание в DateMonthОт0началось, как1月=== 0，2月=== 1，3月=== 2,Так далее и тому подобное.

Давайте познакомимся с использованием нескольких параметров с некоторыми событиями.

// 21st March 1988, 12am, Local Time.
new Date(1988, 2, 21)

// 25th December 2019, 8am, Local Time.
new Date(2019, 11, 25, 8)

// 6th November 2023, 2:20am, Local Time
new Date(2023, 10, 6, 2, 20)

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

Обратите внимание, что даты, созданные с помощью параметров, указаны по местному времени.

Еще одним преимуществом использования параметров является то, что вы не путаетесь между местным временем и временем в формате UTC. Если вам нужно время в формате UTC, создайте дату в формате UTC следующим образом:

// 11th June 2019, 12am, UTC.
new Date(Date.UTC(2019, 5, 11))

Используйте метку времени для создания даты

В JS отметка времени — это количество миллисекунд, прошедших с 1 января 1970 года (1 января 1970 года также известно как время эпохи Unix). По моему опыту, временные метки редко используются для создания дат, как правило, для сравнения разных дат или для форматирования дат, что будет рассмотрено позже.

Дата создания без параметров

Если вы создаете дату без каких-либо параметров, дата будет установлена ​​на текущее время (по местному времени).

new Date()

Резюме

  1. Создайте дату с новой датой ()
  2. Возможны четыре варианта синтаксиса:
  • Использовать строковые значения даты
  • использовать ряд параметров
  • использовать отметку времени
  • без параметров
  1. Лучше не использовать методы строковых значений даты для создания дат
  2. Лучше создать дату, используя ряд параметров
  3. Помните, что месяцы начинаются с 0

дата формата

Большинство языков программирования предоставляют инструмент форматирования для создания любого формата даты, который вы хотите.Например, в PHP вы можете поместитьdate("d M Y")отформатировано как23 1月 2019такая дата.

Но форматировать даты в JS непросто.

РоднойDateОбъекты предоставляют семь методов форматирования, каждый из которых даст вам определенное значение, и они бесполезны.

const date = new Date(2019, 0, 23, 17, 23, 42)

  1. toString: в формате «Среда, 23 января 2019 г., 17:23:42 GMT+0800 (стандартное китайское время)».

  2. toDateString: в формате «Среда, 23 января 2019 г.»

  3. toLocaleString: в формате "2019/01/23 17:23:42"

  4. toLocaleDateString: в формате "2019/1/23"

  5. toGMTString: в формате «Среда, 23 января 2019 г., 09:23:42 по Гринвичу».

  6. toUTCString: в формате «Среда, 23 января 2019 г., 09:23:42 по Гринвичу».

  7. toISOString: в формате "2019-01-23T09:23:42.000Z"

Если вам нужен пользовательский формат, вам придется создать его самостоятельно.

Напишите собственный формат даты

предположим, вы хотите2019年1月23日 星期四формат даты такой. надо знатьDateМетоды даты объекта.

Чтобы получить этот формат, используйтеDateЧетыре метода в:

  1. getFullYear: получить 4-значный год по местному времени

  2. getMonth: получить месяц текущего времени,Обратите внимание, что он начинается с 0

  3. getDate: Получить день месяца по местному времени (1-31)

  4. getDay: получить день недели (0-6) по местному времени, начиная с воскресенья (0) и заканчивая субботой (6).

    const d = new Date(2019, 0, 23) const year = d.getFullYear() // 2019 const date = d.getDate() // 23

Поскольку неделя и месяц начинаются с 0, мы можем создать таблицу отображения:

const months = {
  0: '1月',
  1: '2月',
  2: '3月',
  3: '4月',
  4: '5月',
  5: '6月',
  6: '7月',
  7: '8月',
  8: '9月',
  9: '10月',
  10: '11月',
  11: '12月'
}

Поскольку месяцы начинаются с 0, мы можем использовать массив вместо объекта с тем же результатом:

const months = [
  '1月',
  '2月',
  '3月',
  '4月',
  '5月',
  '6月',
  '7月',
  '8月',
  '9月',
  '10月',
  '11月',
  '12月'
}

Чтобы получить январь, вам нужно

const monthIndex = d.getMonth()
const monthName = months[monthIndex]
console.log(monthName) // 1月

Чтобы упростить:

const monthName = months(d.getMonth())
console.log(monthName) // 1月

Для того, чтобы получить четверг, нужно сделать то же самое:

const days = [
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六'
]

способ получения:

const dayName = days[d.getDay()] // 星期四

Потом склеил. Это относительно утомительно.

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

  1. getHours: Получить местное время, чтобы получить час (0-23).

  2. getMinutes: Получить местное время, чтобы получить минуты (0-59).

  3. getSeconds: Получить местное время, чтобы получить секунды (0-59).

  4. getMilliseconds: Получить местное время, чтобы получить миллисекунды (0-999).

сравнение дат

Чтобы сравнить до и после даты, вы можете использовать его напрямую>, <, >=а также<=Сравнение временной шкалы.

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier < later) // true

Более проблематично сравнивать, совпадают ли две даты и нельзя ли их использовать напрямую.==или===

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false

МогуgetTimeПолучите их временные метки, сравните с временными метками.

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true

Если вы просто хотите проверить, совпадают ли две даты в один и тот же день, вы можете сравнить ихgetFullYear,getMonthа такжеgetDateстоимость.

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate()=== b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10am
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
console.log(isSameDay(a, b)) // true

получить дату с другой даты

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

  1. Установить другое значение даты/времени для конкретной даты
  2. Добавить/вычесть приращения от другой даты

Установить другое значение даты/времени для конкретной даты

Дату/время другой даты можно установить с помощью:

  1. setFullYear: установить год
  2. setMonth: установить месяц
  3. setDate: Установите день месяца
  4. setHours: При установке
  5. setMinutes: установить точки
  6. setSeconds: установить секунды
  7. setMilliseconds: установить миллисекунды

Например, если вы хотите установить дату 15 числа каждого месяца, вы можете использоватьsetDate(15)

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 15 January 2019

Примечание: вышеsetterметод изменяет исходный объект даты. На практике мы не должны мутировать объект, мы должны выполнять эти операции над новым объектом даты.

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 10 January 2019
console.log(newDate) // 10 June 2019

Добавить/вычесть приращения от другой даты

Есть два основных способа добавления/вычитания приращений. Первый метод более популярен в Stack Overflow, он лаконичен, но его сложнее понять. Второй способ более подробный, но более понятный.

Предположим, вы хотите получить дату через три дня после сегодняшнего дня. Для этого примера, скажем, сегодня2019年3月28日.

первый способ

const today = new Date(2019, 2, 28)

Во-первых, мы создаем новый объект Date, чтобы исходная дата не менялась.

const finalDate = new Date(today)

Далее нам нужно знать значение, которое нужно изменить. Поскольку мы собираемся изменить дату, мы можем использоватьgetDateполучить дату

const currentDate = today.getDate()

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

setDate(currentDate + 3)

Полный код:

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate() + 3)

console.log(finalDate) // 31 March 2019

Второй метод

использоватьgetFullYear,getMonth,getDateметод, измените соответствующее значение, затем мы используемnew DateСоздать окончательную дату.

const today = new Date(2019, 2, 28)

// Getting required values
const year = today.getFullYear()
const month = today.getMonh()
const day = today.getDate()

// Creating a new Date (with the delta)
const finalDate = new Date(year, month, day + 3)

console.log(finalDate) // 31 March 2019

Автоматическая коррекция даты

еслиDateУкажите значение вне допустимого диапазона, и JS автоматически пересчитает дату.

Как показано ниже, предположим, что мы установили дату 33 марта 2019 года, а в календаре нет 33, JS автоматически3月33日приспособиться к4月2日.

Это означает, что вам не нужно беспокоиться о подсчете минут, часов, дней, месяцев и т. д. при создании дельт, JavaScript позаботится об этом автоматически.

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории