對于開發人員來說,處理日期和時間可能是最乏味和最復雜的任務之一。雖然基本操作和日期比較可能很簡單,但除此之外的任何事情通常都需要額外的時間和考慮。幸運的是,大多數編程語言和框架都提供內置 API 來簡化日期和時間操作。

JavaScript 提供了一個內置Date 對象,使您可以輕松地操作日期和時間,但操作只是我們所做的一部分。當我們需要格式化一個Date 對象以將其表示形式存儲在數據庫中或將其傳輸到另一個系統時,JavaScript 可以輕松處理這些情況。然而,用自定義格式表示Date 對象(向最終用戶顯示日期和時間時的常見要求)提出了挑戰。
在本教程中,我們將深入研究將 JavaScript 對象格式化為常見格式的藝術Date ,為您提供有效應對日期和時間相關挑戰的寶貴技能。
格式化為 ISO
國際標準化組織(通常稱為 ISO)提供了一種廣泛使用的格式,以人類和機器可讀的格式表示日期和時間。它可用于各種目的,例如數據傳輸和存儲,并且它確保跨各種系統和應用程序的日期和時間的一致且易于解釋的表示。
遵循 ISO 8601 標準,格式顯示為yyyy-mm-ddThh:mm:ss.sssZ ,其中“ T ”分隔日期和時間部分,“ sss ”表示毫秒,“ Z ”表示協調世界時 (UTC)。例如:
const date = new Date(2023, 5, 4, 13, 5, 34);
const formattedString = date.toISOString();
console.log(formattedString); // output: 2023-06-04T18:05:34.000Z
在此代碼中,我們創建一個Date 表示 2023 年 6 月 4 日下午 1:05:34 的對象(假設當前時間為中部夏令時間)。通過調用該toISOString() 方法,我們將日期和時間格式化為 ISO 標準,并將結果字符串存儲在 formattedString 變量中。在控制臺中顯示時,輸出會顯示 ISO 8601 格式的日期、時間(轉換為 UTC)和毫秒。請記住,您的結果可能會因您的特定時區而異。
將日期格式設置為 yyyy-mm-dd
另一種有用的格式是年-月-日,或yyyy-mm-dd ,它通常用于數據庫、API 和不需要時間組件的各種數據交換格式中。要實現此格式,您可以從 ISO 字符串中提取前十個字符。但是,請記住以toISOString() UTC 格式設置日期,這可能會產生預期的結果。為了確保結果可預測,建議您直接從對象中提取年、月和日Date 。此方法可保證一致且準確的表示,而不會出現潛在的 UTC 相關問題。考慮以下代碼:
function formatYMD(date) {
const year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
return `${year}-${month}-${day}`;
}
此代碼定義了一個名為的函數formatYMD() ,該函數接受一個Date 對象作為輸入。在函數中,前三行提取year 、month 和day 值(需要注意的是,0 JavaScriptDate 對象中的月份從 開始)。接下來的行通過在單位數字前面添加“ ”來確保month 和值都表示為兩位數字。然后,格式化的部分用連字符連接起來,組成最終的格式化字符串。day 0 yyyy-mm-dd
要使用此函數,您只需向其傳遞一個Date 對象即可,如以下示例所示:
const date = new Date(2023, 5, 4); // June 4, 2023
const output = formatYMD(date);
console.log(output); // 2023-06-04
格式為 mm/dd/yyyy 和 dd/mm/yyyy
以最終用戶習慣的格式顯示日期至關重要。雖然前面提到的格式是人類可讀的,但該mm/dd/yyyy 格式在美國普遍使用。為了滿足用戶期望這種格式,我們可以編寫以下函數:
function formatMDY(date) {
const year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
return `${month}/${day}/${year}`;
}
此代碼定義了該函數,該函數與上一節中討論的函數formatMDY() 具有類似的方法。formatYMD() 函數的開頭提取日期值并將month 和day 值規范化為兩個字符的字符串。該函數使用斜杠連接日期部分,從而產生mm/dd/yyyy 格式化字符串。
大多數其他***/地區都使用一種dd/mm/yyyy 格式,我們可以為這些用戶提供類似的功能,如下所示:
function formatDMY(date) {
const year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
return `${day}/${month}/${year}`;
}
該函數再次遵循與前面示例相同的方法。然而,區別在于輸出。在這里,我們使用斜杠連接day 、month 、 和year 來生成dd/mm/yyyy 格式化字符串。
格式化時間
與格式化日期不同,格式化時間在全球范圍內相對一致。大多數***/地區都采用這種hh:mm 格式,但有些***/地區使用 12 小時制,而另一些***/地區則堅持 24 小時制。幸運的是,我們可以使用以下函數來容納這兩種格式:
function formatTime(date, clockType = 24) {
let hours = date.getHours();
let minutes = date.getMinutes();
let amPm = '';
if (clockType === 12) {
amPm = 'AM';
if (hours > 12) {
hours = hours - 12;
amPm = 'PM';
} else if (hours === 0) {
hours = 12;
}
}
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
return `${hours}:${minutes}${amPm}`;
}
此代碼引入了該formatTime() 函數,該函數接受兩個參數:一個 JavaScript Date 對象和一個數值,該數值指示時間應采用 12 小時 (AM/PM) 格式還是默認的 24 小時格式。
Date 該函數的開頭分別使用getHours() 和方法從給定對象中提取小時和分鐘getMinutes() 。它將amPm 變量初始化為空字符串,稍后將保存 12 小時格式的 AM/PM 指示器。對于 24 小時格式,該amPm 變量仍為空字符串。
然后該函數檢查clockType 參數是否設置為12 。如果為 true,它將繼續為 12 小時格式準備hours 和變量。amPm 它檢查該hours 值是否大于12 ,表示下午或晚上。如果是,則減去 12hours 并將amPm 變量設置為“PM”。如果“小時”為0 (午夜),則將“小時”設置為12 代表上午 12 點。對于上午時間(上午 1 點到上午 11 點),該函數保持hours 不變,因為它已經代表了正確的時間。
接下來,該函數通過在需要時用前導零填充來確保 和 都hours 表示minutes 為兩位數。這允許一致的格式。然后,該函數將它們與冒號 ( : ) 和amPm 變量連接起來,生成最終的格式化時間字符串。
formatTime( 您可以像這樣使用) :
const date = new Date();
const time24 = formatTime(date);
const time12 = formatTime(date, 12);
console.log(time24); // hh:mm
console.log(time12); // hh:mmAM or hh:mmPM

結論
格式化日期和時間是 JavaScript 開發中的常見要求,但 Date 對象的內置格式化功能有其局限性。我們經常發現自己負責實施我們自己的自定義格式解決方案。無論是以yyyy-mm-dd 、 、格式顯示日期mm/dd/yyyy ,還是以其他自定義格式格式化時間,該Date 對象的方法都成為不可或缺的工具。
|