JavaScript 的 Date 對象常常令人困惑，以至于我們一需要處理日期和時間就求助于庫（如 Date-fns 和 Moment）。

但我們并不總是需要庫。如果您知道需要注意什么，Date 實際上可以非常簡單。在本文中，我將引導您了解 Date 對象的所有知識。

首先，讓我們承認時區(qū)的存在。

時區(qū)

世界上有數(shù)百個時區(qū)。在 JavaScript 中，我們只關(guān)心兩個——本地時間和協(xié)調(diào)世界時 (UTC)。

• 本地時間 指的是您計算機所在的時區(qū)。
• UTC 在實踐中與格林威治標準時間 (GMT) 同義。

默認情況下，JavaScript 中幾乎所有日期方法（除一種外）都提供本地時間的日期/時間。只有在指定 UTC 時，您才能獲得 UTC。

有了這些，我們可以討論創(chuàng)建日期。

創(chuàng)建日期

您可以使用 new Date() 創(chuàng)建日期。使用 new Date() 有四種可能的方法：

1. 使用日期字符串
2. 使用日期參數(shù)
3. 使用時間戳
4. 不帶參數(shù)

日期字符串方法

在日期字符串方法中，您可以通過將日期字符串傳遞到 new Date 來創(chuàng)建日期。

new Date('1988-03-21')

我們在編寫日期時傾向于使用日期字符串方法。這是很自然的，因為我們一生都在使用日期字符串。

如果我寫 21-03-1988，您不會有任何問題推斷出它是 1988 年 3 月 21 日。對吧？但是如果您在 JavaScript 中寫 21-03-1988，則會得到 Invalid Date。

這有一個很好的理由。

我們在世界不同地區(qū)對日期字符串的解釋不同。例如，11-06-2019 可能是 2019 年 6 月 11 日或 2019 年 11 月 6 日。但您無法確定我指的是哪一個，除非您知道我使用的日期系統(tǒng)。

在 JavaScript 中，如果您想使用日期字符串，則需要使用全世界都接受的格式。這些格式之一是 ISO 8601 擴展格式。

<code>// ISO 8601 擴展格式
`YYYY-MM-DDTHH:mm:ss.sssZ`</code>

以下是值的含義：

• YYYY：4 位數(shù)年份
• MM：2 位數(shù)月份（1 月為 01，12 月為 12）
• DD：2 位數(shù)日期（0 到 31）
• -：日期分隔符
• T：指示時間的開始
• HH：24 位數(shù)小時（0 到 23）
• mm：分鐘（0 到 59）
• ss：秒（0 到 59）
• sss：毫秒（0 到 999）
• :: 時間分隔符
• Z：如果存在 Z，則日期將設(shè)置為 UTC。如果不存在 Z，則為本地時間。（這僅適用于提供時間的情況。）

如果您要創(chuàng)建日期，則小時、分鐘、秒和毫秒是可選的。因此，如果您想為 2019 年 6 月 11 日創(chuàng)建日期，您可以這樣寫：

new Date('2019-06-11')

請?zhí)貏e注意此處。使用日期字符串創(chuàng)建日期存在一個很大的問題。如果您將此日期 console.log，則可以發(fā)現(xiàn)問題。

如果您居住在落后于 GMT 的地區(qū)，您將獲得顯示為 6 月 10 日的日期。

如果您居住在領(lǐng)先于 GMT 的地區(qū)，您將獲得顯示為 6 月 11 日的日期。

發(fā)生這種情況是因為日期字符串方法具有特殊行為：如果您創(chuàng)建日期（不指定時間），則會獲得設(shè)置為 UTC 的日期。

在上述情況下，當您編寫 new Date('2019-06-11') 時，您實際上創(chuàng)建的日期是 2019 年 6 月 11 日，UTC 凌晨 12 點。這就是為什么居住在落后于 GMT 的地區(qū)的人們會得到 6 月 10 日而不是 6 月 11 日的原因。

如果您想使用日期字符串方法在本地時間創(chuàng)建日期，則需要包含時間。包含時間時，您至少需要編寫 HH 和 mm（否則 Google Chrome 會返回無效日期）。

new Date('2019-06-11T00:00')

使用日期字符串的整個本地時間與 UTC 問題可能是難以捕捉的錯誤來源。因此，我建議您不要使用日期字符串創(chuàng)建日期。

（順便說一句，MDN 警告不要使用日期字符串方法，因為瀏覽器可能會以不同的方式解析日期字符串）。

如果您想創(chuàng)建日期，請使用參數(shù)或時間戳。

使用參數(shù)創(chuàng)建日期

您可以傳入最多七個參數(shù)來創(chuàng)建日期/時間。

