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

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

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

時區(qū)

世界上有數(shù)百個時區(qū)。在JavaScript 中，我們只關心兩個——本地時間和協(xié)調世界時(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，則日期將設置為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 日的日期。

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

發(fā)生這種情況是因為日期字符串方法具有特殊行為：如果您創(chuàng)建日期（不指定時間），則會獲得設置為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 日起經過的毫秒數(shù)（1970 年1 月1 日也稱為Unix 紀元時間）。根據(jù)我的經驗，您很少使用時間戳來創(chuàng)建日期。您只使用時間戳來比較不同的日期（稍後將詳細介紹）。

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

不帶參數(shù)

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

 new Date()

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

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

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

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

格式化日期

大多數(shù)編程語言都提供格式化工具來創(chuàng)建任何您想要的日期格式。例如，在PHP 中，您可以將date("d MY")寫成類似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)建。

編寫自定義日期格式

假設您想要類似Thu, 23 January 2019 的內容。要創(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）結束。

為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ù)組而不是對象。它會產生相同的結果。

 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. 從另一個日期設置特定的日期/時間值。
2. 從另一個日期添加/減去增量。

設置特定的日期/時間

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

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

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

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

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

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

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

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

注意：上述設置方法會更改原始日期對象。在實踐中，我們不應更改對象（此處詳細說明原因）。我們應該在新的日期對像上執(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 上更流行。它簡潔明了，但難以理解。第二種方法比較冗長，但更容易理解。

讓我們介紹這兩種方法。

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

第一種方法（設置方法）

// 假設今天是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)

設置方法的完整代碼：

 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 會自動為您重新計算日期。

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

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

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

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

這就是您需要了解的關於JavaScript 本機Date 對象的所有內容。

關於JavaScript 中Date 的更多信息

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

有興趣學習更多JavaScript 嗎？

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

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

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

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

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