资讯专栏INFORMATION COLUMN

需要知道的JS的日期知识,都在这了

testbird / 477人阅读

摘要:实际上是格林威治标准时间的同义词默认情况下,中的几乎每个日期方法除了一个都是本地时间。如果你住在格林威治标准时间晚的的地区,你会得到一个日期是月日。需要知道对象日期方法。

为了保证的可读性,本文采用意译而非直译。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!

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

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

时区

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

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

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

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

创建日期

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

使用日期字符串参数

使用一系列的参数

时间戳参数

不带参数

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

这种方式方便且直观。

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

这是有原因的。

在世界的不同地方以不同的方式解释日期字符串。 例如11-06-20192019年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日

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

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

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

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

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

使用日期字符串参数的创建的本地时间与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()

小结一波

使用 new Date() 创建日期

有四种可能的语法:

使用字符串日期值

使用一系列参数

使用时间戳

不带参数

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

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

记住月份是从0开始的

格式化日期

多数编程语言都提供了一种格式工具来创您想要的任何日期格式 例如,在PHP中,可以将date("d M Y")格式化成23 1月 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)。

日期的比较

比较日期的前后,可以直接使用>, <, >=<= 时行比较。

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier < later) // true

比较两个日期是否一样,就比较麻烦,不能直接用 =====

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false

可以getTime获取它们的时间戳,用时间戳进行比较。

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true

如果只想检查两个日期是否在同一天,可以比较他们的getFullYeargetMonthgetDate值。

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate()=== b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10am
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
console.log(isSameDay(a, b)) // true

从另一个日期获取日期

有两种可能的情况,希望从另一个日期获得一个日期。

设置另一个日期特定的日期/时间值

从另一个日期添加/减去增量

设置另一个日期特定的日期/时间值

可以使用以下方法设置另一个日期的日期/时间:

setFullYear: 设置年份

setMonth:设置月份

setDate:设置每月的某一天

setHours:设置时

setNubytes:设置分

setSeconds:设置秒

setMilliseconds:设置毫秒

例如,如果想将日期设置为每月15日,可以使用setDate(15)

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 15 January 2019
注意:上面的setter方法会改变原始日期对象。 在实际中,我们不应该改变对象,应该在新的日期对象上执行这些操作。
const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 10 January 2019
console.log(newDate) // 10 June 2019

从另一个日期添加/减去增量

添加/减去增量有两种通用方法。 第一种方法在Stack Overflow上更受欢迎,它简洁,但更难掌握。 第二种方法更冗长,但更容易理解。

假设希望获得从今天起三天的日期。 对于这个例子,假设今天是2019年3月28日

第一种方法
const today = new Date(2019, 2, 28)

首先,我们创建一个新的Date对象,这样就不会改变原始日期

const finalDate = new Date(today)

接下来,我们需要知道要更改的值。因为我们要改变日期,所以我们可以用getDate获得日期

const currentDate = today.getDate()

因为获取三天后的日期,所以需要在得到的日期加3

setDate(currentDate + 3)

完整代码:

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate() + 3)

console.log(finalDate) // 31 March 2019
第二种方法

使用getFullYeargetMonthgetDate方法,更改对应的值, 然后,我们使用new Date创建最终日期。

const today = new Date(2019, 2, 28)

// Getting required values
const year = today.getFullYear()
const month = today.getMonh()
const day = today.getDate()

// Creating a new Date (with the delta)
const finalDate = new Date(year, month, day + 3)

console.log(finalDate) // 31 March 2019
自动日期校正

如果为Date提供一个超出其可接受范围的值,JS 将自动重新计算日期。

如下所示,假设我们把日期定在2019年3月33日,日历上没有33日,JS 会自动将3月33日调整为4月2日

这意味着在创建增量时无需担心计算分钟,小时,天,月等,JavaScript会自动处理。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

关注公众号,后台回复福利,即可看到福利,你懂的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105012.html

相关文章

  • Promise初级与进阶---都在这了

    摘要:处理和前一个回调函数运行时发生的错误发生错误对象的错误具有冒泡性质,会一直向后传递,直到被捕获为止。 0 前言 我一直以为我对Promise比较了解,相关的方法已经非常熟悉了,直到我看到这篇文章,里面提出了这样一个问题:Q: 假定 doSomething() 和 doSomethingElse() 均返回 promises,下面的四种 promises 的区别是什么 /...

    Ocean 评论0 收藏0
  • 你要 React 面试知识点,都在这了

    摘要:是流行的框架之一,在年及以后将会更加流行。于年首次发布,多年来广受欢迎。下面是另一个名为的高阶函数示例,该函数接受另外两个函数,分别是和。将所有较小的函数组合成更大的函数,最终,得到一个应用程序,这称为组合。 React是流行的javascript框架之一,在2019年及以后将会更加流行。React于2013年首次发布,多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高...

    klinson 评论0 收藏0
  • 如何写好一个vue组件,老夫一年经验全在这了

    摘要:比如很好用的拖拽库控制元素是否被拖动的行为。仅仅负责引入以及个人喜好把一个元素当做不可见的包裹元素,并在上面使用。你有什么写组件的独特技巧,不妨在评论区告诉我吧 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop、事件和插槽: prop 允许外部环境传递数据给组件 event 允许从组件内触发外部环境的副作用 slo...

    187J3X1 评论0 收藏0
  • Python对比两种日期两种方式详细说明

      大家应用Python解决日期/时长时,经常遇到这样那样的问题。文中给大家归纳了两种Python对比两种日期方式,所需要的可以了解一下。  以前我们曾介绍过:Python获得某个时间是周几的6种方式!事实上,在咱们应用Python解决日期/时长时,经常遇到这样那样的问题。下面我们就来讨论另外难题,怎样用Python对比两种日期?  datetime  如果需要用Python处理日期和时间,大家肯...

    89542767 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<