new Date() 我忍你很久了!

更新日期: 2023-05-24阅读: 141标签: 日期

大家平时在开发的时候有没被new Date()折磨过?就是它的诸多怪异的设定让你每每用的时候,都可能不小心踩坑。造成程序意外出错,却一下子找不到问题出处,那叫一个烦透了…… 下面,我就列举它的“四宗罪”及应用思考


可恶的四宗罪

1. Safari浏览器不兼容YYYY-MM-DD这样的格式

new Date('2023-1-1');

这行代码无论在Macbook中还是iPhone中的Safari浏览器,返回的都是Invalid Date, Safari浏览器目前还理解不了YYYY-MM-DD这样的格式,只支持YYYY/MM/DD。这就造成你在Windows环境下的代码正常原型,而你的其他部分用户异常显示;

2、月份的索引是以0为起点的,而年份、日期却不是

new Date(2023,1,1);

得到的是一个反直觉的结果:2023年2月1日!!!

Wed Feb 01 2023 00:00:00 GMT+0800 (中国标准时间)

同样的,对应的方法.setMonth()也是从0开始设置的。就……很无语!

3、年份小于100,默认以19xx或20xx开头

一般的应用可能碰不到这样的情况,毕竟现在是21世纪了,我们在应用中看到的大部分时间都是现代的。但是当你需要格式化公元元年-公元100年之间的时间,你就该懵了!

举个栗子:

new Date(2023,1,1);

能正常返回时间对象

Wed Feb 01 2023 00:00:00 GMT+0800 (中国标准时间)

但是当年份调到了东汉时期,公元50年2月1日

new Date(50,2,1);

恭喜你,你直接迎接了新中国!见证了历史:

Wed Mar 01 1950 00:00:00 GMT+0800 (中国标准时间)

是的,Date直接帮你加了1900年的时间!如果需要获得公元50年2月1日,得这么写

new Date('0050-02-01');

返回:

Tue Feb 01 0050 08:05:43 GMT+0805 (中国标准时间)

请千万不要尝试添加时间,因为你又要裂开了……

new Date('0050-02-01 00:00:00');

返回:

Wed Feb 01 1950 00:00:00 GMT+0800 (中国标准时间)

你就说,它任性吧?!别气馁,别忘了标题还有20xx的情况

new Date('10-11-12');

返回:

Thu Oct 11 2012 00:00:00 GMT+0800 (中国标准时间)

就是说,当年份为2位数的时候,这种字符串格式的,构造函数把最后面那个当作年份,而且默认它为20xx年

4、日期初始化不统一,存在时区差异

你相信吗?'2018-01-01'和'2018/01/01'是不同的,存在一定时差

new Date('2018-01-01');

返回:

Mon Jan 01 2018 08:00:00 GMT+0800 (中国标准时间)

然而……

new Date('2018/01/01');

返回:

Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)

看到差异了吗?两种格式返回的时间是不同的,查了个北京时间与格林尼治时间的时差,8个小时啊!


应用思考

在日常开发中,我们应用new Date()无非就是对时间运算及时间的格式化。

1. 时间的计算

需要方便对比两个时间的早晚,可以分别对年份、月份、日期、小时等进行单独比较。而我们现有的操作还比较麻烦。

比如,我想知道2003年7月13日北京申奥成功到2008年8月8日北京奥运开幕中间差了几天,如何快速计算?这样的计算在日常开发中还比较常见,特别是电商网站对抢购环节的倒计时。

还有诸如,当前时间在100天以后又是几月几号呢?

2. 时间的比较

给定两个时间,判断哪个在前,哪个在后;给定一个时间返回,判断某个时间是不是在这两者之间。

3. 时间的格式化

在网站开发中,我们最常见的就是对后台返回时间戳的格式化显示。而原生带来的仅有年份如何获取,月份如何获取,日期如何获取的方法,就方便的无非就是toISOString()这样的方法,但是返回的却不一定是你要的格式。如何快速实现自定义格式化字符串,这也是一门技术


困境的解决

想必大家日常中也用过 moment.js、dayjs、>你要说我的库和前面的几个库对比,有啥改进的或者有啥特点的吗?

确实也没有,我只是想用自己造的“轮子”,走自己路。它更符合我自己的使用习惯罢了。

【项目开源地址】https://github.com/mumuy/datex
【项目演示地址】https://passer-by.com/datex/

提供的方法足以解决以上“四宗罪”及日常应用。它提供多种初始化时间的方式:

实例化对象

// 通过时间戳
datex(123456789);

// 通过多个参数初始化
datex(2018,8,8);

// 通过时间字符串初始化
datex('2018-08-08');
datex('2018-04-04T16:00:00.000Z');

