React 中格式化日期的多種方法

在構建 React 應用程式時，開發人員必須找到一種處理日期的方法。

這涉及格式化、解析和操作日期值。很難想到任何不以某種方式涉及日期的 React 應用程式。

程式設計中日期的問題在於，值並不總是按照你想要的方式格式化或分類。有時日期值可以作為字串、陣列甚至物件使用。

其他時候它們只包括年份，而其他日期值包括從年到毫秒的所有內容。JavaScript 包含 Date 物件來解決這個問題，它提供了一些管理資料的好方法。

但是，它仍然不足以滿足更復雜的需求，例如國際化和加/減時間值。

開發人員通過建立大量用於在 JavaScript 中處理日期的庫來解決這個問題。即使是最有經驗的 Web 開發人員也選擇使用外部庫直接與 Date API 互動。

這些外部包為格式化、解析和操作日期提供了更簡單的 API。它們節省了 JavaScript 開發人員花在管理日期上的精力和時間。

最受歡迎的庫是 moment、date-fns 和 luxor，僅舉幾例。

JavaScript 中的 Date 物件

JavaScript 中的 Date 物件並非完全沒用。它為簡單的操作提供了一些有用的方法，例如 .getDay()，它返回特定日期值的星期幾。

如果你瞭解每種方法的所有注意事項和複雜細節，那麼 Date 物件會很有用。與外部庫相比，Date 物件的最大缺點是它是可變的。

此功能可能會導致你的網站出現不一致。例如，很容易意外覆蓋可變日期值並最終在不知情的情況下顯示錯誤的日期。

以下是可用於 Date 物件的最有用的方法：

• .toDateString()：將日期值轉換為更易讀的文字字串。例如，今天的日期將被格式化為 'Fr Dec 17, 2021' 字串。
• .getDay()：返回一週中的某一天。如果今天呼叫，它將返回'Friday'。

閱讀官方 MDN 上的文件 以更深入地瞭解 Date 物件及其所有相關方法。

在 React 中使用 date-fns 庫格式化

日期庫，例如 moment 或 date-fns，是在 React 中管理日期的最簡單的解決方案。

還有 react-moment 庫，它提供了一個具有其姊妹庫所有功能的 React 元件。這些庫是在 React 應用程式中處理日期和時間的絕佳解決方案。

首先，你必須通過在 shell 中輸入以下命令來安裝 date-fns 軟體包：

npm install date-fns

安裝後，你可以匯入庫。

date-fns 包的一大優點是模組化。你不必匯入整個包，只需匯入你需要的功能。

這是一種非常輕量級的方法，可確保你的應用程式的高效能。以下是如何使用 date-fns 格式化日期的示例：

import "./styles.css";
import {format} from 'date-fns'
export default function App() {
  return (
    <div className="App">
      {format(new Date(), "'We are currently in' MMMM")}
    </div>
  );
}

正如你在 codesandbox 上看到的，最終輸出顯示為：We are currently in December。

這是對 date-fns 庫的實用程式及其格式化功能的簡單演示。在這種情況下，我們使用模組化方法並且只匯入 format 函式。

然後，我們在 JSX 中呼叫它，在花括號之間，以便對函式的呼叫被解釋為普通的 JavaScript。花括號還允許我們獲取 Date 物件的例項，它是 format() 函式的第一個引數。

在第二個引數中，我們指定了我們想要輸出的文字以及我們想要如何格式化它。在這種情況下，我們選擇了 MMMM 格式，它返回月份的全名。

我們可以選擇 MMM，輸出將是 We are current in Dec。這只是這個包的格式化能力的簡單演示。

要獲得更全面的資訊，請檢視此文件以瞭解他們的 format() 函式。

在 React 中使用 date-fns 格式化的優點

該庫與其他庫相比具有許多優勢。我們已經提到了它的模組化方法，這進一步提高了它的速度。

該庫提供了一個抽象層來處理 Date 物件，因此它很熟悉並且不會重新發明輪子。它支援許多時區和語言。

date-fns 有一個簡單的 API。最重要的是，它帶有資訊豐富的文件，詳細解釋了用例。

我們已經證明它與 React 配合得很好。該庫還可以與 TypeScript 和 Flow 完美配合。