JavaScript實(shí)現(xiàn)日期格式化的方法匯總

更新時(shí)間：2023年06月04日 10:05:27 作者：曉風(fēng)曉浪

日期是許多JavaScript應(yīng)用程序的基本組成部分，無(wú)論是在網(wǎng)頁(yè)上顯示當(dāng)前日期還是處理用戶輸入以安排事件，本文將探討在?JavaScript?中格式化日期的各種技術(shù)，希望對(duì)大家有所幫助

如何使用 JavaScript 日期對(duì)象

在我們深入研究日期格式之前，讓我們熟悉一下 JavaScriptDate對(duì)象。它提供了有效處理日期和時(shí)間的方法。

要?jiǎng)?chuàng)建一個(gè)新的日期實(shí)例，您可以使用new Date()構(gòu)造函數(shù)。

例如：

?const currentDate = new Date();
?console.log(currentDate); // Wed May 31 2023 08:26:18 GMT+0100 (West Africa Standard Time)

上面的代碼將以默認(rèn)格式輸出當(dāng)前日期和時(shí)間。但是，這種格式并不適合所有用例。

這就是為什么我們需要格式化日期，以便我們可以從這個(gè)日期對(duì)象中提取我們需要的內(nèi)容。

在 JavaScript 中，沒(méi)有直接的語(yǔ)法可以為您提供預(yù)期的格式，因?yàn)槿掌诟袷綍?huì)因位置、環(huán)境等因素而異。

基本的 JavaScript 日期格式化方法

JavaScript 提供了一些內(nèi)置方法來(lái)方便地格式化日期。讓我們來(lái)看看其中的一些方法：

1.toDateString() ：此方法將對(duì)象的日期部分轉(zhuǎn)換Date為人類可讀的字符串格式。

例如：

?const date = new Date();
?console.log(date.toDateString());

輸出：Wed May 30 2023

2.toISOString() ：此方法將Date對(duì)象轉(zhuǎn)換為符合 ISO 8601 格式的字符串表示形式。

例如：

?const date = new Date();
?console.log(date.toISOString());

輸出：2023-05-30T00:00:00.000Z

3.toLocaleDateString() Date ：此方法使用系統(tǒng)的本地約定返回表示對(duì)象日期部分的字符串。

例如：

?const date = new Date();
?console.log(date.toLocaleDateString());

輸出：5/30/2023。此格式可能因系統(tǒng)的區(qū)域設(shè)置而異。

JavaScript 中的自定義日期格式

雖然基本格式設(shè)置方法在某些情況下很有用，但您可能經(jīng)常需要對(duì)日期格式進(jìn)行更多控制。

JavaScript 提供了幾種實(shí)現(xiàn)自定義日期格式的方法：

1.字符串連接：一種方法是使用字符串操作手動(dòng)連接日期的不同組成部分。

例如：

?const date = new Date();
?const formattedDate = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
?console.log(formattedDate);

輸出：**30-5-2023**。

您可以隨心所欲地操縱它，并想出更有創(chuàng)意的日期表示方式。

2.Intl.DateTimeFormat：JavaScript 的Intl對(duì)象通過(guò)對(duì)象提供了強(qiáng)大的格式化功能DateTimeFormat。它提供本地化支持和各種選項(xiàng)來(lái)格式化日期和時(shí)間。

這是一個(gè)例子：

?const date = new Date();
?const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'short' });
?const formattedDate = formatter.format(date);
?console.log(formattedDate);

輸出：5/30/23

使用Intl.DateTimeFormat，您可以指定所需的區(qū)域設(shè)置和各種選項(xiàng)以根據(jù)需要精確地格式化日期。

處理日期時(shí)如何處理時(shí)區(qū)

使用日期時(shí)，必須考慮時(shí)區(qū)，尤其是在處理全球應(yīng)用程序或時(shí)間敏感信息時(shí)。

JavaScript 提供了有效處理時(shí)區(qū)的方法：

時(shí)區(qū)偏移量：對(duì)象getTimezoneOffset()的方法Date返回本地時(shí)區(qū)和 UTC 之間的分鐘差值。您可以使用此偏移來(lái)調(diào)整特定時(shí)區(qū)的日期。
顯示時(shí)區(qū)：要在日期旁邊顯示時(shí)區(qū)信息，您可以使用toLocaleString()帶有適當(dāng)選項(xiàng)的方法。

例如：

?const date = new Date();
?const formattedDate = date.toLocaleString('en-US', { timeZoneName: 'short' });
?console.log(formattedDate);

輸出：5/30/2023, 12:00:00 AM PDT。

常見(jiàn)的日期格式模式

某些日期格式化模式是常用的。這里有一些例子：

1.特定日期格式：要以特定格式顯示日期，例如DD/MM/YYYY，您可以使用Intl.DateTimeFormat適當(dāng)?shù)倪x項(xiàng)。

例如：

?const date = new Date();
?const formatter = new Intl.DateTimeFormat('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' });
?const formattedDate = formatter.format(date);
?console.log(formattedDate);

輸出：30/05/2023。

2.時(shí)間格式：要格式化日期的時(shí)間部分，您可以使用hour、minute和second選項(xiàng)。

例如：

?const date = new Date();
?const formatter = new Intl.DateTimeFormat('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
?const formattedTime = formatter.format(date);
?console.log(formattedTime);

輸出：12:00:00 AM

如何處理日期輸入

除了格式化日期以供顯示之外，有效處理用戶輸入的日期也很重要。以下是一些注意事項(xiàng)：

解析用戶輸入：使用Date.parse()Moment.js 或 Luxon 等方法或外部庫(kù)將用戶提供的日期解析為有效Date對(duì)象。
驗(yàn)證用戶輸入：實(shí)施驗(yàn)證機(jī)制以確保用戶的輸入符合預(yù)期的日期格式。正則表達(dá)式或外部庫(kù)可以幫助解決這個(gè)問(wèn)題。