JS new Date在iOS下兼容性问题,网上99%的答案都是错误的

广告位招租
扫码页面底部二维码联系

过去这些年我们对这个问题的重视程度几乎为【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】0,以至于我们现在的所有有关时间的值的存【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net储、使用,都可能是错的,这不是危言耸听,转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】我们很多系统很可能都面临着问题。这个问题【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】在很多情况下都没有暴露,直到我们把应用运【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。行在iOS较低的版本的微信浏览器,或者较【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net低版本的firefox等浏览器时,我们突转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。然发现,竟然要解决这个问题,并且牵一发而【本文受版权保护】本文版权归作者所有,未经授权不得转载。动全身,甚至要后端配合一起重构有关时间值【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。在数据库中的存储格式。没错,这就是有关我未经授权,禁止复制转载。【原创内容,转载请注明出处】们开发中的“日期时间”问题。本文将详解为转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。什么我们会遇到这样的问题,以及应该如何解【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。决。

【版权所有】唐霜 www.tangshu原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.netang.net【原创内容,转载请注明出处】【关注微信公众号:wwwtangshua【转载请注明来源】【原创不易,请尊重版权】ngnet】【未经授权禁止转载】

问题的暴露

当我们去面试的时候,总会遇到一些看上去傻著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】叉,在实际中几乎不会遇到的问题,例如下面【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。这道题:

【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】et 获取更多精彩内容】【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。ang.net【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【版权所有,侵权必究】ang.net
请写出下面这几个表达式的结果:
new Date();
new Date(undefined);
new Date(null);
new Date('2021-01-01 12:00:00');
new Date(['2021-01-01', '12:00']);
new Date("December 17, 1995 03:24:00");
new Date('-278239-05-01');

怎么样,即使久经沙场的你,可能也会摸摸头原创内容,盗版必究。【本文首发于唐霜的博客】这都是啥啥啥?有时候,我们感觉是对的,但未经授权,禁止复制转载。【版权所有,侵权必究】其实是错的,就以我们最熟悉的第4行(标红【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】)来说,大部份情况下我们都会觉得这一行没【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】有任何问题,就是和我们预期的一样,也是我转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】们工作中常用的方式,后端也是这样存储的。原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。然而,当我们把这句话放到低版本的iOS中【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net时,它返回的却是“Invalid Date”。正是这个错误,才有了今天这篇文章。

转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.netng.net【未经授权禁止转载】

反思

长久以来,我们都和后端有一定的默契,后端【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。返回mysql等数据库中存的日期时间字符著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】串,由前端实例化为需要的格式来在界面中展【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】示。然而,我们今天发现,mysql的da原创内容,盗版必究。【作者:唐霜】tetime类型的默认返回结果,是错误的未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】(不精确的),是不可以直接使用的,而把问未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net题的根源再往前推,可能当我们的系统在用户著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。选择一个日期,进行保存的那一刻,就已经出转载请注明出处:www.tangshuang.net原创内容,盗版必究。了问题。因为这些场景下,我们都没有考虑时著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net区问题,对于拥有全球不同时区的用户的系统【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net而言,两个用户选中了相同的日期,并提交保【转载请注明来源】未经授权,禁止复制转载。存,然而,这两个日期可能代表的实际意义是未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。不同的,可我们在存储时却没有加以区分,最原创内容,盗版必究。【本文受版权保护】终导致在应用运行时使用该时间带来了逻辑上【转载请注明来源】原创内容,盗版必究。的错误。

【版权所有,侵权必究】未经授权,禁止复制转载。转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netng.net转载请注明出处:www.tangshua【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。ng.net

如果对时区不加以考虑,那么用户就可以通过本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。编辑系统时区,来实现绕过一些业务策略,从【本文受版权保护】【本文受版权保护】而给应用带来风险。因此,采取一定的策略,【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。对于应用系统的安全是必要的。策略有很多,转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。例如后端一律存储和输出timestamp【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。,即UNIX epoch,由于对于电子钟未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】而言,该值是固定的,即使时区不同,同一时转载请注明出处:www.tangshuang.net【本文受版权保护】刻的值也相同,因此可以避免一些问题,前端【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net在拿到该值后在new Date来获得本地转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】时间,把本地时间作为用户的运行时间。

【作者:唐霜】原创内容,盗版必究。

策略虽多,但是对于前端的同学而言,必须反【未经授权禁止转载】【原创内容,转载请注明出处】思,是否是因为我们的一些基础知识不牢固,转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。才导致这样的问题没有被提前规避掉呢?

【版权所有】唐霜 www.tangshu【转载请注明来源】【原创不易,请尊重版权】ang.net本文作者:唐霜,转载请注明出处。

