JavaScript Date(日期)操作權威指南

JavaScript · 發表 2018-11-16 22:50:14

摘要：小編推薦：掘金是一個面向程式員的高質量技術社群，從一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。使用 JavaScript 中的日期可能會很複...

小編推薦：ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。

使用 JavaScript 中的日期可能會很複雜。學習所有的問題以及如何使用它們。

介紹

處理日期可能很複雜。無論技術如何，開發人員都會感受到痛苦。

JavaScript 通過強大的Date 物件為我們提供日期處理功能。

本文不討論Moment.js ，我認為它是處理 date 的最佳庫，在使用 date 時你應該幾乎總是使用它。愚人碼頭注：目前另一個流行的 JavaScript 日期操作庫是date-fns ，他是使用純函式構建的，並且在不更改傳遞日期例項的情況下保持不可變(immutable)。它適用於webpack，Browserify或Rollup等打包器，並且還支援 tree-shaking。

Date 物件

Date 物件例項表示單個時間點。

儘管被命名為Date ，它也處理時間。

初始化 Date 物件

我們使用下面的程式碼初始化 Date 物件

new Date()

這將建立一個指向當前時間的 Date 物件。

在內部，日期用 1970年1月1日（UTC）以來的毫秒數表示。這個日期很重要，因為就計算機而言，這就是一切開始的地方。

您可能熟悉 UNIX 時間戳：它表示自該著名日期以來經過的秒數。

重要：UNIX 時間戳的原因以秒（seconds）為單位。JavaScript 以毫秒（milliseconds）為單位記錄時間。

如果我們有 UNIX 時間戳，我們可以使用例項化 JavaScript Date 物件

const timestamp = 1530826365
new Date(timestamp * 1000)

如果我們傳遞0 ，我們將得到一個 Date 物件，表示 1970年1月1日（UTC）的時間：

new Date(0)

如果我們傳遞一個字串而不是一個數字，那麼Date物件使用parse 方法來確定您傳遞的日期。例如：

new Date('2018-07-22')
new Date('2018-07') //July 1st 2018, 00:00:00
new Date('2018') //Jan 1st 2018, 00:00:00
new Date('07/22/2018')
new Date('2018/07/22')
new Date('2018/7/22')
new Date('July 22, 2018')
new Date('July 22, 2018 07:22:13')
new Date('2018-07-22 07:22:13')
new Date('2018-07-22T07:22:13')
new Date('25 March 2018')
new Date('25 Mar 2018')
new Date('25 March, 2018')
new Date('March 25, 2018')
new Date('March 25 2018')
new Date('March 2018') //Mar 1st 2018, 00:00:00
new Date('2018 March') //Mar 1st 2018, 00:00:00
new Date('2018 MARCH') //Mar 1st 2018, 00:00:00
new Date('2018 march') //Mar 1st 2018, 00:00:00

這裡有很多靈活性。您可以在月份、日期或時間前面新增或省略前導0 ，例如new Date('2018-07-02 07:02:03') 和new Date('2018-7-2 7:2:3') 是一樣的結果。

小心月份/日期的位置，或者你可能會將月份誤解為日期。

你也可以使用Date.parse ：

Date.parse('2018-07-22')
Date.parse('2018-07') //July 1st 2018, 00:00:00
Date.parse('2018') //Jan 1st 2018, 00:00:00
Date.parse('07/22/2018')
Date.parse('2018/07/22')
Date.parse('2018/7/22')
Date.parse('July 22, 2018')
Date.parse('July 22, 2018 07:22:13')
Date.parse('2018-07-22 07:22:13')
Date.parse('2018-07-22T07:22:13')

Date.parse 將返回一個時間戳（以毫秒為單位）而不是 Date 物件。

您還可以傳遞一組代表日期各部分的有序值：年，月（從0開始），日，小時，分鐘，秒和毫秒：

new Date(2018, 6, 22, 7, 22, 13, 0)
new Date(2018, 6, 22)

最小值應該是 3 個引數，但是大多數 JavaScript 引擎都能解析 2 個或 1 個引數：

new Date(2018, 6) //Sun Jul 01 2018 00:00:00 GMT+0200 (Central European Summer Time)
new Date(2018) //Thu Jan 01 1970 01:00:02 GMT+0100 (Central European Standard Time)

在任何這些情況下，生成的日期都相對於計算機的時區。這意味著兩臺不同的計算機可能會為同一日期物件輸出不同的值。

JavaScript 會將沒有任何關於時區的資訊，會將日期視為 UTC ，並自動執行到當前計算機時區的轉換。

因此，總結一下，您可以通過4種方式建立新的Date物件：

不傳引數，建立一個表示“現在”的Date物件
傳遞 number ，表示從格林威治標準時間1970年1月1日00:00開始的毫秒數
傳遞一個字串，代表一個日期
傳遞一組引數，它們代表日期的不同部分

時區

初始化日期時，您可以傳遞時區，因此日期不會被假定為 UTC ，然後轉換為您當地的時區。

您可以通過以 +HOURS 格式新增時區來指定時區，或者通過新增括在括號中的時區名稱來指定時區：

new Date('July 22, 2018 07:22:13 +0700')
new Date('July 22, 2018 07:22:13 (CET)')

如果在括號中指定了錯誤的時區名稱，則 JavaScript 將預設為 UTC 而不會報錯。

