您需要了解的有關JavaScript日期的所有信息

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

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

首先，讓我們承認時區的存在。

時區

世界上有數百個時區。在JavaScript 中，我們只關心兩個——本地時間和協調世界時(UTC)。

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

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

有了這些，我們可以討論創建日期。

創建日期

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

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

日期字符串方法

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

 new Date('1988-03-21')

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

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

這有一個很好的理由。

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

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

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

以下是值的含義：

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

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

 new Date('2019-06-11')

請特別注意此處。使用日期字符串創建日期存在一個很大的問題。如果您將此日期console.log ，則可以發現問題。

如果您居住在落後於GMT 的地區，您將獲得顯示為6 月10 日的日期。

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

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

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

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

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

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

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

如果您想創建日期，請使用參數或時間戳。

使用參數創建日期

您可以傳入最多七個參數來創建日期/時間。

1. 年份： 4 位數年份。
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)

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

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

 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)

注意使用參數創建的日期都是本地時間？

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

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

使用時間戳創建日期

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

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

不帶參數

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

 new Date()

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

創建日期的總結

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

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

格式化日期

大多數編程語言都提供格式化工具來創建任何您想要的日期格式。例如，在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

如果您需要自定義格式，則需要自己創建。

編寫自定義日期格式

假設您想要類似Thu, 23 January 2019 的內容。要創建此值，您需要了解（並使用）Date 對象附帶的日期方法。

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

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

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

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

獲取Thu 和January 比較困難。

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

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

由於月份是從零開始的，我們可以使用數組而不是對象。它會產生相同的結果。

 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 也執行相同的操作。這次，您需要一個包含一周七天的數組。

 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

然後，您將創建的所有變量組合起來以獲取格式化的字符串。

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

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

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

1. getHours ：根據本地時間獲取小時（0-23）。
2. getMinutes ：根據本地時間獲取分鐘（0-59）。
3. getSeconds ：根據本地時間獲取秒（0-59）。
4. getMilliseconds ：根據本地時間獲取毫秒（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 位數年份。
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 中的月份是從零開始的！）

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

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

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

 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 ：根據本地時間獲取4 位數年份
2. getMonth ：根據本地時間獲取月份（0-11）。
3. getDate ：根據本地時間獲取月份中的日期（1-31）。
4. getHours ：根據本地時間獲取小時（0-23）。
5. getMinutes ：根據本地時間獲取分鐘（0-59）。
6. getSeconds ：根據本地時間獲取秒（0-59）。
7. getMilliseconds ：根據本地時間獲取毫秒（0-999）。

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

讓我們介紹這兩種方法。

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

第一種方法（設置方法）

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

首先，我們創建一個新的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創建最終日期。

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

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

// 創建一個新的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)

這意味著在創建增量時，您無需擔心計算分鐘、小時、日期、月份等。 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，這是我創建的一個課程，旨在教人們他們需要了解的關於JavaScript 的所有知識。

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

看看。您可能會發現它很有用。

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

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