在 JavaScript 中將字串轉換為日期

  1. 使用 new Date() 函式在 JavaScript 中將字串轉換為日期
  2. 在 JavaScript 中使用 Date.parse() 函式將字串轉換為日期
  3. 在 JavaScript 中拆分字串並將其轉換為日期
  4. 結論

有時需要將字串轉換為日期格式。該字串可以是作為字串儲存在資料庫中的日期值,也可以是從 API 返回的值。無論哪種情況,都不能在日期選擇器或輸入型別 date 中直接使用此字串值。因此,需要將字串轉換為日期物件才能在 HTML UI 中顯示。由於採用字串格式,因此無法執行特定於日期的操作。因此,我們需要將字串轉換為日期物件。在這裡,我們列出了幾種將字串轉換為日期的方法:

  • new Date()
  • Date.parse()
  • 拆分並轉換為日期

使用 new Date() 函式在 JavaScript 中將字串轉換為日期

將字串轉換為日期的最常用方法是使用 new Date() 函式。new Date() 接受下面描述的各種形式的引數,但是返回一個日期物件。

  1. 沒有引數作為引數。如果未將任何引數傳遞給 new Date() 函式,則 new Date() 將返回當前系統日期和時間,包括本地系統時間中的時區資訊。
  2. 傳遞日期物件作為引數。new Date() 將返回一個日期物件,如作為引數傳遞的日期字串所示。
  3. 傳遞字串日期。new Date('2018-12-3') 函式最有趣的部分是,它可以將以字串格式傳遞的日期作為引數轉換為日期格式。我們將對此進行詳細討論。

將字串日期作為引數傳遞

當我們以字串格式將日期傳遞給 new Date() 時,它將轉換為日期物件。字串格式必須為 ISO 8601格式 - YYYY-MM-DD,才能正常使用。此方法可能無法將其他日期格式轉換為日期物件。例如,參考以下程式碼:

new Date("2021-05-23");
new Date("2020/2/29");
new Date("2020-14-03");
new Date("14-02-2021");

輸出:

Sun May 23 2021 05:30:00 GMT+0530 (India Standard Time)
Sat Feb 29 2020 00:00:00 GMT+0530 (India Standard Time)
Invalid Date
Invalid Date

從上面的示例中可以看到,日期唯一接受的字串格式是 2021-05-232020/2/29new Date() 函式可以處理格式為 YYYY-MM-DDYYYY/MM/DD 的字串。如果我們使用的其他字串格式不符合 ISO 8601 標準,則 new Date() 將無法解析日期,並將返回為 Invalid date

備註

  • new Date() 僅可用於將符合 ISO 8601 格式 YYYY-MM-DD hh:mm:ss 的字串轉換為日期。
  • 對於 new Date() 無法理解的其他格式,最好將字串拆分並將其作為引數傳遞給 new Date(),如本文中後續所介紹。
  • new Date() 也可以轉換格式為 01 Mar 2020 12:30 或什至 MM DD YYYY HH:mm 的字串。如果我們使用從後端通過 API 傳遞的值進行轉換,則應確保傳遞的格式符合 new Date() 函式所理解的,最好檢查 new Date() 返回有效的日期物件。否則,程式碼可能會中斷。

在 JavaScript 中使用 Date.parse() 函式將字串轉換為日期

Date.parse() 是轉換字串日期的備選方案。它返回一個數字值而不是日期物件。因此,如果你希望使用日期物件,則需要進一步處理。它將解析的日期轉換為一個數字,該數字表示自 1970 年 1 月 1 日午夜以來經過的毫秒數。它類似於時間戳格式,區別在於 Date.parse() 返回毫秒值,而不是秒。

Date.parse("2020-11-21")
Date.parse("2019-01-01T12:30:00.000Z")
Date.parse("20-11-2021")
Date.parse("11-20-2021")

輸出:

1605916800000
1546345800000
NaN
1637346600000

