记录-new Date() 我忍你很久了!

news2024/9/29 15:25:25

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

大家平时在开发的时候有没被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、data-format这些工具吧?确实挺好用的,我也就顺便说一下而已。因为我要开始打广告了……面对着new Date()各种无语的坑,我慢慢的也弄了一个不大的库(250行左右代码)。

你要说我的库和前面的几个库对比,有啥改进的或者有啥特点的吗?

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

【项目开源地址】github.com/mumuy/datex

【项目演示地址】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();

本文转载于:

https://juejin.cn/post/7221884988492382267

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/438313.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

受安全威胁困扰的时代的可见性和人工智能

安全漏洞和事件以惊人的规律性发生,媒体报道的大人物,只是发生的实际数量的一小部分。 就在上周,横跨澳大利亚和新西兰的主要金融服务提供商 Latitude Financial 公布了影响其 1400 万客户的网络攻击和数据泄露的详细信息。 如果我们要确保…

一致性框架设计方案

补充组件依赖 前言 对于供应链业务,一般对数据一致性要求高。且由于业务复杂,可能会存在一个业务功能触发几个异步操作的场景,且要保证相关操作同时触发或不触发。 为了降低技术设计难度、代码编写难度,特意设计最终一致性框架&a…

Vue - 实现垂直菜单分类栏目,鼠标移入后右侧出现悬浮二级菜单容器效果(完整示例源码,详细代码注释,一键复制开箱即用)

前言 网上的教程都太乱了,各种杂乱无注释代码、图片资源丢失、一堆样式代码,根本无法改造后应用到自己的项目中。 本文实现了 在 Vue / Nuxt 项目中,垂直分类菜单项,当用户鼠标移入菜单后,右侧自动出现二级分类悬浮容器盒子效果, 您可以直接复制源码,然后按照您的需求再…

pyecharts从入门到精通-地图专题BMap-世界地图和中国城市地图

文章目录 参考安装与查看pyecharts地图实现-BMap案例演示案例演示-杭州热门旅行线路图拓展-pyecharts中BMap源码 参考 官方文档:https://pyecharts.org/#/zh-cn/quickstart Bmap - Hiking_trail_in_hangzhou 安装与查看pyecharts 安装pyecharts pip install pyecharts2.0.3…

傅里叶级数FS,连续时间傅里叶变换CTFT,离散时间傅里叶变换DTFT,离散傅里叶变换DFT,推导与联系(二)

由于本文公式所占用的字符比较多,无法在一篇博客中完整发布,所以将其分为两篇博客。本篇主要介绍了离散傅里叶变换 DFT 的内容,以及相关的总结。对于前置内容,包括傅里叶级数 FS,连续时间傅里叶变换 CTFT,以…

【小程序】手动实现switch开关中带文字效果(开关左右文字相同/不同都可以)

最终效果&#xff1a; 左右文字宽度相同 左右文字宽度不同 左右长度相同 效果&#xff1a;配合wx:show切换 注意&#xff1a;左右长度相同的话可以设置合适的相同的宽度。 html&#xff1a; <view class"switch"><viewclass"switchNums {{ swi…

什么是Web1.0时代、Web2.0时代、Web3.0时代?

什么是Web1.0时代、Web2.0时代、Web3.0时代&#xff1f; 互联网的起源。1969年美国的阿帕网的出现标志着互联网的诞生&#xff0c;而1973年第一台个人电脑The Xerox Alto的出现就预示了互联网将蓬勃生长&#xff0c;随之而来的就是我们迈入了信息时代。短短几十年的发展&#x…

【服务器数据恢复】Storwize存储上的Oracle数据库数据恢复案例

服务器数据恢复环境&#xff1a; IBM Storwize某型号存储&#xff0c;共10块磁盘&#xff0c;组建了2组Mdisk加入到一个存储池中&#xff0c;创建了一个通用卷存放数据&#xff0c;存放的数据包含oracle数据库。 服务器故障&#xff1a; 存储中其中一组Mdisk有两块磁盘出现故障…

三百左右蓝牙耳机选哪个?300元左右半入耳式耳机推荐

目前TWS耳机十分火热&#xff0c;成为许多人出行、娱乐的必要工具&#xff0c;但同时许多厂商也看到了这块的市场&#xff0c;大小品牌、各种形态的耳机产品应有尽有&#xff0c;某宝随便一搜就是几万个链接&#xff0c;下面整理了几款300左右价位的耳机品牌分享给大家。 一、南…

【GPT4】微软 GPT-4 测试报告(2)多模态与跨学科的组合

