JS日期方法操作大全,看这篇就够了

您所在的位置:网站首页 js对象方法怎么写 JS日期方法操作大全,看这篇就够了

JS日期方法操作大全,看这篇就够了

2024-07-15 02:11| 来源: 网络整理| 查看: 265

640?wx_fmt=png

关注前端达人,与你共同进步

640?wx_fmt=jpeg

译者:前端小智

原文:https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/

JS中的 Date 很奇怪。当我们需要处理日期和时间的时候比较麻烦,经常借助像date-fns和 Moment 这样的库。

但是我们并不总是需要使用库。如果知道要注意一些常用的,日期实际上可以非常简单。接下介绍有关 Date对象的所有信息。

时区

我们的世界有数百个时区。在JavaScript中,我们只关心两个, 本地时间和协调世界时(UTC)。

本地时间是指你的计算机所在的时区。

UTC实际上是格林威治标准时间(GMT)的同义词

默认情况下,JS中的几乎每个日期方法(除了一个)都是本地时间。只有指定UTC,才能获得 UTC 时间 。

创建日期

可以使用 newDate() 来创建日期,传入的参数通常有4种常用的方式:

使用日期字符串参数

使用一系列的参数

时间戳参数

不带参数

使用日期字符串参数 new Date('1988-03-21')

这种方式方便且直观。

如果现在写的是 21-03-1988,我们可以毫不费力想表达的是1988年3月21日。但是如果用JS 编写21-03-1988,则会得到无效的日期。

640?wx_fmt=png

这是有原因的。

在世界的不同地方以不同的方式解释日期字符串。例如 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:两位数月份(即 1月为01,12月为12)

DD:两位数的日期(0到31)

-:日期分隔符

T:表示开始时间

HH:24位小时数(0到23)

mm:分钟(0到59)

ss:秒(0到59)

sss:毫秒(0到999)

::时间分隔符

Z:如果存在 Z,则日期将设置为UTC,如果 Z不存在,则为本地时间。

其中小时,分钟,秒和毫秒是可选的,如果你想创建一个2019年6月11日的日期,可以这样写:

new Date('2019-06-11')

在这里要特别注意,使用日期字符串参数创建日期存在很大问题,把创建的日期打印出来就可以发现问题。

如果你住在格林威治标准时间(GMT)晚的的地区,你会得到一个日期是 6月10日。

640?wx_fmt=png

如果你住在比格林威治标准时间早的地区,才会等得到 6月11日的日期。

640?wx_fmt=png

发生这种情况是因为日期字符串参数的方法具有特殊行为:如果创建日期(未指定时间),则会获得UTC格式设置的日期。

在上面的场景中,使用 newDate('2019-06-11') 创建日期时,实际上创建的日期是2019年6月11日,UTC时间上午12点。这就是为什么住在格林尼治标准时间之后的地区的人得到的是 6月10日而不是 6月11日。

如果要使用日期字符串参数方法在“本地时间”中创建日期,则需要包括时间。如果包含时间,则需要至少写入 HH和 mm

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

640?wx_fmt=png

使用日期字符串参数的创建的本地时间与UTC的比较可能是一个难以捕捉的错误。所以,建议不要使用日期字符串创建日期方式。

格林威治标准时间GMT 十七世纪,格林威治皇家天文台为了海上霸权的扩张计画而进行天体观测。1675年旧皇家观测所(Old Royal Observatory) 正式成立,到了1884年决定以通过格林威治的子午线作为划分地球东西两半球的经度零度。观测所门口墙上有一个标志24小时的时钟,显示当下的时间,对全球而言,这里所设定的时间是世界时间参考点,全球都以格林威治的时间作为标准来设定时间,这就是我们耳熟能详的「格林威治标准时间(Greenwich Mean Time,简称G.M.T.)的由来,标示在手表上,则代表此表具有两地时间功能,也就是同时可以显示原居地和另一个国度的时间。

