關於toLocaleDateString的坑

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