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

更新時間：2023年06月04日 10:05:27 作者：曉風曉浪

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

如何使用 JavaScript 日期對象

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

要創(chuàng)建一個新的日期實例，您可以使用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)

上面的代碼將以默認格式輸出當前日期和時間。但是，這種格式并不適合所有用例。

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

在 JavaScript 中，沒有直接的語法可以為您提供預(yù)期的格式，因為日期格式會因位置、環(huán)境等因素而異。

基本的 JavaScript 日期格式化方法

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

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

例如：

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

輸出：Wed May 30 2023

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

例如：

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

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

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

例如：

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

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

JavaScript 中的自定義日期格式

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

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

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

例如：

?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對象通過對象提供了強大的格式化功能DateTimeFormat。它提供本地化支持和各種選項來格式化日期和時間。

這是一個例子：

?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è)置和各種選項以根據(jù)需要精確地格式化日期。

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

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

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

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

例如：

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

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

常見的日期格式模式

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

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

例如：

?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.時間格式：要格式化日期的時間部分，您可以使用hour、minute和second選項。

例如：

?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