JavaScript Dates 权威指南【译】

水深无声 2022-05-18 05:56 173阅读 0赞

> 在JavaScript中操作日期可能非常复杂，让我们来学习使用所有相关的技巧吧！原文链接：[https://flaviocopes.com/javascript-dates/][https_flaviocopes.com_javascript-dates]

![banner][]

## 介绍 ##

操作日期可能非常复杂，可能无论怎样操作，都会有开发者感到痛苦。  
![pain][]  
JavaScript通过一个强大的对象: `Date`来给我们提供日期处理函数。

> 这篇文章不会去讨论[Moment.js][]，我相信这是最好的用来处理日期的库，你应该总是用它来处理日期。、

## Date对象 ##

一个Date对象实例代表一个单一的时间点。尽管它叫`Date`，但它其实是用来处理`time`的。

## 初始化Date对象 ##

我们可以通过下面的代码来初始化一个Date对象:

new Date()

它创建了一个Date对象来指向当前时刻。

在内部，`dates`表达的是从1970年1月1日零点至今的毫秒数。这个日期很重要，因为就计算机而言，那是一切开始的地方。

你可能对UNIX时间戳更熟悉：代表这个著名的时间点（1970年1月1日零点）至今所过的秒数。

> 重要：UNIX时间戳用秒表示，JavaScript 日期用毫秒表示

如果我们已经有了一个UNIX时间戳，我们可以通过下面代码来实例化一个JavaScript日期对象：

const timestamp = 1530826365
    new Date(timestamp * 1000)

如果我们传0，我们会得到一个表示1970年1月1日0点(UTC)的Date对象：

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

这里的传参非常灵活，你可以添加或者省略月份或日期前面的0。

要非常小心的处理日期和月份的位置，因为你很可能把二者的位置搞混。

你还可以使用`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引擎也能接受少于3个的传数

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)

上面所有这些例子，都是相对于你计算机所在的时区的时间。这意味着，两台不同的电脑会根据同一个Date对象输出不同的值。

JavaScript在没有任何关于时区的信息时，会将日期当做UTC，并且会自动的将时间转换为电脑当前所在的时区。

总结一下，你可以通过4中方法来创建一个新的Date对象：

*  不传参数，创建一个Date对象来表示当前时间
 *  传一个表示从格林威治时间1970年1月1日0点至今的毫秒数
 *  传一个表示日期的字符串
 *  传一个包含日期各个部分的参数集合

## 时区 ##

初始化一个日期时你可以把时区传进去，这样date对象就不会假设时区是UTC，然后将其转换成你本地的时区。

你可以按如下形式将指定的时区传入：

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

如果你在括号中传入了一个错误的时区，JavaScript会选择默认的UTC时区。

如果你指定了一个错误的数字类型的时区，JavaScript会抛出`Invalid Date`的错误。

## 日期的转换和格式化 ##

给定一个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对象的读接口 ##

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等价版本，这些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)

## 编辑一个日期 ##

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。

一个有趣的事实是，这些值是可以“进位(overlap)”的。举个例子，如果你使用`date.setHours(48)`，它将直接增加对应的天数。

不可不知：你可以给`setHours`设置不知一个参数，来设置分、秒、毫秒：`setHours(0, 0, 0, 0)`，效果跟`setMinutes`和`setSeconds`是一样的。

像`get`方法一样，`set`方法也有对应的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)

这个规则对月份、小时、分钟、秒、毫秒同样生效。

## 本地化日期 ##

现代浏览器(除了UC浏览器)已经很好的支持[国际化API][API]，来让你很好的转换时间格式。

可以使用`Intl`对象暴露的接口来本地化数字、字符串和货币。

我们需要关注的是`Intl.DateTimeFormat()`这个接口。

现在来看看怎么使用它。

根据电脑默认的地区来格式化日期：

// "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"

`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"

[参考API][API 1]

## 比较两个日期 ##

你可以使用`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()`返回的是毫秒值，所以在比较的时候需要把时间因素考虑进去。`July 10, 2018 07:22:13`并不等于`July 10, 2018`。在这个例子里，你可以使用`setHours(0, 0, 0, 0)`来重置时间。

[https_flaviocopes.com_javascript-dates]: https://flaviocopes.com/javascript-dates/
[banner]: /images/20220518/6bbd928b4d4b4a57a710c8b25ac24dd4.png
[pain]: /images/20220518/5c22f7eb8f564252ab54736b83eddb2b.png
[Moment.js]: http://momentjs.com/
[API]: https://caniuse.com/internationalization
[API 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat