date-fns を使用して日付操作を簡素化する

日付操作は JavaScript の一般的なタスクであり、ネイティブの Date オブジェクトはいくつかの基本機能を提供します。ただし、日付の操作は複雑でエラーが発生しやすいため、Date にはこれらの一般的なタスクを実行するために必要な機能がありません。日付処理をより簡単かつ信頼性の高いものにするには、開発者はサードパーティのライブラリに依存する必要があります。 JavaScript エコシステムには多数の利用可能な機能がありますが、date-fns が事実上の標準として際立っています。これは、日付の解析、書式設定、操作を行うための軽量のユーティリティ ライブラリです。

このチュートリアルでは、date-fns の使用の基本を学び、日付を操作するための最も一般的な関数について説明します。最後に、日付を効率的に処理するために date-fns を JavaScript プロジェクトに組み込む方法について理解します。

date-fns をインストールします

date-fns はノード パッケージです。したがって、NPM、Babel、Webpack などのツール スタックを使用している場合は、次の npm コマンドを使用して date-fns をインストールできます。 リーリー

これに見慣れないものがあるとしても、心配しないでください。ブラウザでも date-fns を使用できます。次の

<script></script> 要素を HTML に追加するだけです: リーリー

これは、最新バージョンの date-fns ライブラリを jsdelivr ネットワークからインポートする JavaScript モジュールです。このインポートにより、

dateFns オブジェクトを介してすべての date-fns 関数とユーティリティにアクセスできるようになります。このチュートリアルのすべてのコードを正常に実行するには、date-fns をインポートする同じモジュールにコードが含まれている必要があることに注意してください。

日付のフォーマット

日付を扱うときの主なタスクの 1 つは、日付を人間が読める文字列にフォーマットすることです。 JavaScript の

Date オブジェクトは、書式設定された日付の基本的なサポートを備えていますが、カスタム形式のサポートがありません。 date-fns は、この目的のための書式設定関数を提供します。 リーリー

この例では、現在の日付を表す新しい

Date オブジェクトを作成します。次に、format() 関数を使用して、指定された書式文字列に基づいて日付を書式設定します。形式文字列では、2 桁の日付には dd、完全な月名には MMMM、年全体には yyyy などのプレースホルダーが使用されます。

format() の 2 番目の呼び出しでは、yyyy-MM-dd 形式が使用されます。 MM プレースホルダーは 2 桁の月を指します。

format() この関数は時刻を簡単にフォーマットすることもできます。 1 桁または 2 桁の時間を出力するには h または hh プレースホルダーを使用し、2 桁の分を出力するには mm を使用し、出力AM/PMインジケーター。例えば：＃＃＃ リーリー 多数のプレースホルダーを使用して日付と時刻の書式を設定できます。以下の表には一部がリストされていますが、完全なリストについては必ずドキュメントを参照してください。

＃＃＃ユニット＃＃＃

プレースホルダー結果例 ＃＃＃年＃＃＃ ＃＃＃23＃＃＃ 暦年(4桁) ＃＃＃年＃＃＃ ＃＃＃中くらい＃＃＃ ＃＃＃7＃＃＃ ＃＃＃んん＃＃＃ 月(略称) ＃＃＃うーん＃＃＃ ＃＃＃んー＃＃＃ ＃＃＃一月二月＃＃＃ ＃＃＃月曜、火曜、水曜＃＃＃ 曜日 (フルネーム) ＃＃＃月曜日火曜日＃＃＃ ＃＃＃朝午後＃＃＃ ＃＃＃1つ＃＃＃ ＃＃＃朝午後＃＃＃ 時間 (12 時間制、1 桁) ＃＃＃時間＃＃＃ へへ ＃＃＃時間＃＃＃ 1、2、10、2301,02,10,23 ＃＃＃中くらい＃＃＃ ＃＃＃んん＃＃＃ 2桁目(1桁)秒(2桁)

解析日期

在处理用户输入或来自外部源的数据时，我们通常需要解析字符串中的日期。 date-fns 为此提供了 parse() 函数。

const dateString = '2023-07-15';
const parsedDate = dateFns.parse(dateString, 'yyyy-MM-dd', new Date());
console.log(parsedDate); // Output: Date object representing July 15, 2023

在此代码中，我们使用格式 yyyy-MM-dd 解析来自 dateString 的日期，该格式对应于提供的日期字符串。第三个参数是用于计算解析日期的基准日期。在本例中，我们使用当前日期作为基准。

添加和减去日期

通过添加或减去时间间隔来操作日期是日期处理中的常见要求。 date-fns 提供了一组方便的函数来轻松执行这些操作。

以下示例演示了 addDays() 和 subDays() 函数：

