Utilisez date-fns pour simplifier les opérations de date

Il s'agit d'un module JavaScript qui importe la dernière version de la bibliothèque date-fns du réseau jsdelivr. Avec cette importation, toutes les fonctions et utilitaires date-fns sont accessibles via l'objetdateFns. Notez que pour exécuter avec succès tout le code de ce didacticiel, le code doit être contenu dans le même module qui importe date-fns.

Formater la date

L'une des tâches principales lorsque l'on travaille avec des dates consiste à les formater en chaînes lisibles par l'homme. L'objetDatede JavaScript prend en charge de base les dates formatées, mais ne prend pas en charge les formats personnalisés. date-fns fournit des fonctions de formatage à cet effet.

const today = new Date(); const formattedDate1 = dateFns.format(today, 'dd MMMM yyyy'); console.log(formattedDate1); // Output: "29 July 2023" const formattedDate2 = dateFns.format(today, 'yyyy-MM-dd'); console.log(formattedDate2); // Output: 2023-07-29

Dans cet exemple, nous créons un nouvel objetDate对象，表示当前日期。然后，我们使用format()函数根据提供的格式字符串格式化日期。格式字符串使用占位符，例如dd表示两位数的日期，MMMM表示完整的月份名称，yyyyreprésentant la date actuelle. Nous utilisons ensuite la fonctionformat()pour formater la date en fonction de la chaîne de format fournie. La chaîne de format utilise des espaces réservés, tels quejjpour une date à deux chiffres,MMMMpour le nom complet du mois etaaaapour l'année entière. .

Deuxième appelformat()使用yyyy-MM-dd格式。MML'espace réservé fait référence au mois à deux chiffres.

format()函数还可以轻松格式化时间。使用h或hh占位符输出一位或两位数的小时，mm输出两位数的分钟，aIndicateur de sortie AM/PM. Par exemple :

const formattedDateAndTime = dateFns.format(today, 'yyyy-MM-dd h:mm a'); console.log(formattedDateAndTime); // Output: 2023-07-29 12:50 PM

Il existe de nombreux espaces réservés que vous pouvez utiliser pour formater les dates et les heures. Le tableau ci-dessous en répertorie quelques-uns, mais assurez-vous de consulter la documentation pour la liste complète.

解析日期

在处理用户输入或来自外部源的数据时，我们通常需要解析字符串中的日期。 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 之间的差异。其中一些是：

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

考虑以下示例：

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 中处理日期时为您节省大量时间和精力。本教程仅触及该库功能的表面，因此请务必通过查看官方文档来探索其功能和可用选项。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!