欢迎关注【youcans的AGI学习笔记】原创作品&#xff0c;火热更新中 微软 GPT-4 测试报告&#xff08;1&#xff09;总体介绍 微软 GPT-4 测试报告&#xff08;2&#xff09;多模态与跨学科能力 微软 GPT-4 测试报告&#xff08;3&#xff09;编程能力 微软 GPT-4 测试报告&…

【服务器】XShell报错:应用程序无法正常启动(0xc000007b)

XShell报错&#xff1a;应用程序无法正常启动(0xc000007b) 某一天&#xff0c;Win上XShell启动时突然报错如下&#xff1a; 报错信息&#xff1a;应用程序无法正常启动(0x000007b)。请单击“确定”关闭应用程序。 卸载XShell重装后该问题仍然存在。 解决方法&#xff1a; 下…

设计模式 -- 迭代器模式

前言 月是一轮明镜,晶莹剔透,代表着一张白纸(啥也不懂) 央是一片海洋,海乃百川,代表着一块海绵(吸纳万物) 泽是一柄利剑,千锤百炼,代表着千百锤炼(输入输出) 月央泽,学习的一种过程,从白纸->吸收各种知识->不断输入输出变成自己的内容 希望大家一起坚持这个过程,也同…

107页园区大数据治理解决方案2022(ppt可编辑)

本资料来源公开网络&#xff0c;仅供个人学习&#xff0c;请勿商用&#xff0c;如有侵权请联系删除。 篇幅有限&#xff0c;无法完全展示&#xff0c;喜欢资料可转发评论&#xff0c;私信了解更多信息。

强训之【求最大连续的bit数和最近公共祖先】

目录 1.求最大连续的bit数1.1题目1.2思路1.2.1暴力求解1.2.2 字符串分割求解1.2.3 位运算“与”求解 1.3代码1.3.1暴力求解代码1.3.2字符串分割求解代码1.3.3位运算“与”求解 2.最近公共祖先2.1题目2.2思路2.3代码 3.选择题 1.求最大连续的bit数 1.1题目 链接: link 描述 求…

《花雕学AI》21:ChatGPT能否应对脑筋急转弯?逻辑推理和创造性思维的大考验!

当我们谈到脑筋急转弯时&#xff0c;很多人都会感到兴趣和好奇。脑筋急转弯是一种智力游戏&#xff0c;可以锻炼我们的思维能力以及解决问题的能力。然而&#xff0c;对于许多人来说&#xff0c;脑筋急转弯也是一项相当具有挑战性的任务。在这个过程中&#xff0c;我们需要运用…

RISE with SAP,亚马逊云科技开启全新的SAP现代化之路

在不确定性依然存在的当下&#xff0c;快速进行现代化转型与创新&#xff0c;是企业走向成功的必经之路。而现代化转型与创新对于众多企业而言&#xff0c;意味着对SAP进行现代化改造。实现这一改造&#xff0c;能为企业带来包括创新业务模型、快速响应客户不断变化的需求、增加…

推荐系统数据集之MovieLens

1.概述 MovieLens其实是一个推荐系统和虚拟社区网站&#xff0c;它由美国 Minnesota 大学计算机科学与工程学院的GroupLens项目组创办&#xff0c;是一个非商业性质的、以研究为目的的实验性站点。GroupLens研究组根据MovieLens网站提供的数据制作了MovieLens数据集合&#xff…

带有MCU算法的多功能语音交互芯片,OTA升级语音ic,WTV380-32N

几年来&#xff0c;随着智能家居、安防报警、医疗器械 等领域的快速发展&#xff0c;语音交互技术越来越受到人们的关注和青睐。作为智能硬件的重要组成部分&#xff0c;语音芯片的发展也变得越来越重要&#xff0c;针对这一市场需求&#xff0c;我们推出了一款多功能的语音芯片…

layout布局input框输入中文出现撑开/换行

layout布局input框输入中文出现撑开/换行 问题 element ui组件库中提供了layout布局&#xff0c;但是在使用中出现了一个奇奇怪怪的问题 我想要实现的布局是两个输入框排成一行&#xff0c;行与行之间样式布局不会互相影响 直接上代码&#xff1a; <el-row :gutter&quo…

海康相机通过MVS达不到标称最大帧率的解决办法

目录 1.相机参数设置1.1 取消相机帧率限制1.2 修改相机图像格式1.3 调整相机曝光时间1.4 检查相机数据包大小&#xff08;网口相机特有参数&#xff09;1.5 恢复相机默认参数1.6 相机 ADC 输出位深调整 2.系统环境设置2.1 网口相机设置2.2 USB 相机设置 1.相机参数设置 1.1 取…