這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下麵,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ...
這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助
大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下麵,我就列舉它的“四宗罪”及應用思考
可惡的四宗罪
1. Safari瀏覽器不相容YYYY-MM-DD這樣的格式
new Date('2023-1-1');
這行代碼無論在Macbook中還是iPhone中的Safari瀏覽器,返回的都是Invalid Date, Safari瀏覽器目前還理解不了YYYY-MM-DD這樣的格式,只支持YYYY/MM/DD。這就造成你在Windows環境下的代碼正常原型,而你的其他部分用戶異常顯示;
2、月份的索引是以0為起點的,而年份、日期卻不是
new Date(2023,1,1);
得到的是一個反直覺的結果:2023年2月1日!!!
Wed Feb 01 2023 00:00:00 GMT+0800 (中國標準時間)
同樣的,對應的方法.setMonth()也是從0開始設置的。就……很無語!
3、年份小於100,預設以19xx或20xx開頭
一般的應用可能碰不到這樣的情況,畢竟現在是21世紀了,我們在應用中看到的大部分時間都是現代的。但是當你需要格式化公元元年-公元100年之間的時間,你就該懵了!
舉個慄子:
new Date(2023,1,1);
能正常返回時間對象
Wed Feb 01 2023 00:00:00 GMT+0800 (中國標準時間)
但是當年份調到了東漢時期,公元50年2月1日
new Date(50,2,1);
恭喜你,你直接迎接了新中國!見證了歷史:
Wed Mar 01 1950 00:00:00 GMT+0800 (中國標準時間)
是的,Date直接幫你加了1900年的時間!如果需要獲得公元50年2月1日,得這麼寫
new Date('0050-02-01');
返回:
Tue Feb 01 0050 08:05:43 GMT+0805 (中國標準時間)
請千萬不要嘗試添加時間,因為你又要裂開了……
new Date('0050-02-01 00:00:00');
返回:
Wed Feb 01 1950 00:00:00 GMT+0800 (中國標準時間)
你就說,它任性吧?!彆氣餒,別忘了標題還有20xx的情況
new Date('10-11-12');
返回:
Thu Oct 11 2012 00:00:00 GMT+0800 (中國標準時間)
就是說,當年份為2位數的時候,這種字元串格式的,構造函數把最後面那個當作年份,而且預設它為20xx年
4、日期初始化不統一,存在時區差異
你相信嗎?'2018-01-01'和'2018/01/01'是不同的,存在一定時差
new Date('2018-01-01');
返回:
Mon Jan 01 2018 08:00:00 GMT+0800 (中國標準時間)
然而……
new Date('2018/01/01');
返回:
Mon Jan 01 2018 00:00:00 GMT+0800 (中國標準時間)
看到差異了嗎?兩種格式返回的時間是不同的,查了個北京時間與格林尼治時間的時差,8個小時啊!
應用思考
在日常開發中,我們應用new Date()無非就是對時間運算及時間的格式化。
1. 時間的計算
需要方便對比兩個時間的早晚,可以分別對年份、月份、日期、小時等進行單獨比較。而我們現有的操作還比較麻煩。
比如,我想知道2003年7月13日北京申奧成功到2008年8月8日北京奧運開幕中間差了幾天,如何快速計算?這樣的計算在日常開發中還比較常見,特別是電商網站對搶購環節的倒計時。
還有諸如,當前時間在100天以後又是幾月幾號呢?
2. 時間的比較
給定兩個時間,判斷哪個在前,哪個在後;給定一個時間返回,判斷某個時間是不是在這兩者之間。
3. 時間的格式化
在網站開發中,我們最常見的就是對後臺返回時間戳的格式化顯示。而原生帶來的僅有年份如何獲取,月份如何獲取,日期如何獲取的方法,就方便的無非就是toISOString()這樣的方法,但是返回的卻不一定是你要的格式。如何快速實現自定義格式化字元串,這也是一門技術。
困境的解決
想必大家日常中也用過 moment.js、dayjs、data-format這些工具吧?確實挺好用的,我也就順便說一下而已。因為我要開始打廣告了……面對著new Date()各種無語的坑,我慢慢的也弄了一個不大的庫(250行左右代碼)。
你要說我的庫和前面的幾個庫對比,有啥改進的或者有啥特點的嗎?