1. 年份：4 位數(shù)年份。
2. 月份：月份（0-11）。月份是從零開始的。如果省略，則默認為 0。
3. 日期：月份中的日期（1-31）。如果省略，則默認為 1。
4. 小時：一天中的小時（0-23）。如果省略，則默認為 0。
5. 分鐘：分鐘（0-59）。如果省略，則默認為 0。
6. 秒：秒（0-59）。如果省略，則默認為 0。
7. 毫秒：毫秒（0-999）。如果省略，則默認為 0。

// 2019 年 6 月 11 日，上午 5:23:59，本地時間
new Date(2019, 5, 11, 5, 23, 59)

許多開發(fā)人員（包括我自己）避免使用參數(shù)方法，因為它看起來很復雜。但實際上它很簡單。

嘗試從左到右讀取數(shù)字。從左到右，您以遞減的幅度插入值：年、月、日、小時、分鐘、秒和毫秒。

new Date(2017, 3, 22, 5, 23, 50)

// 如果您遵循從左到右的公式，則可以輕松讀取此日期。
// 年份：2017，
// 月份：四月（因為月份是從零開始的）
// 日期：22
// 小時：05
// 分鐘：23
// 秒：50

Date 最成問題的部分是月份值是從零開始的，即 1 月 === 0，2 月 === 1，3 月 === 2，依此類推。

JavaScript 是從零開始的有點奇怪（顯然是因為 Java 就是這樣做的），但與其爭論為什么 1 月應該是 1（而不是 0），不如接受 JavaScript 中月份是從零開始的。一旦您接受了這個事實，日期就變得更容易處理了。

以下是一些供您熟悉的更多示例：

// 1988 年 3 月 21 日，凌晨 12 點，本地時間。
new Date(1988, 2, 21)

// 2019 年 12 月 25 日，上午 8 點，本地時間。
new Date(2019, 11, 25, 8)

// 2023 年 11 月 6 日，凌晨 2:20，本地時間
new Date(2023, 10, 6, 2, 20)

// 2019 年 6 月 11 日，上午 5:23:59，本地時間
new Date(2019, 5, 11, 5, 23, 59)

注意使用參數(shù)創(chuàng)建的日期都是本地時間？

這是使用參數(shù)的額外好處之一——您不會混淆本地時間和 UTC。如果您需要 UTC，您可以通過這種方式在 UTC 中創(chuàng)建日期：

// 2019 年 6 月 11 日，凌晨 12 點，UTC。
new Date(Date.UTC(2019, 5, 11))

使用時間戳創(chuàng)建日期

在 JavaScript 中，時間戳是從 1970 年 1 月 1 日起經(jīng)過的毫秒數(shù)（1970 年 1 月 1 日也稱為 Unix 紀元時間）。根據(jù)我的經(jīng)驗，您很少使用時間戳來創(chuàng)建日期。您只使用時間戳來比較不同的日期（稍后將詳細介紹）。

// 2019 年 6 月 11 日，上午 8 點（在我的本地時間，新加坡）
new Date(1560211200000)

不帶參數(shù)

如果您不帶任何參數(shù)創(chuàng)建日期，則會獲得設(shè)置為當前時間（本地時間）的日期。

new Date()

您可以從圖像中看出，當我撰寫本文時，新加坡時間是 2019 年 5 月 25 日上午 11:10。

創(chuàng)建日期的總結(jié)

1. 您可以使用 new Date() 創(chuàng)建日期。
2. 有四種可能的語法：
   1. 使用日期字符串
   2. 使用參數(shù)
   3. 使用時間戳
   4. 不帶參數(shù)
3. 絕不要 使用日期字符串方法創(chuàng)建日期。
4. 最好使用參數(shù)方法創(chuàng)建日期。
5. 請記?。ú⒔邮埽㎎avaScript 中月份是從零開始的。

接下來，讓我們談談將日期轉(zhuǎn)換為可讀字符串。

格式化日期

大多數(shù)編程語言都提供格式化工具來創(chuàng)建任何您想要的日期格式。例如，在 PHP 中，您可以將 date("d M Y") 寫成類似 23 Jan 2019 的日期。

但在 JavaScript 中沒有簡單的方法來格式化日期。

本機 Date 對象帶有七種格式化方法。這七種方法中的每一種都為您提供一個特定值（而且它們非常無用）。

const date = new Date(2019, 0, 23, 17, 23, 42)

1. toString 為您提供 Wed Jan 23 2019 17:23:42 GMT 0800 (Singapore Standard Time)
2. toDateString 為您提供 Wed Jan 23 2019
3. toLocaleString 為您提供 23/01/2019, 17:23:42
4. toLocaleDateString 為您提供 23/01/2019
5. toGMTString 為您提供 Wed, 23 Jan 2019 09:23:42 GMT
6. toUTCString 為您提供 Wed, 23 Jan 2019 09:23:42 GMT
7. toISOString 為您提供 2019-01-23T09:23:42.079Z

