关于toLocaleDateString的坑

enda 发布于2019-08-20 16:30 / 1474人阅读

摘要：浏览器的问题哈哈哈哈，找到问题了，就是的坑。新增的参数和使程序能够指定使用哪种语言格式化规则，允许定制该方法的表现。在旧版本浏览器中，和参数被忽略，使用的语言环境和返回的字符串格式是各自独立实现的。

Date.prototype.toLocaleDateString 这个方法并不常用，但是不排除一些同学会喜欢。笔者还是奉劝这部分同学戒掉这个方法吧。有时候被坑死了还不知道是什么情况。刚刚从坑里了爬出来，所以总结一下。

从一个真实的故事开始：

夏日的早晨，却是很清爽。某程序员一觉醒来就收到测试报的一个问题，“页面怎么什么都不显示，js还报错了”。美好的早晨就此毁掉了...

????????????????

程序员表示一脸懵逼，心想，昨天不是还测试得好好的吗，页面也没有js报错，今天怎么就跪了？不科学呀，看看报错uncaught TypeError: cannot read property "length" of undefined. 妈蛋，空指针，一定是后台接口的问题。

说干就干，打开调试器一下接口请求，完全没问题呀。什么鬼？

????????????????

于是开启js调试模式，看到错误报在一下这一段：

const dateTransform = date => {
    const tmp = date.split("/");
    if (tmp[1].length !== 2) {
        tmp[1] = "0" + tmp[1];
    }
    if (tmp[2].length !== 2) {
        tmp[2] = "0" + tmp[2];
    }
    return tmp.join("-");
}

dateTransform(new Date().toLocaleDateString());

看到这段代码瞬间崩溃，怎么用这种方式处理时间显示 ????????????????
姑且认为某猿是加班到凌晨2点写的代码吧（同个物种之间要懂得体谅）。该猿的思路是转换形如"2017/5/12"这样的字符串为"2017-5-12"，讲道理可以跑起来的。但是为什昨天的代码，到了今天就无法执行了呢？一定是toLocaleDateString的问题。

笔者在firefox中执行了这一段代码，完全正常，但是在chrome中报错。浏览器的问题？

# chrome
console.log(new Date().toLocaleDateString())
> 2017-5-12

#firefox
console.log(new Date().toLocaleDateString())
> 2017/5/12

哈哈哈哈，找到问题了，就是toLocaleDateString的坑。至于为什么昨天能跑，今天不能跑，秒懂啦。chrome升级了。从57升级到了58。

#Chrome < 58
> new Date().toLocaleDateString()
> output: "2017/5/12"

#Chrome >= 58
> new Date().toLocaleDateString()
> output: "2017-5-12"

此猿想，这个问题也不能完全把锅甩给chrome，dateTransform明显有问题啊，于是改：

const dateTransform = date => {
    const tmp = date.split("/");
    if(tmp.length === 1){
        return date;
    }
    if (tmp[1].length !== 2) {
        tmp[1] = "0" + tmp[1];
    }
    if (tmp[2].length !== 2) {
        tmp[2] = "0" + tmp[2];
    }
    return tmp.join("-");
}

dateTransform(new Date().toLocaleDateString());

然后全世界清静了。
但是某猿思索片刻还是果断删掉了这一段，用moment去实现Date格式化。

后记：

首先看看toLocaleDateString是什么东西：

toLocaleDateString() 方法返回该日期对象日期部分的字符串，该字符串格式因不同语言而不同。新增的参数 locales 和 options 使程序能够指定使用哪种语言格式化规则，允许定制该方法的表现（behavior）。在旧版本浏览器中， locales 和 options 参数被忽略，使用的语言环境和返回的字符串格式是各自独立实现的。

from https://developer.mozilla.org...

这方法最大的问题是在不同的浏览器中得到的结果是不一样的，例如

# firefox
> new Date().toLocaleDateString()
> output: "2017/5/12"

#IE11
> new Date().toLocaleDateString()
> output: "2017-5-12"

#Chrome < 58
> new Date().toLocaleDateString()
> output: "2017/5/12"

#Chrome >= 58
> new Date().toLocaleDateString()
> output: "2017-5-12"

所以尽可能不要用toLocaleDateString

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82960.html

Angular中关于时间的操作总结

摘要：上显示出来时间本地系统显示时间发送前控制台打印出来浏览器网络中监测显示解决方案只有在发送时间类型的数据时会进行转换，导致相差个小时，但是我发送前就将其转换成字符串，就不会造成这样的结果了。创建时间使用new Date(),可以看见有5种构造函数 showImg(https://segmentfault.com/img/remote/1460000013946509); co...

mengera88 2019-08-22 16:13 评论0 收藏0
javascript 中一些奇葩的日期换算

摘要：想阅读更多优质文章请猛戳博客一年百来篇优质文章等着你获取今天的时分秒常用于开始日期的获取中国标准时间获取一个月前的日期中国标准时间获取一个月前的时分秒中国标准时间获取前一天的日期中国标准时间加一天中国标准时间减一天中国标准时间获取今想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.获取今天的0时0分0秒（常用于开始日期的获取） new Date(new Dat...

Render 2019-08-23 13:05 评论0 收藏0
javascript 中一些奇葩的日期换算

摘要：想阅读更多优质文章请猛戳博客一年百来篇优质文章等着你获取今天的时分秒常用于开始日期的获取中国标准时间获取一个月前的日期中国标准时间获取一个月前的时分秒中国标准时间获取前一天的日期中国标准时间加一天中国标准时间减一天中国标准时间获取今想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.获取今天的0时0分0秒（常用于开始日期的获取） new Date(new Dat...

maxmin 2019-08-02 11:59 评论0 收藏0
javascript 中一些奇葩的日期换算

摘要：想阅读更多优质文章请猛戳博客一年百来篇优质文章等着你获取今天的时分秒常用于开始日期的获取中国标准时间获取一个月前的日期中国标准时间获取一个月前的时分秒中国标准时间获取前一天的日期中国标准时间加一天中国标准时间减一天中国标准时间获取今想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 1.获取今天的0时0分0秒（常用于开始日期的获取） new Date(new Dat...

testHs 2019-08-16 13:40 评论0 收藏0