很多情况下,我们会按照自己的模糊经验来进本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。行 new Date 得到一个时间对象,【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】然而,你真的知道 new Date 的用【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net法吗?你确定你传入的参数是正确的吗?你确【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net定你传入的参数,能够按预期返回结果吗?你【本文首发于唐霜的博客】未经授权,禁止复制转载。确定你能够设计出你期望结果的参数吗?这些【本文受版权保护】转载请注明出处:www.tangshuang.net问题即使在面试时被忽略,但在实际工作中遇【作者:唐霜】【作者:唐霜】到时,你再来查资料,也不一定能解决,就像【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】上面我遇到的问题,“new Date在i【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】OS下的兼容性问题”,在百度搜索可以得到【转载请注明来源】【原创内容,转载请注明出处】无数篇文章,里面清一色的告诉你,把 &#【未经授权禁止转载】原创内容,盗版必究。8216;2021-01-01 12:0【作者:唐霜】【版权所有,侵权必究】0:00’ 替换为 R【原创内容,转载请注明出处】未经授权,禁止复制转载。16;2021/01/01 12:00:原创内容,盗版必究。原创内容,盗版必究。00’ 就能解决问题,真的吗【本文受版权保护】本文作者:唐霜,转载请注明出处。?你确定吗?我可以告诉你,这种解决方案是原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net错误的,如果这些文章被GPT作为训练语料【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net,那么你在ChatGPT获得的结果也会是本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。错误的。如此可悲的现象,令人担心。

【作者:唐霜】【版权所有】唐霜 www.tangshu【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】ang.net

从标准中寻找答案

要解决这个问题,我们必须寻求标准或者权威【作者:唐霜】转载请注明出处:www.tangshuang.net的参考。其中,标准应该阅读TC39的相关【作者:唐霜】本文版权归作者所有,未经授权不得转载。标准文档,权威资料可以参考MDN,虽然M本文版权归作者所有,未经授权不得转载。【作者:唐霜】DN绝大部分都是正确的,但是是不全面的,【转载请注明来源】本文版权归作者所有,未经授权不得转载。最终我们还是要看TC39的文档才能彻底解本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】决我们的问题。TC39的标准文件没有告诉转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。我们原理,我们不知道浏览器底层C/C++本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】代码是怎么写的,以至于带来了问题,但是,本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】TC39标准文件告诉我们按照如何去使用就【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】一定是正确的。明明有标准文件可以参考,但本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】是网络上的各种“我推测”“经过测试……”本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net“有可能……”反复被转载,令人唏嘘。

【作者:唐霜】原创内容,盗版必究。【作者:唐霜】

我们来看下 new Date 参数的标准原创内容,盗版必究。【原创内容,转载请注明出处】表现:

【访问 www.tangshuang.n【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。et 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。ng.net未经授权,禁止复制转载。

【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】

具体标准阅读TC39标准文件,我这里为了方便理解,用通俗的语言进行了【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】解释。

未经授权,禁止复制转载。【原创内容,转载请注明出处】【本文受版权保护】【原创内容,转载请注明出处】

从上图可以看出,不同的参数,带来的结果完本文作者:唐霜,转载请注明出处。【未经授权禁止转载】全不同,接下来,我们用上面这张图,来反观未经授权,禁止复制转载。【原创内容,转载请注明出处】一些案例,看看为什么它的结果和我们预期的本文版权归作者所有,未经授权不得转载。【转载请注明来源】不同。

本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【本文首发于唐霜的博客】ang.net

new Date(undefined)

著作权归作者所有,禁止商业用途转载。【作者:唐霜】转载请注明出处:www.tangshua未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。ng.net转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ng.net

有1个参数,该参数类型为“其他”,尝试转【未经授权禁止转载】本文作者:唐霜,转载请注明出处。化为number,得到NaN,chrom【原创内容,转载请注明出处】【本文首发于唐霜的博客】e中尝试转化为string,无效,因此结【转载请注明来源】【转载请注明来源】果为Invalid Date。注意,new Date(undefine【原创不易,请尊重版权】【本文首发于唐霜的博客】d) 和 new Date() 是完全不著作权归作者所有,禁止商业用途转载。【本文受版权保护】同的,它们参数个数不同。

【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。ang.net【原创不易,请尊重版权】

new Date(null)

原创内容,盗版必究。本文作者:唐霜,转载请注明出处。原创内容,盗版必究。

有1个参数,该参数类型为“其他”,尝试转本文作者:唐霜,转载请注明出处。【本文受版权保护】化为number,得到0,因此结果为1970-01-01T00:00:00.000Z.

本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。

new Date([“202【未经授权禁止转载】【作者:唐霜】0-06-19”, R【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。20;17:13”])

转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【转载请注明来源】ng.net原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。

有1个参数,该参数类型为“其他”,尝试转【本文首发于唐霜的博客】原创内容,盗版必究。化为number,得到NaN,chrom原创内容,盗版必究。【本文首发于唐霜的博客】e中尝试转化为string,再执行实例化 new Date('2020-06-19,17:13'),在chrome中该string符合某l未经授权,禁止复制转载。【本文首发于唐霜的博客】ocal time string格式,返【作者:唐霜】著作权归作者所有,禁止商业用途转载。回对应日期对象,在其他浏览器中返回Inv未经授权,禁止复制转载。【未经授权禁止转载】alid Date。