如果您指定了錯誤的數字格式，JavaScript 將報“Invalid Date（無效日期）”的錯誤。

日期轉換和格式設定

給定 Date 物件，有很多方法將從該日期生成一個字串：

const date = new Date('July 22, 2018 07:22:13')

date.toString() // "Sun Jul 22 2018 07:22:13 GMT+0200 (Central European Summer Time)"
date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)"
date.toUTCString() //"Sun, 22 Jul 2018 05:22:13 GMT"
date.toDateString() //"Sun Jul 22 2018"
date.toISOString() //"2018-07-22T05:22:13.000Z" (ISO 8601 format)
date.toLocaleString() //"22/07/2018, 07:22:13"
date.toLocaleTimeString()//"07:22:13"
date.getTime() //1532236933000
date.getTime() //1532236933000

Date 物件的 getter 方法

Date 物件提供了幾種檢查其值的方法。這些都取決於計算機的當前時區：

const date = new Date('July 22, 2018 07:22:13')

date.getDate() //22
date.getDay() //0 (0 means sunday, 1 means monday..)
date.getFullYear() //2018
date.getMonth() //6 (starts from 0)
date.getHours() //7
date.getMinutes() //22
date.getSeconds() //13
date.getMilliseconds() //0 (not specified)
date.getTime() //1532236933000
date.getTimezoneOffset() //-120 （將取決於您的位置和檢查時間 - 這是夏季的CET）。 返回以分鐘為單位表示的時區差異

這些方法有等效的UTC版本，它們返回UTC值而不是適合您當前時區的值：

date.getUTCDate() //22
date.getUTCDay() //0 (0 means sunday, 1 means monday..)
date.getUTCFullYear() //2018
date.getUTCMonth() //6 (starts from 0)
date.getUTCHours() //5 (not 7 like above)
date.getUTCMinutes() //22
date.getUTCSeconds() //13
date.getUTCMilliseconds() //0 (not specified)

編輯日期

Date物件提供了幾種編輯日期值的方法：

const date = new Date('July 22, 2018 07:22:13')

date.setDate(newValue)
date.setDay(newValue)
date.setFullYear(newValue) //note: avoid setYear(), it's deprecated
date.setMonth(newValue)
date.setHours(newValue)
date.setMinutes(newValue)
date.setSeconds(newValue)
date.setMilliseconds(newValue)
date.setTime(newValue)
date.setTimezoneOffset(newValue)

setDay 和setMonth 從0 開始編號，因此例如 March 是 2 月。

有趣的事實：那些方法“重疊”，所以如果你，例如，設定date.setHours(48) ，它也會增加一天。

你可以在setHours() 中新增多個引數來設定分鐘，秒和毫秒：setHours(0, 0, 0, 0) – 這同樣適用於setMinutes 和setSeconds 。

對於 get 來說，也有一個相對應的 UTC set方法

const date = new Date('July 22, 2018 07:22:13')

date.setUTCDate(newalue)
date.setUTCDay(newValue)
date.setUTCFullYear(newValue)
date.setUTCMonth(newValue)
date.setUTCHours(newValue)
date.setUTCMinutes(newValue)
date.setUTCSeconds(newValue)
date.setUTCMilliseconds(newValue)

獲取當前時間戳

如果要以毫秒為單位獲取當前時間戳，可以使用簡寫

Date.now()

代替：

new Date().getTime()

JavaScript 關於日期的容錯處理

請注意。如果您使用天數計算超過一個月，則不會出現錯誤，日期將轉到下個月：

new Date(2018, 6, 40) //Thu Aug 09 2018 00:00:00 GMT+0200 (Central European Summer Time)

月，小時，分鐘，秒和毫秒都是如此。

根據區域設定格式化日期

現代瀏覽器（例外：UC瀏覽器）都 [支援](well supported) 國際化 API ，允許您翻譯日期。

它是由Intl Object 暴露出來的，這也有助於本地化數字，字串。

我們來了解一下Intl.DateTimeFormat() 。

以下是如何使用它。

根據計算機預設區域設定格式化日期：

// "12/22/2017"
const date = new Date('July 22, 2018 07:22:13')
new Intl.DateTimeFormat().format(date) //"22/07/2018" in my locale

根據不同的區域設定格式化日期：

new Intl.DateTimeFormat('en-US').format(date) //"7/22/2018"

Intl.DateTimeFormat 方法採用可選引數，允許您自定義輸出顯示小時，分鐘和秒：

const options = {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
}

new Intl.DateTimeFormat('en-US', options).format(date) //"7/22/2018, 7:22:13 AM"
new Intl.DateTimeFormat('it-IT', options2).format(date) //"22/7/2018, 07:22:13"

這裡是您可以使用的所有屬性的參考。

比較兩個日期

您可以使用Date.getTime() 計算兩個日期之間的差異：

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 22, 2018 07:22:13')
const diff = date2.getTime() - date1.getTime() //difference in milliseconds

以同樣的方式，您可以檢查兩個日期是否相等：

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 10, 2018 07:22:13')
if (date2.getTime() === date1.getTime()) {
//dates are equal
}

請記住，getTime() 返回的毫秒數，因此您需要在比較中考慮時間因素。July 10, 2018 07:22:13 不等於July 10, 2018 。在這種情況下，您可以使用setHours(0, 0, 0, 0) 重置時間。

英文原文：https://flaviocopes.com/javascript-dates/