JS的日期與時間

Lala Wang
Feb 5, 2021

--

圖片出自Unsplash

Date物件中包含了許多對日期時間處理方法,大致上可以分成以下幾類:
◾getter: 獲取某種時間格式,例如getFullYear是回傳西元年
◾setter: 設定某種時間格式,例如setFullYear設定西元年
◾格式化的getter: 通常是要獲取不同地區的日期(或時間)格式,以及轉換成各種資料格式

Date物件的建構式

Date物件一定只能使用new運算符來建立,這是JavaScript中的硬規則,有一些特殊的內建物件一定要使用建構式進行物件的實體化。

取得目前日期時間

輸出時會使用國際日期標準的格式輸出,相等於呼叫toString()方法

另一種要用於計算時間用的格式,則是把Date物件轉成只用微秒數值的格式,它是一個由1 January 1970 00:00:00 UTC開始計算,到目前日期時間的微秒數字值。
這個時間類似稱之為UNIX時間,原本是UNIX系統用來表示時間的方式,不過UNIX時間只計算到秒,而這個數字值是計算到微秒,現在很常用於在程式中計算時間之用。有兩種方式可以獲得這個數字值:

註: 使用Date物件來評估或測量JavaScript應用程式(或語句)的執行時間並不夠可靠與精確,有這個需求的話,你應該使用performance.now或benchmark.js函式庫。

取得日期時間其中某個值

◾getDate: 取得日期的值,範圍為1–31
◾getFullYear: 取得年(西元年),為4位數數字
◾getDay: 取得星期幾的值,範例為0–6
◾getgetMonth: 取得月份的值,範例為0–11
getDay、getgetMonth回傳值,實際上是陣列索引值,也就是說如果你要轉成真正的月份與星期的值,需要有一個對照的陣列,然後用這個回傳值當作陣列索引值去轉換出來。

取得UTC時間

取得時區的方法是getTimezoneOffset,它是用分鐘計算的值,而且是以目前程式執行的時區為基準,所以例如以下的範例會回傳-480,實際上是UTC+8的時區:

註: 時區處理也有可能很複雜,如果有需要可以用專門處理時區的工具函式庫來協助,例如Moment Timezone。

設定日期時間 與 日期時間字串

通用的格式

// 幾乎在每種瀏覽器品牌或版本都可以相容使用 
2009/07/12
2009/7/12
2009/07/12 12:34
2009/07/12 12:34:56
// 英文語言使用者常用的方式
07/02/2012
7/2/2012
7/2/2012 12:34

如果你想要直接在字串中加上微秒的定義,會出現嚴重的不相容性,大概只有Chrome瀏覽器認得。所以解決方式就拆開所有的值,改用使用第四種的Date物件建構式分別傳入每個值,或是再額外用設定值的方法setMilliseconds直接設定才行。

月、日的表示如果要用兩位數字就都用兩位(例如01/01與11/04),如果要用1到2位的數字就統一這樣用(例如1/1或11/4)。如果你要混用的話,不見得一定可以用,瀏覽器的相容性可能會有問題。註: 在時間上的字串值,時與分至少都要有,而且都用兩位數字,例如01:00或12:09。

ISO 8601格式

EMCAScript標準中定義的格式,實際上它就是ISO 8601標準

YYYY-MM-DDTHH:mm:ss.sssZ

2016-01-01 //年月日可以只有年、年月
2016-07-15T09:00 //時間的部份至少要有時與分
2016-07-15T09:26:23.216Z
2016-07-15T09:20:37.788+08:00

◾YMD代表年月日,Hms代表是時分秒,這兩部份比較沒什麼太大的問題。
◾T只是分隔年月日與時分秒而已。
◾Z是時區的意思,單純用Z代表是UTC標準時間,如果是其他時區的時間可以用+或-,再加上HH:mm作為時區的表達式

RFC 2822格式

RFC2822格式,它並不是一種專門用於定義日期時間格式的標準,這個標準所定義的標題名稱是”Internet Message Format”(網際網路訊息格式),主要是用於定義Email(或RSS)的相關格式的標準,而其中有一章是關於日期時間格式的章節。所以,這種日期時間格式,主要的使用群是英文使用者,原因在它使用了英文中的月份與星期縮寫在字串,以下為格式範例:

ddd, DD MMM YYYY HH:mm:ss ZZ
MMM DD, YYYY
DD MMM, YYYY

Mon, 15 Aug 2005 15:52:01 +0000
Thu, 18 Feb 2016 15:33:10 +0200
Jan 1, 2015
1 Jan, 2015

由於月份與星期都已經字串化(不是數字),所以你可能會看到有很多種位置不同的寫法,基本上瀏覽器處理這種字串並不會太困難。RFC2822標準並沒有明確指出格式的限制,程式語言都可以很容易實作與解析這種日期字串。

設定方法

設定方法對照取得某個值的方法,除了把get變為set外,也少了星期的部份。要注意的是,除了上面說的日期時間字串(dateString),其他的傳入參數一律只能用數字類型。
◾0: 對setDate方法是回傳上個月的最後一日。setMonth方法則是回傳一月(索引值為0)。
◾範圍內的整數: 直接設定為該數字
◾其他正整數: 日期相加
◾其他負整數: 日期相減

由於setYear與getYear兩個方法存在了Y2K(千禧蟲危機)的問題而被棄用了,目前已改用 setFullYear與getFullYear。

時分秒與微秒的設定方法部份,都有類似setDate的規則,只要超過可設定的範例,就會開始進行相加或相減的情況,以下為簡單的範例:

本地化與格式化

Date物件中已有幾個可以輸出本地化格式字串的方法,主要有三個分別為toLocaleString、toLocaleDateString、toLocaleTimeString,它們會依照JavaScript程式所執行的環境(瀏覽器)進行本地化,一個簡單的範例如下:

格式化的需求通常會用於各種不同的日期或時間的顯示,配合上面所說的獲取日期或時間中某個值的說明,就可以進行各種日期或時間的格式化。Date物件並沒有提供可以進行格式化(format)的標準方法,所以這部份需要程式設計師自己撰寫或使用外部函式庫來輔助,一個簡單的格式化範例如下:

toLocaleFormat()方法是一個非標準的方法,大部份的瀏覽器品牌都不能使用。

日期比較

Date物件可以直接比較大小,比較日期時間的早晚順序,日期時間愈晚的Date物件會愈大

Date物件也可以轉為自微秒數值的格式,它是一個由1 January 1970 00:00:00 UTC開始計算,到目前日期時間的微秒數字值。要取得這個數值是使用getTime方法

--

--

Lala Wang
Lala Wang

Written by Lala Wang

前端工程師,專門處理前端 Vue.js、React.js 各大小網站,歡迎同好一起互相交流 😄 也歡迎來我的部落格逛逛 https://happy9990929.github.io/