值得注意的是,在可以接受的輸入值型別方面,Date.parse()new Date() 相同,但是可以更好地手動檢查日期是否為有效格式。這樣的方法非常有用,特別是當我們處理 API 響應值時。在這種情況下,我們可能需要執行檢查以確保後端返回的值符合 Date.parse()new Date() 函式所接受的日期格式。只需執行 isNaN() 檢查,即可幫助識別並安全地使用日期轉換方法。

let stringsFromAPI = ["2020-11-21", "20-11-2021"];

stringsFromAPI.forEach( (d) => {
    if (!isNaN(Date.parse(d))) {
        console.log(new Date(d));
    }    
})

輸出:

Sat Nov 21 2020 05:30:00 GMT+0530 (India Standard Time)

請注意,此處的日期 20-11-2021 的格式為 DD-MM-YYYY。因此,Date.parse() 函式或 new Date() 函式將無法理解它。因此,如果 stringsFromAPI 是來自後端的值,則上述函式將僅轉換那些符合可接受格式的日期。!isNaN(Date.parse(d)) 靜默拒絕不正確的日期值,並記錄成功轉換的值。

備註

  • Date.parse()new Date() 相似,但返回型別不同,這使得它適合檢查日期值的格式是否正確,還可以通過使用來分配日期 dateObj.setTime(Date.parse(DateString))
  • 與 Unix 時間戳相比,Date.parse() 返回的毫秒數可用於對日期進行精確比較,即使不使用 new Date() 將其轉換為實際的日期物件也是如此。
  • Date.parse() 內部使用 new Date() 進行日期解析,因此 Date.parse() 函式也支援 new Date() 函式接受的格式。

在 JavaScript 中拆分字串並將其轉換為日期

Date.parse()new Date() 函式都是基於 ISO 8601 擴充套件日期格式設計的。有時,如果日期不符合預期的格式,我們將不得不通過拆分日期字串,提取值並將其轉換為日期物件來手動進行計算。令人驚訝的是,new Date() 還支援將 date 引數作為引數傳遞,並且我們將 date 物件作為輸出。

根據引數建立日期的語法:

new Date(yearValue, IndexOfMonth, dayValue, hours, minutes, seconds)

其中,

  • yearValue:應符合 ISO 8061 YYYY 格式。例如 2021。如果我們以 YY 格式指定一個值,它將會被錯誤地接受。例如,僅將 2021 提到 21 會被認為是 1921 年而不是 2021 年。
  • IndexOfMonth:從索引 0 開始。因此,從 Month 值中減去 1。例如,對於 3 月,該值為 3,但 monthIndex 將為 2(即 3-1 = 2)。本月指數通常應在 0-11 範圍內
  • dayValue:表示一個月中的某天。它應在 1-31 範圍內,具體取決於一個月中的天數。例如:對於 21-05-2021,日期值為 21
  • hours:一天中的小時。例如 10 點。
  • minutes:過去一個小時的分鐘數
  • seconds:保留超過一分鐘的秒數。

以下是一個函式,該函式採用具有自定義日期格式的字串-DD-MM-YYYYTHH:mm:SS,並返回一個日期物件。

function convertFromStringToDate(responseDate) {
    let dateComponents = responseDate.split('T');
    let datePieces = dateComponents[0].split("-");
    let timePieces = dateComponents[1].split(":");
    return(new Date(datePieces[2], (datePieces[1] - 1), datePieces[0],
                         timePieces[0], timePieces[1], timePieces[2]))
}

convertFromStringToDate("21-03-2020T11:20:30")

輸出:

Sat Mar 21 2020 11:20:30 GMT+0530 (India Standard Time)

結論

只要字串符合 ISO 8601 格式,最常用的 new Date() 函式對於將字串日期轉換為日期物件非常有用。與 new Date() 相比,Date.parse() 函式的不同之處在於,它返回一個數值,該數值包含自 1970 年 1 月 1 日以來經過的毫秒數,該毫秒數直到作為字串引數傳遞的日期為止已經過去了。通過分割日期字串並將日期組成部分作為引數傳遞給 new Date() 函式,可以轉換不同的日期格式。

相關文章 - JavaScript String

  • JavaScript 字串加密和解密
  • JavaScript 刪除字串中的第一個字元