【原创内容,转载请注明出处】【原创内容,转载请注明出处】

new Date(‘2022转载请注明出处:www.tangshuang.net【未经授权禁止转载】-01-22 12:00’)

未经授权,禁止复制转载。【转载请注明来源】

有1个参数,该参数为string,用Da【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】te.parse进行解析,chrome中【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net符合某local time string【版权所有,侵权必究】【原创内容,转载请注明出处】格式,可以被解析为对应时间戳number【本文首发于唐霜的博客】【转载请注明来源】,以该number作为参数再执行实例化,转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。最终可以得到一个日期对象。在iOS或部分【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】safari中,用Date.parse无著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】法解析得到一个时间戳number,最终返原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】回Invalid Date。

【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。

由以上例子可见,new Date传参对结【本文受版权保护】著作权归作者所有,禁止商业用途转载。果的影响很大,且由于不同浏览器在实现本地【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。化时间格式时各不相同,导致同参Data.【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】parse返回结果不同,以至于出现了兼容【转载请注明来源】【原创内容,转载请注明出处】性问题。至此,我们终于理解了标题中iOS著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】时间格式不兼容问题的根源。而网上99%的【作者:唐霜】著作权归作者所有,禁止商业用途转载。文章中提供的将-替换为/的方法,只不过是【本文首发于唐霜的博客】【本文首发于唐霜的博客】把一个非标的时间格式替换为另外一个非标的著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】时间格式,在不同的浏览器实现中Date.本文版权归作者所有,未经授权不得转载。【转载请注明来源】parse不一定最终按照预期的方式得到结【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】果,因此实际上还是一个错误的解决方法。

【本文首发于唐霜的博客】【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。【作者:唐霜】ngnet】未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。

正确的答案

通过上述分析之后,我们可以得到能够准确实【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】例化时间的,通过后端存储的格式,只有两种转载请注明出处:www.tangshuang.net原创内容,盗版必究。

【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。ngnet】著作权归作者所有,禁止商业用途转载。
  • UNIX epoch
  • 【原创内容,转载请注明出处】【转载请注明来源】本文作者:唐霜,转载请注明出处。
  • ISO 8601标准字符串格式
  • 【本文受版权保护】【本文受版权保护】【版权所有】唐霜 www.tangshu【转载请注明来源】未经授权,禁止复制转载。ang.net本文作者:唐霜,转载请注明出处。

虽然多个参数的形式也能准确实例化,但是由【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】于考虑到后端存储和传输的便利性差,因此不【转载请注明来源】转载请注明出处:www.tangshuang.net在考虑范围内。

未经授权,禁止复制转载。【原创不易,请尊重版权】【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netngnet】【原创不易,请尊重版权】

另外需要注意的是ISO 8601标准格式【转载请注明来源】本文作者:唐霜,转载请注明出处。中,时区部分必须用:作为分隔符,这在TC39文件中有明确规定。因此类似 2024-01-02T12:00:00+0800 这样的时间格式看似正确,实际上是不被标本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】准支持的格式。而这种近似标准的格式比非标【未经授权禁止转载】【版权所有,侵权必究】格式更惨烈,在iOS中全军覆没。

未经授权,禁止复制转载。【本文受版权保护】【原创内容,转载请注明出处】

新的Temporal标准

为了解决Date的缺陷,TC39邀请了m【未经授权禁止转载】【版权所有,侵权必究】oment.js的作者Maggie重新起本文作者:唐霜,转载请注明出处。【作者:唐霜】草了一份新标准,即Temproal标准,【本文首发于唐霜的博客】【本文首发于唐霜的博客】该标准以解决原有Date标准的问题,同时转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】提供了现代时间/日历需求的覆盖。你可以通过这里了解Temporal相关的内容。现在已经有了对应的polyfill来使用【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.netTemporal,不妨试试看。

本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。

结语

本文由一个日期实例化在iOS中的兼容性问【版权所有,侵权必究】转载请注明出处:www.tangshuang.net题出发,详细阐述了Date实例化参数的标【作者:唐霜】【原创不易,请尊重版权】准,并且解释了非标准日期时间格式是引起兼原创内容,盗版必究。本文作者:唐霜,转载请注明出处。容性问题的根源。或许我们都错怪了iOS中著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。的实现,并非苹果作祟,而是我们提供了非标【关注微信公众号:wwwtangshuangnet】【转载请注明来源】准格式的日期时间字符串惹的锅,而恰巧ch【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】rome在这个点上“多管闲事”比safa著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。ri多实现了一些非标格式,才导致了iOS本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。的兼容性问题。

【未经授权禁止转载】【本文受版权保护】本文版权归作者所有,未经授权不得转载。

2024-02-28 5753

为价值买单,打赏一杯咖啡

本文价值57.53RMB