译文 | https://github.com/qq449245884/xiaozhi/issues/66原文 | 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 时间 。

创建日期

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

  1. 使用日期字符串参数

  2. 使用一系列的参数

  3. 时间戳参数

  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的功能与精确度是没有差别的。

使用一系列的参数创建

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

  1. Year:4位数年份

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

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

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

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

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

  7. 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 Timenew Date(2023, 10, 6, 2, 20)// 11th June 2019, 5:23:59am, Local Timenew 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()

小结一波

  1. 使用 new Date() 创建日期

  2. 有四种可能的语法:

  • 使用字符串日期值
  • 使用一系列参数
  • 使用时间戳
  • 不带参数
  1. 最好不要使用字符串日期值的方法创建日期

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

  3. 记住月份是从0开始的

格式化日期

多数编程语言都提供了一种格式工具来创您想要的任何日期格式 例如,在PHP中,可以将date("d M Y")格式化成23 1月 2019这样的日期。但是在JS 中格式化日期并不容易。原生 Date对象提供了七种格式化方法,这七种方法中的每一种都会给你一个特定的价值,而且它们毫无用处。

const date = new Date(2019, 0, 23, 17, 23, 42)
  1. toString:格式化成 "Wed Jan 23 2019 17:23:42 GMT+0800 (中国标准时间)"

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

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

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

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

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

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

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

编写自定义日期格式

假设想要 2019年1月23日 星期四这样的日期格式。需要知道 Date对象日期方法。要获取这样的格式,用到 Date中的四个方法:

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

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

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

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

接着就产拼接起来。这是相对乏味的。如果需要创建自定义格式的时间,可以使用以下方法

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

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

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

  4. 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) // falseconsole.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, 10amconst b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pmconsole.log(isSameDay(a, b)) // true

从另一个日期获取日期

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

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

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

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

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

  1. setFullYear: 设置年份

  2. setMonth:设置月份

  3. setDate:设置每月的某一天

  4. setHours:设置时

  5. setNubytes:设置分

  6. setSeconds:设置秒

  7. 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 2019console.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 valuesconst 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会自动处理。

js 获得明天0点时间戳_需要知道的JS的日期知识,都在这了相关推荐

  1. js 获得明天0点时间戳_开群通知!昨日提示厦门信达、申通地铁、国林科技、隆盛科技全部涨停!明天这只龙头股有望继续涨停!...

    (关注公共号获得涨停秘籍) 往期个股跟踪 25号提及 厦门信达.申通地铁. 国林科技.隆盛科技26日封涨停 ,链接戳这里:提示轴研科技33个点!明天这只龙头股有望继续涨停! 21号提及江淮汽车22日封 ...

  2. js 获得明天0点时间戳_Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战...

    点击上方"测试开发技术",选择设为"设为星标" 优质文章,第一时间送达! 学习全文大概需要 12分钟,内容实战性较强. 1. 前言 本篇将基于Python 3. ...

  3. js 获得明天0点时间戳_js实现一个简单钟表动画(javascript+html5 canvas)

    自己学生时代的代码,发现还保存着,今天拿出来分享下. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas对象 canvas对象本人也不是很熟,大致看了几个常用的 ...

  4. 分享 14 个你必须知道的 JS 函数

    英文 | https://javascript.plainenglish.io/you-must-understand-these-14-javasript-functions-1f4fa1c620e ...

  5. js获取当天0点时间戳

    const dateStamp = new Date(new Date().toLocaleDateString()).getTime(); console.log(dateStamp); // 16 ...

  6. js 点击侧边栏展示内容_【DEMO】JS实现侧边栏信息展示效果

    /*使用块模式--立即执行的匿名函数*/(function(){//所有声明的变量在构造函数内部,不会向windows添加任何属性 /*构造函数的基本规范: 1.构造函数的第一个字母是大写的,与其他函 ...

  7. golang var 初始化时机_你应该知道的 Go 调度器知识:Go 核心原理 — 协程调度时机...

    点击上方蓝色"Go语言中文网"关注我们,领全套Go资料,每天学习 Go 语言 本文作者:叶不闻 原文链接:https://juejin.im/post/5dafc241f265da ...

  8. vue的post请求data可以传两个参吗_我知道的HTTP请求

    HTTP大家都不陌生,但是HTTP的许多细节就并不是很多人都知道了,本文将讨论一些容易被忽略但又比较重要的点. 首先,怎么用原生JS写一个GET请求呢?如下代码,只需3行: let xhr = new ...

  9. pyqt 获取 UI 中组件_你想知道的React组件设计模式这里都有(上)

    本文梳理了容器与展示组件.高阶组件.render props这三类React组件设计模式 往期回顾:HBaseCon Asia 2019 Track 3 概要回顾 随着 React 的发展,各种组件设 ...

最新文章

  1. 波士顿动力「全家」跳舞贺新年,马斯克点赞视频:这不是CG!
  2. AI的下半场怎么走,这朵云知道
  3. C#创建Oracle中的几何对象:点、线、面
  4. MQTT客户端连接服务器协议,mqtt客户端和服务器长连接
  5. An error occurred. connect() failed (111: Connection refused) while connecting to upstream
  6. PyTorch 1.10正式版上线了!附相关资源
  7. greensock包使用
  8. 有关l2,1范数作用的理解--正则化项作用,不同于l1范数(矩阵元素绝对值之和)的稀疏要求,l21范数还要求行稀疏
  9. ElasticSearch全文搜索引擎之Aggregation聚合查询(结合Kibana)
  10. PyTorch 全部笔记的思维导图精简记忆版
  11. 当前版本与卡刷包android_安卓SuperSU卡刷包 V2.82 SR5 安卓版下载 - win10专业版官网 - win10系统之家...
  12. JavaSE基础案例之模拟斗地主
  13. 5G赋能新文旅 巡天遥看一千河
  14. 苹果系统安全吗?7种方法保护自己的隐私
  15. latex里设置居中左对齐
  16. SAP SCC4 客户端设置的用法
  17. 小闫陪你入门 Java (二)
  18. 1万元!TP-Link发布Wi-Fi 7挖矿路由器:比RTX 4090快得多
  19. 苏州源特VPT87DDF01B 隔离变压器 小体积/SMD/3000VDC 隔离
  20. 对于超大型SQL SERVER数据库执行DBCC操作

热门文章

  1. Data Member 的绑定
  2. Oracle审计功能
  3. 7-31总结----javascript
  4. 利用用户级线程提高多线程应用的性能
  5. 一个牛人在美国的跳槽经历(有感)
  6. C/C++编程笔记:数据结构二叉树的查找(前序、中序、后序、层序遍历)
  7. Ontheinternet的深圳论坛
  8. 对extern C的一点小认识
  9. 想搞IT做程序员,要看哪些书?
  10. vba代码编程800例_VBA编程常用过程代码实例2630