const startDate = new Date(2023, 6, 15); // July 15, 2023

const fiveDaysLater = dateFns.addDays(startDate, 5);
console.log(fiveDaysLater); // Output: Date object representing July 20, 2023

const threeDaysAgo = dateFns.subDays(startDate, 3);
console.log(threeDaysAgo); // Output: Date object representing July 12, 2023

在此示例中，我们从给定的 2023 年 7 月 15 日的 startDate 开始。然后使用 addDays() 函数计算 5 天后的日期，并使用 subDays( ) 函数查找 3 天前的日期。

除了添加和减去天数之外，date-fns 还提供了添加和减去月份和年份的函数。正如您所期望的，它们被命名为 addMonths()、subMonths()、addYears() 和 subYears()。

操作日期时，必须注意边缘情况。例如，当减去月份或年份时，结果日期可能不存在（例如 2 月 30 日），而 date-fns 通过调整日期来智能处理这种情况。

const startDate = new Date(2023, 0, 31); // January 31, 2023

const oneMonthLater = dateFns.addMonths(startDate, 1);
console.log(oneMonthLater); // Output: Date object representing February 28, 2023

在此示例中，从 2023 年 1 月 31 日开始，添加一个月结果为 2023 年 2 月 28 日，因为 2 月没有第 31 天。

查找日期之间的差异

JavaScript 的 Date 对象完全缺乏查找两个 Date 对象之间差异的能力。值得庆幸的是，date-fns 有几个函数可以用来查找两个 Dates 之间的差异。其中一些是：

		暦年(2桁)
2023		月(1桁)
月(2桁)	07
1月、2月、12月		月 (フルネーム)
1月の日(1桁)	d	5、23
日(2桁)	dd	05、23
曜日 (短縮)	E
EEEE
1,2,10		時間 (12 時間制、2 桁)
01,02,10		時間(24時間制、1桁)
	時間 (24 時間制、2 桁)	へへ
	分(1桁)	1、2、3、25、30、58
分(2桁)	01,02,03,24,56
s	1、2、3、10、58
SS	01,02,10,45

函数名称	目的
differenceInMilliseconds()	获取给定日期之间的毫秒数。
differenceInSeconds()	获取给定日期之间的秒数。
differenceInMinutes()	获取给定日期之间的分钟数。
differenceInHours()	获取给定日期之间的小时数。
differenceInBusinessDays()	获取给定日期之间的工作日数。
differenceInDays()	获取给定日期之间的完整天数。
differenceInMonths()	获取给定日期之间的月数。
differenceInYears()	获取给定日期之间的年数。

还有许多其他“差异”函数，因此请务必检查文档。

考虑以下示例：

const startDate = new Date(2023, 6, 15); // July 15, 2023
const endDate = new Date(2023, 6, 22);   // July 22, 2023

const daysDifference = dateFns.differenceInDays(endDate, startDate);
console.log(daysDifference); // Output: 7

在本例中，我们使用 differenceInDays() 函数来计算 startDate 和 endDate。输出为 7。

使用时区

使用时区可能是使用日期和时间时最令人沮丧的方面之一，但 date-fns 使用 utcToZonedTime() 和 formatDistanceToNow() 等函数使之变得更容易。考虑以下示例：

const utcDate = new Date(Date.UTC(2023, 6, 15, 12, 0, 0));
const timezone = 'America/New_York';

const zonedDate = dateFns.utcToZonedTime(utcDate, timezone);
console.log(dateFns.formatDistanceToNow(zonedDate)); // Output: "6 months"

在此示例中，我们使用 utcToZonedTime() 函数将 utcDate 转换为 America/New_York 时区。然后我们使用 formatDistanceToNow() 函数来获取分区日期和当前时间之间的时差。

处理无效日期

我们永远不能信任来自用户的数据，并且通常最好不要信任任何您无法控制的数据。因此，我们需要能够检查 Date 是否有效，并且 date-fns 为此提供了 isValid() 函数。例如：

const validDate = new Date(2023, 1, 30); // February 30, 2023 is not a valid date
const invalidDate = new Date(NaN);      // Invalid date

console.log(dateFns.isValid(validDate));   // Output: true
console.log(dateFns.isValid(invalidDate)); // Output: false

此示例创建了有效和无效的 Date 对象。然后我们使用 isValid() 函数来确定它们是否是有效日期。

结论

date-fns 是一个功能强大且易于使用的库，可以在 JavaScript 中处理日期时为您节省大量时间和精力。本教程仅触及该库功能的表面，因此请务必通过查看官方文档来探索其功能和可用选项。

以上がdate-fns を使用して日付操作を簡素化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。