關於toLocaleDateString的坑

Date.prototype.toLocaleDateString 這個方法並不經常使用,可是不排除一些同窗會喜歡。筆者仍是奉勸這部分同窗戒掉這個方法吧。有時候被坑死了還不知道是什麼狀況。剛剛從坑裏了爬出來,因此總結一下。程序員

從一個真實的故事開始:chrome

夏日的早晨,倒是很清爽。某程序員一覺醒來就收到測試報的一個問題,「頁面怎麼什麼都不顯示,js還報錯了」。美好的早晨就此毀掉了...瀏覽器

????????????????測試

程序員表示一臉懵逼,心想,昨天不是還測試得好好的嗎,頁面也沒有js報錯,今天怎麼就跪了?不科學呀,看看報錯uncaught TypeError: cannot read property 'length' of undefined. 媽蛋,空指針, 必定是後臺接口的問題。firefox

說幹就幹,打開調試器一下接口請求,徹底沒問題呀。什麼鬼?prototype

????????????????指針

因而開啓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的問題。code

筆者在firefox中執行了這一段代碼,徹底正常,可是在chrome中報錯。瀏覽器的問題?orm

# 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

相關文章
相關標籤/搜索