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

但我們并不總是需要庫(kù)。如果您知道需要注意什么，Date 實(shí)際上可以非常簡(jiǎn)單。在本文中，我將引導(dǎo)您了解 Date 對(duì)象的所有知識(shí)。

首先，讓我們承認(rèn)時(shí)區(qū)的存在。

時(shí)區(qū)

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

• 本地時(shí)間 指的是您計(jì)算機(jī)所在的時(shí)區(qū)。
• UTC 在實(shí)踐中與格林威治標(biāo)準(zhǔn)時(shí)間 (GMT) 同義。

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

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

創(chuàng)建日期

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

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

日期字符串方法

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

new Date('1988-03-21')

我們?cè)诰帉懭掌跁r(shí)傾向于使用日期字符串方法。這是很自然的，因?yàn)槲覀円簧荚谑褂萌掌谧址?/p>

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

這有一個(gè)很好的理由。

我們?cè)谑澜绮煌貐^(qū)對(duì)日期字符串的解釋不同。例如，11-06-2019 可能是 2019 年 6 月 11 日或 2019 年 11 月 6 日。但您無(wú)法確定我指的是哪一個(gè)，除非您知道我使用的日期系統(tǒng)。

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

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

以下是值的含義：

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

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

new Date('2019-06-11')

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

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

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

發(fā)生這種情況是因?yàn)槿掌谧址椒ň哂刑厥庑袨椋?strong>如果您創(chuàng)建日期（不指定時(shí)間），則會(huì)獲得設(shè)置為 UTC 的日期。

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

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

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

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

（順便說(shuō)一句，MDN 警告不要使用日期字符串方法，因?yàn)闉g覽器可能會(huì)以不同的方式解析日期字符串）。

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

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

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

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

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

許多開(kāi)發(fā)人員（包括我自己）避免使用參數(shù)方法，因?yàn)樗雌饋?lái)很復(fù)雜。但實(shí)際上它很簡(jiǎn)單。

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

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

// 如果您遵循從左到右的公式，則可以輕松讀取此日期。
// 年份：2017，
// 月份：四月（因?yàn)樵路菔菑牧汩_(kāi)始的）
// 日期：22
// 小時(shí)：05
// 分鐘：23
// 秒：50

Date 最成問(wèn)題的部分是月份值是從零開(kāi)始的，即 1 月 === 0，2 月 === 1，3 月 === 2，依此類推。

JavaScript 是從零開(kāi)始的有點(diǎn)奇怪（顯然是因?yàn)?Java 就是這樣做的），但與其爭(zhēng)論為什么 1 月應(yīng)該是 1（而不是 0），不如接受 JavaScript 中月份是從零開(kāi)始的。一旦您接受了這個(gè)事實(shí)，日期就變得更容易處理了。

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

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

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

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

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

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

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

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

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

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

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

不帶參數(shù)

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

new Date()

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

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

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

接下來(lái)，讓我們談?wù)剬⑷掌谵D(zhuǎn)換為可讀字符串。

格式化日期

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

但在 JavaScript 中沒(méi)有簡(jiǎn)單的方法來(lái)格式化日期。

本機(jī) Date 對(duì)象帶有七種格式化方法。這七種方法中的每一種都為您提供一個(gè)特定值（而且它們非常無(wú)用）。

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)容。要?jiǎng)?chuàng)建此值，您需要了解（并使用）Date 對(duì)象附帶的日期方法。

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

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

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

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

獲取 Thu 和 January 比較困難。

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

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'
}

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

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

要獲取 January，您需要：

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

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

簡(jiǎn)寫版本：

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

您對(duì) Thu 也執(zhí)行相同的操作。這次，您需要一個(gè)包含一周七天的數(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

簡(jiǎn)寫版本：

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

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

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

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

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

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

接下來(lái)，讓我們談?wù)劚容^日期。

比較日期

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

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

console.log(earlier 
<p>如果您想檢查兩個(gè)日期是否恰好落在同一時(shí)間，則比較起來(lái)更困難。您不能使用 == 或 === 比較它們。</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

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

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

如果您想檢查兩個(gè)日期是否在同一天，您可以檢查它們的 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 點(diǎn)
const b = new Date(2019, 0, 26, 12) // 2019 年 1 月 26 日，中午 12 點(diǎn)
console.log(isSameDay(a, b)) // true

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

從另一個(gè)日期獲取日期

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

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

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

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

1. setFullYear：在本地時(shí)間設(shè)置 4 位數(shù)年份。
2. setMonth：在本地時(shí)間設(shè)置月份。
3. setDate：在本地時(shí)間設(shè)置月份中的日期。
4. setHours：在本地時(shí)間設(shè)置小時(shí)。
5. setMinutes：在本地時(shí)間設(shè)置分鐘。
6. setSeconds：在本地時(shí)間設(shè)置秒。
7. setMilliseconds：在本地時(shí)間設(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 中的月份是從零開(kāi)始的?。?/p>

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

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

注意：上述設(shè)置方法會(huì)更改原始日期對(duì)象。在實(shí)踐中，我們不應(yīng)更改對(duì)象（此處詳細(xì)說(shuō)明原因）。我們應(yīng)該在新的日期對(duì)象上執(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 日

從另一個(gè)日期添加/減去增量

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

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

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

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

讓我們介紹這兩種方法。

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

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

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

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

const finalDate = new Date(today)

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

const currentDate = today.getDate()

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

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)建一個(gè)新的 Date（帶有增量）
const finalDate = new Date(year, month, day   3)

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

這兩種方法都有效。選擇一種并堅(jiān)持使用它。

自動(dòng)日期校正

如果您為 Date 提供超出其可接受范圍的值，JavaScript 會(huì)自動(dòng)為您重新計(jì)算日期。

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

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

這意味著在創(chuàng)建增量時(shí)，您無(wú)需擔(dān)心計(jì)算分鐘、小時(shí)、日期、月份等。JavaScript 會(huì)自動(dòng)為您處理。

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

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

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

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

有興趣學(xué)習(xí)更多 JavaScript 嗎？

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

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

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

同時(shí)，如果您有任何 JavaScript 問(wèn)題，請(qǐng)隨時(shí)與我聯(lián)系。我會(huì)盡力創(chuàng)建免費(fèi)文章來(lái)回答您的問(wèn)題。

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