海闊憑魚躍,天高任鳥飛。Hey 你好!我是秦愛德。😄
導讀在我們日常項目開發當中,必不可少的就是對日期時間的處理。針對此類需求,通常第三方插件或者廣大輪子哥們已然為我們提供了全套服務(開箱即用,手動點讚👍👍👍)。當然了,我們也可以通過系統對象new Date()來輕鬆實現對時間的處理。不過對於出場率如此之高的 new Date() 你真的了解它麼?什麼是時區?時間標準如何定義?JavaScript中的時區有何不同? 穩住,別慌!今天就讓我們來扒開Date()的外衣,看看它背後的冷知識。😜😜😜
什麼是時區?通過查閱維基百科我們可以得出一個結論:一個時區是地球上的某個區域是觀察一個統一的標準時間為法律,商業和社會的目的。時區往往遵循國家及其分區的邊界,而不是嚴格遵循經度,因為便於緊密商業或其他通信區域保持同一時間。傳送門
一圖勝千言1884年10月在美國華盛頓召開的國際子午線會議,採納了一份提案。這份提案明確了,選取以穿過英國格林威治天文臺子午儀中心的那條子午線,作為確定全球經度和時間的本初子午線。最終,該會議將格林威治子午線設定為本初子午線,並將格林威治平時 (GMT, Greenwich Mean Time) 作為世界時間標準。由此也確定了全球24小時自然時區的劃分,所有時區都以和 GMT 之間的偏移量做為參考。
一個時區內的當地時間,會用與世界標準時間 (UTC) 之間的偏移量來定義。這個偏移量可以表示為 UTC- 或 UTC+,後面接上偏移的小時數和分鐘數。
我們常說的「時差」其實就是時區的差距,規定將全球劃分為24個時區(東、西各12個時區)。每個時區橫跨15個金緯度,相當於一個小時。
**舉個慄子:**🌰
美國紐約州紐約的時區為:GMT-4
中國四川省成都市的時區為:GMT+8
咱們大成都和美國紐約的時差為 8 - (-4) = 12
UTC - 世界時間的標準世界時間 (UT) 產生於1884年的華盛頓子午線會議。它是如今我們使用的24小時時區系統的基礎。世界標準時間 (UTC, Coordinated Universal Time) 是當今民用時間的基礎。它使用一天 24 小時時間制,並結合了地球的自轉時間與原子鐘的高精度度量。UTC 是一個全球通用的時間標準。全球各地都同意將各自的時間進行同步協調 (coordinated),這也是 UTC 名字的來源:Universal Coordinated Time。JavaScript中的new Date()創建一個 JavaScript Date 實例,該實例呈現時間中的某個時刻。Date 對象則基於Unix Time Stamp,即指格林威治時間1970年01月01日00時00分00秒(北京時間1970年01月01日08時00分00秒)起至現在的總秒數。
獲取時區// 當我們在谷歌瀏覽器控制臺輸入(我的坐標是在成都) new Data(),則輸出
// Tue Sep 22 2020 16:47:13 GMT+0800 (中國標準時間)
// 眼尖的小夥伴可能已經發現 'GMT+0800' 字樣,沒錯!這就是我們所在地的時區
// 可通過getTimezoneOffset函數來獲取當前地方時和UTC時間的差值(分鐘表示)。
let time = -new Date().getTimezoneOffset() / 60; // 輸出:8
獲取UTC標準時間到指定日期的毫秒數// UTC() 方法可根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數(UTC時間與GMT(格林尼治時間)相同)
Date.UTC(2020,09,22) // 輸出:1603324800000
// 將本地時間轉換為UTC時間
new Date(Date.UTC(2020,09,22)) // 輸出:Thu Oct 22 2020 08:00:00 GMT+0800 (中國標準時間)
// 這裡需要注意一個點:new Date(2020,09,22) 是基於本地時間,而new Date(Date.UTC(2020,09,22))是基於UTC時間
一個有意思的現象(日期表單參數創建時間相差八小時)一圖勝千言從控制臺的輸出得知兩個結果相差了8個小時。
一圖勝千言傳送門
MDN介紹到:如果不存在時區偏移,則僅日期表單將被解釋為UTC時間,而日期時間表單將被解釋為本地時間。(UTC時間即是0時區的標準時間)
提出疑問?new Date()實例可以修改時區麼?答:不能!
舉個慄子🌰
原因在於實例化一個Date()對象後,js在本地存儲時,都會將它轉換成本地時區並不會存儲實例化該日期時的時區信息。
如果需要修改時區,可藉助第三方工具包momentjs
聲明一個moment實例,可通過實例上的tz()與format()方法配合使用,達到修改時區效果。具體用法可參考文檔這裡不做過多講述---文檔傳送門
蘋果手機的日期表單時間創建報錯問題new Date('2020-09-22 00:00:00')👆如上代碼,在做移動端h5頁面的時候,蘋果手機可能會報錯。原因在於蘋果手機多數使用safari瀏覽器,看到這裡!老划水員們可能早已心領神會,這是safari瀏覽器一直存在的兼容性問題。我們需要換一個寫法,如下👇
new Date('2020/09/22 00:00:00')
安利一些好用的時間處理工具包https://momentjs.com/
https://github.com/iamkun/dayjs
https://date-fns.org/
好了👌,以上就是本次對new Date()的一些知識總結了,其實主要就是對時區的解釋。在寫這篇博客的時候,我也翻閱了相關資料,了解了一些關於「時間標準」的演進歷史,從利用太陽在正午的角度來測量時間到最早的測時工具日晷和滴漏直至如今UTC全球通用時間標準。過程不斷的改進,我想這就是偉大人類的智慧吧。
❤️愛心三連擊
1.點讚在看,已成習慣!該系列持續更新,你們的一鍵三連就是我持續寫作的最大動力
2.關注公眾號前端秦愛德
3.點讚、在看、轉發 === 催更!
歡迎關注我的公眾號「前端秦愛德」,每天給你推送新鮮的技術文章。回復 「電子書」 即可獲得我精心準備的前端學習大禮包
感興趣的小夥伴還可以加入我的「秦愛德前端交流群」,我在成都上班兒,群裡有大批成都本土優秀大佬以及美女HR,如果你碰巧也是成都的,那就趕快進來吧。
多一個點在看多一條小魚乾