JavaScript Dates 最终指南

在 JavaScript 中处置惩罚日期能够会很庞杂,我们一同进修 Dates 一切的怪癖并控制怎样运用它。

简介

在 JavaScript 中处置惩罚日期能够会很庞杂,不管开发者手艺怎样,每每都邑感到痛苦。

《JavaScript Dates 最终指南》

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), setMinutessetSeconds 存在相似的状况。

相似于浩瀚猎取日期的要领一样,设置日期的要领也存在关于的 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:13July 10, 2018 并不相称。不过你能够经由过程 setHours(0, 0, 0, 0) 来重置时候。

一些有效的链接

    原文作者:zhangwang
    原文地址: https://segmentfault.com/a/1190000015972991
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