日期操作是 JavaScript 中的常见任务，原生 Date 对象提供了一些基本功能。但是，处理日期可能很复杂且容易出错，并且 Date 缺乏执行这些常见任务所需的功能。为了使日期处理变得更容易、更可靠，开发人员必须依赖第三方库。 JavaScript 生态系统中有很多可用的，但 date-fns 脱颖而出，成为事实上的标准。它是一个用于解析、格式化和操作日期的轻量级实用程序库。
在本教程中，我们将探索使用 date-fns 的基础知识，并涵盖处理日期的最常用函数。最后，您将深入了解如何将 date-fns 合并到 JavaScript 项目中以有效处理日期。
date-fns 是一个 Node 包。因此，如果您使用 NPM、Babel 或 Webpack 等工具堆栈，则可以使用以下 npm 命令安装 date-fns：
npm install date-fns --save
如果您对其中任何一个感到陌生，请不要担心；您也可以在浏览器中使用 date-fns！只需将以下 <script/> 元素添加到您的 HTML 中即可：
<script type="module">
import * as dateFns from 'https://cdn.jsdelivr.net/npm/date-fns/+esm';
</script>
这是一个 JavaScript 模块，从 jsdelivr 网络导入最新版本的 date-fns 库。通过此导入，所有 date-fns 函数和实用程序都可以通过 dateFns 对象访问。请注意，要成功运行本教程中的所有代码，代码必须包含在导入 date-fns 的同一模块中。
处理日期时的主要任务之一是将其格式化为人类可读的字符串。 JavaScript 的 Date 对象对格式化日期具有基本支持，但缺乏对自定义格式的支持。 date-fns 为此提供了格式化函数。
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
在此示例中，我们创建一个新的 Date 对象，表示当前日期。然后，我们使用 format() 函数根据提供的格式字符串格式化日期。格式字符串使用占位符，例如 dd 表示两位数的日期，MMMM 表示完整的月份名称，yyyy 对象，表示当前日期。然后，我们使用 format() 函数根据提供的格式字符串格式化日期。格式字符串使用占位符，例如 dd 表示两位数的日期，MMMM 表示完整的月份名称，yyyy 表示全年。
第二次调用 format() 使用 yyyy-MM-dd 格式。 MM 占位符指的是两位数月份。
format() 函数还可以轻松格式化时间。使用 h 或 hh 占位符输出一位或两位数的小时，mm 输出两位数的分钟，a 输出 AM/PM 指示器。例如：
const formattedDateAndTime = dateFns.format(today, 'yyyy-MM-dd h:mm a'); console.log(formattedDateAndTime); // Output: 2023-07-29 12:50 PM
您可以使用许多占位符来设置日期和时间的格式。下表列出了一些内容，但请务必访问文档以获取完整列表。
| 单位 | 占位符 | 结果示例 |
|---|---|---|
| 日历年（2 位数字） | 年 | 23 |
| 日历年（4 位数字） | 年 | 2023 |
| 月份（1 位数字） | 中号 | 7 |
| 月份（2 位数字） | 毫米 | 07 |
| 月份（简称） | MMM | 一月、二月、十二月 |
| 月份（全名） | MMMM | 一月、二月 |
| 一月中的某天（1 位数字） | d | 5, 23 |
| 月份中的日期（2 位数字） | dd | 05, 23 |
| 星期几（缩短） | E | 周一、周二、周三 |
| 星期几（全名） | EEEE | 周一、周二 |
| 上午、下午 | 一个 | 上午、下午 |
| 小时（12 小时制，1 位数字） | 小时 | 1,2,10 |
| 小时（12 小时制，2 位数字） | 呵呵 | 01,02,10 |
| 小时（24 小时制，1 位数字） | 小时 | 1、2、10、23 |
| 小时（24 小时制，2 位数字） | 呵呵 | 01,02,10,23 |
| 分钟（1 位数字） | 中号 | 1、2、3、25、30、58 |
| 分钟（2 位数字） | 毫米 | 01,02,03,24,56 |
| 第二位（1 位数字） | s | 1、2、3、10、58 |
| 第二个（2 位数字） | SS | 01,02,10,45 |
在处理用户输入或来自外部源的数据时，我们通常需要解析字符串中的日期。 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 之间的差异。其中一些是：
| 函数名称 | 目的 |
|---|---|
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中文网其他相关文章！