如果您需要自定義格式，則需要自己創(chuàng)建。

編寫自定義日期格式

假設(shè)您想要類似 Thu, 23 January 2019 的內(nèi)容。要創(chuàng)建此值，您需要了解（并使用）Date 對象附帶的日期方法。

要獲取日期，您可以使用這四種方法：

1. getFullYear：根據(jù)本地時間獲取 4 位數(shù)年份
2. getMonth：根據(jù)本地時間獲取月份（0-11）。月份是從零開始的。
3. getDate：根據(jù)本地時間獲取月份中的日期（1-31）。
4. getDay：根據(jù)本地時間獲取星期幾（0-6）。星期幾從星期日（0）開始，到星期六（6）結(jié)束。

為 Thu, 23 January 2019 創(chuàng)建 23 和 2019 很簡單。我們可以使用 getFullYear 和 getDate 來獲取它們。

const d = new Date(2019, 0, 23)
const year = d.getFullYear() // 2019
const date = d.getDate() // 23

獲取 Thu 和 January 比較困難。

要獲取 January，您需要創(chuàng)建一個對象，將所有十二個月的值映射到它們各自的名稱。

const months = {
  0: 'January',
  1: 'February',
  2: 'March',
  3: 'April',
  4: 'May',
  5: 'June',
  6: 'July',
  7: 'August',
  8: 'September',
  9: 'October',
  10: 'November',
  11: 'December'
}

由于月份是從零開始的，我們可以使用數(shù)組而不是對象。它會產(chǎn)生相同的結(jié)果。

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

要獲取 January，您需要：

1. 使用 getMonth 從日期中獲取從零開始的月份。
2. 從 months 中獲取月份名稱

const monthIndex = d.getMonth()
const monthName = months[monthIndex]
console.log(monthName) // January

簡寫版本：

const monthName = months[d.getMonth()]
console.log(monthName) // January

您對 Thu 也執(zhí)行相同的操作。這次，您需要一個包含一周七天的數(shù)組。

const days = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]

然后你：

1. 使用 getDay 獲取 dayIndex
2. 使用 dayIndex 獲取 dayName

const dayIndex = d.getDay()
const dayName = days[dayIndex] // Thu

簡寫版本：

const dayName = days[d.getDay()] // Thu

然后，您將創(chuàng)建的所有變量組合起來以獲取格式化的字符串。

const formatted = `${dayName}, ${date} ${monthName} ${year}`
console.log(formatted) // Thu, 23 January 2019

是的，這很繁瑣。但是一旦掌握了竅門，它就不可能了。

如果您需要創(chuàng)建自定義格式的時間，可以使用以下方法：

1. getHours：根據(jù)本地時間獲取小時（0-23）。
2. getMinutes：根據(jù)本地時間獲取分鐘（0-59）。
3. getSeconds：根據(jù)本地時間獲取秒（0-59）。
4. getMilliseconds：根據(jù)本地時間獲取毫秒（0-999）。

接下來，讓我們談談比較日期。

比較日期

如果您想知道一個日期是否早于或晚于另一個日期，您可以直接使用 >、= 和

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier 
<p>如果您想檢查兩個日期是否恰好落在同一時間，則比較起來更困難。您不能使用 == 或 === 比較它們。</p>
<pre class="brush:php;toolbar:false">const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false

要檢查兩個日期是否恰好落在同一時間，您可以使用 getTime 檢查它們的時間戳。

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true

如果您想檢查兩個日期是否在同一天，您可以檢查它們的 getFullYear、getMonth 和 getDate 值。

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate() === b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 2019 年 1 月 26 日，上午 10 點
const b = new Date(2019, 0, 26, 12) // 2019 年 1 月 26 日，中午 12 點
console.log(isSameDay(a, b)) // true

還有一件事我們必須介紹。

從另一個日期獲取日期

有兩種可能的情況，您需要從另一個日期獲取日期。

1. 從另一個日期設(shè)置特定的日期/時間值。
2. 從另一個日期添加/減去增量。

設(shè)置特定的日期/時間

您可以使用這些方法從另一個日期設(shè)置日期/時間：

1. setFullYear：在本地時間設(shè)置 4 位數(shù)年份。
2. setMonth：在本地時間設(shè)置月份。
3. setDate：在本地時間設(shè)置月份中的日期。
4. setHours：在本地時間設(shè)置小時。
5. setMinutes：在本地時間設(shè)置分鐘。
6. setSeconds：在本地時間設(shè)置秒。
7. setMilliseconds：在本地時間設(shè)置毫秒。

例如，如果您想將日期設(shè)置為該月的第 15 天，可以使用 setDate(15)。

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 2019 年 1 月 15 日

