對(duì)于開發(fā)人員來(lái)說(shuō)，處理日期和時(shí)間可能是最乏味和最復(fù)雜的任務(wù)之一。雖然基本操作和日期比較可能很簡(jiǎn)單，但除此之外的任何事情通常都需要額外的時(shí)間和考慮。幸運(yùn)的是，大多數(shù)編程語(yǔ)言和框架都提供內(nèi)置 API 來(lái)簡(jiǎn)化日期和時(shí)間操作。
JavaScript 提供了一個(gè)內(nèi)置Date對(duì)象，使您可以輕松地操作日期和時(shí)間，但操作只是我們所做的一部分。當(dāng)我們需要格式化一個(gè)Date對(duì)象以將其表示形式存儲(chǔ)在數(shù)據(jù)庫(kù)中或?qū)⑵鋫鬏數(shù)搅硪粋�(gè)系統(tǒng)時(shí)，JavaScript 可以輕松處理這些情況。然而，用自定義格式表示Date對(duì)象（向最終用戶顯示日期和時(shí)間時(shí)的常見要求）提出了挑戰(zhàn)。
在本教程中，我們將深入研究將 JavaScript 對(duì)象格式化為常見格式的藝術(shù)Date，為您提供有效應(yīng)對(duì)日期和時(shí)間相關(guān)挑戰(zhàn)的寶貴技能。
格式化為 ISO
國(guó)際標(biāo)準(zhǔn)化組織（通常稱為 ISO）提供了一種廣泛使用的格式，以人類和機(jī)器可讀的格式表示日期和時(shí)間。它可用于各種目的，例如數(shù)據(jù)傳輸和存儲(chǔ)，并且它確保跨各種系統(tǒng)和應(yīng)用程序的日期和時(shí)間的一致且易于解釋的表示。
遵循 ISO 8601 標(biāo)準(zhǔn)，格式顯示為yyyy-mm-ddThh:mm:ss.sssZ，其中“ T”分隔日期和時(shí)間部分，“ sss”表示毫秒，“ Z”表示協(xié)調(diào)世界時(shí) (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
在此代碼中，我們創(chuàng)建一個(gè)Date表示 2023 年 6 月 4 日下午 1:05:34 的對(duì)象（假設(shè)當(dāng)前時(shí)間為中部夏令時(shí)間）。通過(guò)調(diào)用該toISOString()方法，我們將日期和時(shí)間格式化為 ISO 標(biāo)準(zhǔn)，并將結(jié)果字符串存儲(chǔ)在 formattedString 變量中。在控制臺(tái)中顯示時(shí)，輸出會(huì)顯示 ISO 8601 格式的日期、時(shí)間（轉(zhuǎn)換為 UTC）和毫秒。請(qǐng)記住，您的結(jié)果可能會(huì)因您的特定時(shí)區(qū)而異。
將日期格式設(shè)置為 yyyy-mm-dd
另一種有用的格式是年-月-日，或yyyy-mm-dd，它通常用于數(shù)據(jù)庫(kù)、API 和不需要時(shí)間組件的各種數(shù)據(jù)交換格式中。要實(shí)現(xiàn)此格式，您可以從 ISO 字符串中提取前十個(gè)字符。但是，請(qǐng)記住以toISOString()UTC 格式設(shè)置日期，這可能會(huì)產(chǎn)生預(yù)期的結(jié)果。為了確保結(jié)果可預(yù)測(cè)，建議您直接從對(duì)象中提取年、月和日Date。此方法可保證一致且準(zhǔn)確的表示，而不會(huì)出現(xiàn)潛在的 UTC 相關(guān)問(wèn)題。考慮以下代碼：
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}`;
}
此代碼定義了一個(gè)名為的函數(shù)formatYMD()，該函數(shù)接受一個(gè)Date對(duì)象作為輸入。在函數(shù)中，前三行提取year、month和day值（需要注意的是，0JavaScriptDate對(duì)象中的月份從 開始）。接下來(lái)的行通過(guò)在單位數(shù)字前面添加“ ”來(lái)確保month和值都表示為兩位數(shù)字。然后，格式化的部分用連字符連接起來(lái)，組成最終的格式化字符串。day0yyyy-mm-dd
要使用此函數(shù)，您只需向其傳遞一個(gè)Date對(duì)象即可，如以下示例所示：
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
以最終用戶習(xí)慣的格式顯示日期至關(guān)重要。雖然前面提到的格式是人類可讀的，但該mm/dd/yyyy格式在美國(guó)普遍使用。為了滿足用戶期望這種格式，我們可以編寫以下函數(shù)：
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}`;
}
此代碼定義了該函數(shù)，該函數(shù)與上一節(jié)中討論的函數(shù)formatMDY()具有類似的方法。formatYMD()函數(shù)的開頭提取日期值并將month和day值規(guī)范化為兩個(gè)字符的字符串。該函數(shù)使用斜杠連接日期部分，從而產(chǎn)生mm/dd/yyyy格式化字符串。
大多數(shù)其他***/地區(qū)都使用一種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}`;
}
該函數(shù)再次遵循與前面示例相同的方法。然而，區(qū)別在于輸出。在這里，我們使用斜杠連接day、month、 和year來(lái)生成dd/mm/yyyy格式化字符串。
格式化時(shí)間
與格式化日期不同，格式化時(shí)間在全球范圍內(nèi)相對(duì)一致。大多數(shù)***/地區(qū)都采用這種hh:mm格式，但有些***/地區(qū)使用 12 小時(shí)制，而另一些***/地區(qū)則堅(jiān)持 24 小時(shí)制。幸運(yùn)的是，我們可以使用以下函數(shù)來(lái)容納這兩種格式：
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()函數(shù)，該函數(shù)接受兩個(gè)參數(shù)：一個(gè) JavaScript Date 對(duì)象和一個(gè)數(shù)值，該數(shù)值指示時(shí)間應(yīng)采用 12 小時(shí) (AM/PM) 格式還是默認(rèn)的 24 小時(shí)格式。
Date該函數(shù)的開頭分別使用getHours()和方法從給定對(duì)象中提取小時(shí)和分鐘getMinutes()。它將amPm變量初始化為空字符串，稍后將保存 12 小時(shí)格式的 AM/PM 指示器。對(duì)于 24 小時(shí)格式，該amPm變量仍為空字符串。
然后該函數(shù)檢查clockType參數(shù)是否設(shè)置為12。如果為 true，它將繼續(xù)為 12 小時(shí)格式準(zhǔn)備hours和變量。amPm它檢查該hours值是否大于12，表示下午或晚上。如果是，則減去 12hours并將amPm變量設(shè)置為“PM”。如果“小時(shí)”為0（午夜），則將“小時(shí)”設(shè)置為12代表上午 12 點(diǎn)。對(duì)于上午時(shí)間（上午 1 點(diǎn)到上午 11 點(diǎn)），該函數(shù)保持hours不變，因?yàn)樗呀?jīng)代表了正確的時(shí)間。
接下來(lái)，該函數(shù)通過(guò)在需要時(shí)用前導(dǎo)零填充來(lái)確保 和 都hours表示minutes為兩位數(shù)。這允許一致的格式。然后，該函數(shù)將它們與冒號(hào) ( :) 和amPm變量連接起來(lái)，生成最終的格式化時(shí)間字符串。
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
結(jié)論
格式化日期和時(shí)間是 JavaScript 開發(fā)中的常見要求，但 Date 對(duì)象的內(nèi)置格式化功能有其局限性。我們經(jīng)常發(fā)現(xiàn)自己負(fù)責(zé)實(shí)施我們自己的自定義格式解決方案。無(wú)論是以yyyy-mm-dd、 、格式顯示日期mm/dd/yyyy，還是以其他自定義格式格式化時(shí)間，該Date對(duì)象的方法都成為不可或缺的工具。
| 
