關于toLocaleDateString的坑

enda 發布于2019-08-20 16:30 / 1696人閱讀

摘要：瀏覽器的問題哈哈哈哈，找到問題了，就是的坑。新增的參數和使程序能夠指定使用哪種語言格式化規則，允許定制該方法的表現。在舊版本瀏覽器中，和參數被忽略，使用的語言環境和返回的字符串格式是各自獨立實現的。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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