JavaScript Dates 终极指南

在 JavaScript 中处理日期可能会很复杂，咱们一块儿学习 Dates 全部的怪癖并掌握如何使用它。

简介

在 JavaScript 中处理日期可能会很复杂，不管开发者技术如何，每每都会感到痛苦。

JavaScript 经过一个强大的Date对象对咱们提供了日期处理功能。

DATE 对象

Date 对象实例表示单个时间点.

尽管名为 Date, 它一样被用来处理时间。

初始化 Date 对象

咱们经过下述代码初始化一个 Date 对象：

new Date()

上述代码建立了一个表征当前时刻的日期对象。

在内部, 日期表示自 1970年1月1日 (UTC) 起到如今的毫秒数 。这个时间很重要, 由于就计算机而言, 这是其起始之时。

您可能熟悉 UNIX 时间戳: 这表示自该著名日期以来过去的秒数。

注意 UNIX 时间戳 以秒为单位，JavaScript 日期以 毫秒为单位

若是咱们有一个 UNIX 时间戳，咱们能够经过下述方法初始化一个 JavaScript 日期对象：

const timestamp = 1530826365
new Date(timestamp * 1000)

若是咱们传入的是0，咱们将会得到表示 Jan 1st 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') // 在 Safari11.1.2 上不能识别
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 会返回毫秒表示的时间戳而非一个 Date 对象

你还能够按照顺序传入值来表示日期的每一部分，参数顺序以下：年份，月份（从0开始），日期，小时，分钟，秒，毫秒

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

最少须要传入三个参数，不过大多 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, 结果会自动针对当前的计算机时区进行转换。

总结一下，有四种方法可让你建立一个新的 Date 对象：

• 不传参数，会基于当前时间建立 Date 对象；
• 传入表明自 1 Jan 1970 00:00 GMT 过去的毫秒数的数值；
• 传入表明日期的字符串；
• 传入一系列分别表明各项的参数；

时区

初始化日期时, 您也能够传入时区, 此时日期不假定为 UTC, 而后转换为本地时区。

能够经过 +HPURS 格式 或者添加时区名称的方式传入时区。

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

若是在解析时传入了错误的时区名称，JavaScript 会默认使用 UTC 并不会报错。

若是传入了错误格式的数值，JavaScript会报 Invaild Date 错误。

日期转换和格式化

对于一个给定的日期对象，存在不少方法能够基于该日期生产字符串

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

Date 对象的 GETTER 方法

Date 对象提供了几种检查其值的方法。这些方法的结果都都取决于计算机的当前时区

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 时间的版本：

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)

编辑 Date 对象

Date 对象提供了若干编辑日期值得方法

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

date.setDate(newValue)
date.setDay(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)
date.setTimezoneOffset(newValue)

setDay 和 setMonth 都从数值 0 开始 处理，好比三月应该为数值 2

这里有一个冷知识: 这些方法会 “重叠”, 因此好比说若是你使用了 date.setHours (48), 结果会影响到天。

还有一个冷知识，你能够为 setHours() 方法传入多个参数，用以设置分钟，秒，毫秒，如setHours(0, 0, 0, 0), setMinutes 和 setSeconds 存在相似的状况。

相似于众多获取日期的方法同样，设置日期的方法也存在对于的 UTC 版本：

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

date.setUTCDate(newalue)
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)

上述现象在日期，小时，分钟，秒以及毫秒一样生效

依据本地状况格式化日期

Internationalization API 在现代浏览器中有很好的支持(除了 UC浏览器)，容许你转换日期。

本地化方法经过，经过 Int1 对象暴露，这个对象还能够用来帮助本地化数值，字符串以及货币。

这里咱们用到的是 Intl.DateTimeFormat()

咱们能够经过下述方法来依据电脑的本地状况格式化一个日期：

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"

Intl.DateTimeFormat 方法还接收一个可选的参数用以自定义输出格式，能够用来展现 小时，分钟和秒

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 date2 = new Date('July 10, 2018 07:22:13')
if (date2.getTime() === date1.getTime()) {
  //dates are equal
}

须要注意的是，getTime() 方法比较的是毫秒，因此 July 10, 2018 07:22:13 和 July 10, 2018 并不相等。不过你能够经过 setHours(0, 0, 0, 0) 来重置时间。

一些有用的连接

• 原文地址：The definitive guide to JavaScript Dates
• 本文在 GitHub 上的地址