关于toLocaleDateString的坑

2024年1月2日 201次阅读 来源: lingxuan630

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

    原文作者：lingxuan630
    原文地址: https://segmentfault.com/a/1190000009391790
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