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

这篇具有很好参考价值的文章主要介绍了记录-new Date() 我忍你很久了!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

大家平时在开发的时候有没被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

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

 记录-new Date() 我忍你很久了!文章来源地址https://www.toymoban.com/news/detail-418508.html

到了这里,关于记录-new Date() 我忍你很久了!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • node debian 镜像 new Date 获取时间少 8 小时问题

    在 node debian 镜像中,用 (new Date()).getHours() 与系统时间(东 8 区)少了 8 小时 系统时间 容器中的时间 原 Dockerfile 镜像运行起来容器未设置指定时区 Dockerfile 中添加 ENV TZ=\\\'Asia/Shanghai\\\' 及 apt-get install -yq tzdata 系统时间 容器中的时间 https://dev.to/0xbf/set-timezone-in-your-docker-image-d22

    2024年02月14日
    浏览(41)
  • 安卓和ios针对于new Date()数据格式的兼容问题

    IOS 手机不识别 YYY-MM-DD HH:mm:ss 格式的日期传参。 在项目中需要实现倒计时,这个倒计时的时间是后端同学给到前端的,我们针对当前时间到结束的时,进行倒计时,这个功能在测试的时候安卓手机和iOS手机都没问题,但是哦生产有用户反馈ios手机无法出现倒计时 发现是ios低版本的情

    2024年02月04日
    浏览(39)
  • 微信小程序 IOS中new Date()时间格式不兼容问题

    问题描述: 最近在小程序项目中遇到了处理Date时间格式的需求,在Android手机测试是没有发现问题的,但是在IOS上 时间转换出现了错误。 解决方案: 这里主要兼容问题在于Android可以处理 ‘-’ 与 ‘/’ ,而IOS只能处理 ‘/’ 的时间格式,具体如下: 总结: 这里需要注意的

    2024年02月13日
    浏览(62)
  • JavaScript获取时间(js中的new Date(),获取前7天时间)

    简述:我们在写Echarts的时候,难免会用到js中的new Date(),用来获取时间, 今天就来分享下它的用法,顺便做下笔记。 关于new Date()的一些js方法: 输出: 1、 获取前一段时间的日期 难点: 这里用到了setDate()方法,该方法用于实现日期的相加减,它接收一个整数,如果这个整

    2024年02月09日
    浏览(80)
  • JavaScript中的时间日期函数new Date()(JS中5种获取时间戳的函数)

    简介: JavaScript 中的 new Date() 方法用于创建一个新的 Date 对象,该对象表示当前日期和时间。Date 对象提供了许多方法和属性,可以用于获取和设置日期和时间信息。 new Date([year, month, day, hour, minute, second, millisecond]) 其中,每个参数都是可选的。如果没有指定参数,则 new Dat

    2024年02月04日
    浏览(73)
  • 踩坑:小程序 new Date(“YYYY-MM-DD hh:mm:ss”)在ios手机上显示null

    一、发现问题: 苹果手机上进入小程序,点击picker组件选择时间日期(YYYY-MM-DD hh:mm:ss),用new Date(“YYYY-MM-DD hh:mm:ss”)转化时间格式进行比较时,变量转化后的结果为null 二、解决方案: 三、分析并查找原因: 1.在IOS中,new Date中指定的字符串还有格式,new Date(“YYYY/MM/DD hh:

    2024年02月12日
    浏览(36)
  • JavaScript 中 new Date() 生成的日期格式转换为 ‘yyyy-MM-dd HH:mm:ss‘ 格式的字符串

    1、使用 Date 对象自带的方法 可以使用 Date 对象自带的方法来获取日期字符串的各个部分,然后将它们拼接成目标格式的字符串: 2、使用第三方库 也可以使用第三方库来格式化日期字符串,如 moment.js: 或者使用 ES6 的模板字符串和 Date 对象自带的方法:

    2024年02月16日
    浏览(71)
  • element UI中的el-date-picker日期选择的日期偏差问题记录

    el-date-picker日期选择的的日期和输出的日期不相同 错误的代码 没问题的代码 注: yyyy-MM-dd 和 yyyy-MM-DD 大小写一定要注意,忘记了 一定要看清楚文档!!!

    2024年04月11日
    浏览(47)
  • 你以为你很优秀,但却面试屡屡失败?

    二哥,最近我在参加面试,但遇到了一个很尴尬的现实:我以为自己很优秀,但面试官好像对我有偏见,面试屡屡失败,现在有点心慌了,我该怎么办呢? 以上是读者小利问我的一个问题,我觉得挺值得认真分析一下的。在回答问题之前,我先来说一件事。 去年的这个时候

    2024年02月08日
    浏览(51)
  • 作为程序员,你很有必要了解一下IVX

    iVX 是一个“零代码”的可视化编程平台,拥有方便的在线集成开发环境,不需要下载开发环境,打开浏览器即可随时随地进行项目编辑。iVX 还拥有“一站式”的云资源,通过这一套一站式服务,iVX 可以实现一站式研发、一站式部署、一站式维护。iVX相当于“一款零代码可视

    2024年02月15日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包