如果您想將月份設(shè)置為 6 月，可以使用 setMonth。（記住，JavaScript 中的月份是從零開始的?。?/p>

const d = new Date(2019, 0, 10)
d.setMonth(5)

console.log(d) // 2019 年 6 月 10 日

注意：上述設(shè)置方法會更改原始日期對象。在實踐中，我們不應更改對象（此處詳細說明原因）。我們應該在新的日期對象上執(zhí)行這些操作。

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 2019 年 1 月 10 日
console.log(newDate) // 2019 年 6 月 10 日

從另一個日期添加/減去增量

增量是變化。從另一個日期添加/減去增量是指：您想從另一個日期獲取一個距離為 X 的日期。它可以是 X 年、X 月、X 天等。

要獲取增量，您需要知道當前日期的值。您可以使用以下方法獲取它：

1. getFullYear：根據(jù)本地時間獲取 4 位數(shù)年份
2. getMonth：根據(jù)本地時間獲取月份（0-11）。
3. getDate：根據(jù)本地時間獲取月份中的日期（1-31）。
4. getHours：根據(jù)本地時間獲取小時（0-23）。
5. getMinutes：根據(jù)本地時間獲取分鐘（0-59）。
6. getSeconds：根據(jù)本地時間獲取秒（0-59）。
7. getMilliseconds：根據(jù)本地時間獲取毫秒（0-999）。

添加/減去增量有兩種常用方法。第一種方法在 Stack Overflow 上更流行。它簡潔明了，但難以理解。第二種方法比較冗長，但更容易理解。

讓我們介紹這兩種方法。

假設(shè)您想從今天開始獲取三天后的日期。在此示例中，我們還假設(shè)今天是 2019 年 3 月 28 日。（當我們使用固定日期時，更容易解釋）。

第一種方法（設(shè)置方法）

// 假設(shè)今天是 2019 年 3 月 28 日 const today = new Date(2019, 2, 28)

首先，我們創(chuàng)建一個新的 Date 對象（這樣我們就不會更改原始日期）

const finalDate = new Date(today)

接下來，我們需要知道我們要更改的值。由于我們正在更改日期，我們可以使用 getDate 獲取日期。

const currentDate = today.getDate()

我們想要一個比今天晚三天的日期。我們將使用將增量 (3) 添加到當前日期。

finalDate.setDate(currentDate   3)

設(shè)置方法的完整代碼：

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate()   3)

console.log(finalDate) // 2019 年 3 月 31 日

第二種方法（新的 Date 方法）

在這里，我們使用 getFullYear、getMonth、getDate 和其他 getter 方法，直到我們找到要更改的值的類型。然后，我們使用 new Date 創(chuàng)建最終日期。

const today = new Date(2019, 2, 28)

// 獲取所需的值
const year = today.getFullYear()
const month = today.getMonth()
const day = today.getDate()

// 創(chuàng)建一個新的 Date（帶有增量）
const finalDate = new Date(year, month, day   3)

console.log(finalDate) // 2019 年 3 月 31 日

這兩種方法都有效。選擇一種并堅持使用它。

自動日期校正

如果您為 Date 提供超出其可接受范圍的值，JavaScript 會自動為您重新計算日期。

以下是一個示例。假設(shè)我們將日期設(shè)置為 2019 年 3 月 33 日。（日歷上沒有 3 月 33 日）。在這種情況下，JavaScript 會自動將 3 月 33 日調(diào)整為 4 月 2 日。

// 3 月 33 日 => 4 月 2 日
new Date(2019, 2, 33)

這意味著在創(chuàng)建增量時，您無需擔心計算分鐘、小時、日期、月份等。JavaScript 會自動為您處理。

// 3 月 33 日 => 4 月 2 日
new Date(2019, 2, 30   3)

這就是您需要了解的關(guān)于 JavaScript 本機 Date 對象的所有內(nèi)容。

關(guān)于 JavaScript 中 Date 的更多信息

• 了解 JavaScript 中的日期和時間 (DigitalOcean)
• 探索 JavaScript Date 對象 (Alligator.io)

有興趣學習更多 JavaScript 嗎？

如果您覺得此 Date 簡介有用，您可能會喜歡 Learn JavaScript，這是我創(chuàng)建的一個課程，旨在教人們他們需要了解的關(guān)于 JavaScript 的所有知識。

在本課程中，我將介紹您需要了解的基本概念，然后向您展示如何使用您學到的概念來構(gòu)建現(xiàn)實世界的組件。

看看。您可能會發(fā)現(xiàn)它很有用。

同時，如果您有任何 JavaScript 問題，請隨時與我聯(lián)系。我會盡力創(chuàng)建免費文章來回答您的問題。

以上是您需要了解的有關(guān)JavaScript日期的所有信息的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！