世界协调时间UTC多数的两地时间表都以GMT来表示,但也有些两地时间表上看不到GMT字样,出现的反而是UTC这3个英文字母,究竟何谓UTC?事实上,UTC指的是Coordinated Universal Time- 世界协调时间(又称世界标准时间、世界统一时间),是经过平均太阳时(以格林威治时间GMT为准)、地轴运动修正后的新时标以及以「秒」为单位的国际原子时所综合精算而成的时间,计算过程相当严谨精密,因此若以「世界标准时间」的角度来说,UTC比GMT来得更加精准。其误差值必须保持在0.9秒以内,若大于0.9秒则由位于巴黎的国际地球自转事务中央局发布闰秒,使UTC与地球自转周期一致。所以基本上UTC的本质强调的是比GMT更为精确的世界时间标准,不过对于现行表款来说,GMT与UTC的功能与精确度是没有差别的。

使用一系列的参数创建

最多可以传入七个参数来创建日期/时间。

Year:4位数年份

Month:一年中的某月(0-11)

Day:每月的某天(1-31),如果省略,则默认为1。

Hour:一天中的小时(0-23),如果省略,则默认为0。

Minutes:分钟(0-59),如果省略,则默认为0。

Seconds:秒(0-59),如果省略,则默认为0。

Milliseconds:毫秒(0-999),如果省略,则默认为0。

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

许多开发人员比较少用这种方式,因为它看起来很复杂,但它实际上非常简单。可以从左到右记忆:年、月、日、小时、分钟、秒和毫秒。

Date 中需要注意的地方 Month是从 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中,时间戳是自1970年1月1日以来经过的毫秒数(1970年1月1日也称为Unix纪元时间)。根据我的经验,很少使用时间戳来创建日期,一般使用时间戳来比较不同的日期或者格式化日期,后面在讨论。

不带参数的形式创建日期

如果创建没有任何参数的日期,则会将日期设置为当前时间(以本地时间为单位)。

new Date()

640?wx_fmt=png

小结一波

使用 new Date() 创建日期

有四种可能的语法:

  使用字符串日期值

  使用一系列参数

  使用时间戳

  不带参数

最好不要使用字符串日期值的方法创建日期

最好使用一系列参数方式创建日期

记住月份是从0开始的

格式化日期

多数编程语言都提供了一种格式工具来创您想要的任何日期格式 例如,在PHP中,可以将 date("d M Y")格式化成 231月2019这样的日期。

但是在JS 中格式化日期并不容易。

原生 Date 对象提供了七种格式化方法,这七种方法中的每一种都会给你一个特定的价值,而且它们毫无用处。

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

toString:格式化成 "Wed Jan 23 2019 17:23:42 GMT+0800 (中国标准时间)"

toDateString: 格式化成 "Wed Jan 23 2019"

toLocaleString:格式化成 "2019/1/23 下午5:23:42"

toLocaleDateString:格式化成 "2019/1/23"

toGMTString:格式化成 "Wed, 23 Jan 2019 09:23:42 GMT"

toUTCString:格式化成 "Wed, 23 Jan 2019 09:23:42 GMT"

toISOString :格式化成 "2019-01-23T09:23:42.000Z"

如果需要自定义格式,则要自己创建。

编写自定义日期格式

假设想要 2019年1月23日星期四这样的日期格式。需要知道 Date对象日期方法。

要获取这样的格式,用到 Date 中的四个方法:

getFullYear:获取当地时间4位数的年份

getMonth:获取当时时间的月份,注意从 0 开始

getDate:获取当地时间月中的某一天(1-31)

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月' }

要得到1月份,你需要

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()] // 星期四

接着就产拼接起来。这是相对乏味的。

如果需要创建自定义格式的时间,可以使用以下方法

getHours:获取当地时间获取小时数(0-23)。

getMinutes:获取本地时间获取分钟(0-59)。

getSeconds:获取本地时间获取秒数(0-59)。

getMilliseconds:获取本地时间获取毫秒(0-999)。

日期的比较

比较日期的前后,可以直接使用 >, = 和 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3