// 通过时间对象初始化
datex({year:2008,month:8,day:8,hour:8,minute:0,second:0});

// 通过时间数组初始化
datex([2018,8,8,8,8,0]);

// 无参数初始化
datex();

时间戳及克隆

// 返回时间戳(毫秒)
datex().getTime();

// 返回时间戳(秒)
datex().getUnix();

// 克隆
datex().clone();

时间对象输出

// 返回原生Date对象
datex().toDate();

// 返回时间字段对象
datex().toObject();

// 返回时间字段数组
datex().toArray();

// 返回字符串
datex().toString();

// 返回ISO字符串
datex().toISOString();

时间格式化

datex(123456789).format('YYYY-MM-DD');

时间计算及比较

// 设置某字段值
datex(2022,10,1).set('year',2020).format();

// 增减某字段值,负值为减
datex(2022,10,1).change('year',1).format();

// 返回某字段值
datex().get('month');

// 获取某字段起始时
// 例如:获取这个月初是星期几?
datex().startOf('month').format('W');

// 获取某字段末尾时
// 例如:获取这个月有多少天?(是不是很容易理解?end of month then get day!)
datex().endOf('month').get('day');

// 与某时间点差值
// 例如:北京2008年奥运会开幕式过去多少天了?
datex().diffWith('2008-8-8','day');

// 是否在某个时间点之前
datex('2008-08-08').isBefore('2022-02-02');

// 是否在某个时间点之后
datex('2008-08-08').isAfter('2022-02-02');

// 是否和某个时间点相等
datex('2008-08-08').isSame('2018-02-02','year');

// 是否在两个时间点之间
datex('2008-08-08').isBetween('2003-07-13','2022-02-02');

有效性

datex('2008-13-12').isValid();

ok, that is it. 你还遇到过哪些特别奇葩的问题,或者棘手的需求呢?不妨告诉我下,反正……我也不一定会做。

作者:passer-by6061,链接:https://juejin.cn/post/7221884988492382267


链接: https://www.fly63.com/article/detial/12486

解决javaScript在不同时区new Date()显示值不同问题

在日期格式化时遇到的问题,日期格式化方法在最下面。如果在中国时区 formatDate(‘2019-07-09‘) 结果是 ‘2019-07-09’,如果 在夏威夷时区 utc-10:00 或者别的时区 formatDate(‘2019-07-09‘) 结果是 ‘2019-07-08’

JS获取当前月的最后一天

为了更好的讲这节的内容,提示一个 JS 处理日期的小技巧,想获取上个月最后一天,只需要设置SetDate参数为0即可。使用 JS 获取当前月的最后一天,咱们通常的思路先获取下个月的第一天

Js如何获取某一天所在的星期?

我们这里来获取今天所在星期的始末日期,我们可以通过(new Date).getDay()来获取今天是星期几,然后再通过这个减去或者加上一定的天数,就是这个星期的开始日期和结束日期。

vue 循环取值日期格式化,字符串截取处理

用vue取值页面遍历时,每次都搜索js日期格式化和字符串长度截取,这次记录下来,以后从这里直接拿即可。html代码如下

js中Date的构造函数解读

javascript中的内置对象是我们经常会用到的,那么今天我们就来说说Date的四种构造方法吧,new Date()这是我们最常使用也最熟悉不过的Date对象的构造方法了,通过无参数的构造函数我们可以默认获取到一个代表实例化时的Date对象

ElementUI日期选择器时间选择范围限制

ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细,这里做一个element-ui日期插件的补充。官方文档中使用picker-options属性来限制可选择的日期,这里举例子稍做补充。

js获取一段时间内的间隔日期

js获取指定时间范围内指定间隔天数的所有日期,前端js,已知开始时间a、结束时间b和间隔天数c,要求取在a-b这两个时间范围内、间隔c天的所有日期。

前端的各种日期操作

虽然现在处理日期方面已经有了很成熟的也很好用的库,例如(momentjs和date-fns),但是在实际开发中,我们有时候可能并不需要整个库。所以我就在下面整理了在前端开发时对日期时间的各种操作,也算是比较全的了

Safari Date() 函数对日期时间字符串(yyyy-MM-dd HH:mm:ss) 提示NaN的问题

今天发现一个奇怪的问题,在iPhone使用 safari 选择定时发布文章到OSC,选择时间后提示不是合法的时间,判断时间的代码如下:在Chrome下会输出 pass,在Safari会输出 isNaN,根据 ECMAScript 5 ISO-8601 format support: 的说法

JavaScript将毫秒转换为日期格式?

给定一串毫秒数,如何使用JavaScript将它们转换为日期格式?下面本篇文章就来给大家介绍一下使用JavaScript将毫秒转换为日期格式的方法,希望对大家有所帮助。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!