JavaScript Dates 终极指南

2018-08-12 admin

在 JavaScript 中处理日期可能会很复杂,我们一起学习 Dates 所有的怪癖并掌握如何使用它。

简介

在 JavaScript 中处理日期可能会很复杂,无论开发者技术如何,往往都会感到痛苦。

image.png

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')
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)

setDaysetMonth 都从数值 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) 来重置时间。

一些有用的链接

原文链接:https://segmentfault.com/a/1190000015972991

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37771.html

文章标题:JavaScript Dates 终极指南

相关文章
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
JavaScript短路原理精简代码
js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
《JavaScript快速查询手册》PDF
下载地址:《JavaScript快速查询手册》PDF下载 http://pan.baidu.com/s/130rP8’ 简介: JavaScript快速查询手册 目录 前言 第一部分 命令查询 第二部分 JavaScript语句与运算符 第...
2015-11-16
回到顶部