使用 date-fns 轻松处理日期操作，提升开发效率

日期操作是 JavaScript 中的常见任务，原生 Date 对象提供了一些基本功能。但是，处理日期可能很复杂且容易出错，并且 Date 缺乏执行这些常见任务所需的功能。为了使日期处理变得更容易、更可靠，开发人员必须依赖第三方库。 JavaScript 生态系统中有很多可用的，但 date-fns 脱颖而出，成为事实上的标准。它是一个用于解析、格式化和操作日期的轻量级实用程序库。

在本教程中，我们将探索使用 date-fns 的基础知识，并涵盖处理日期的最常用函数。最后，您将深入了解如何将 date-fns 合并到 JavaScript 项目中以有效处理日期。

安装 date-fns

date-fns 是一个 Node 包。因此，如果您使用 NPM、Babel 或 Webpack 等工具堆栈，则可以使用以下 npm 命令安装 date-fns：

npm install date-fns --save

如果您对其中任何一个感到陌生，请不要担心；您也可以在浏览器中使用 date-fns！只需将以下 元素添加到您的 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() 使用 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

您可以使用许多占位符来设置日期和时间的格式。下表列出了一些内容，但请务必访问文档以获取完整列表。

解析日期

在处理用户输入或来自外部源的数据时，我们通常需要解析字符串中的日期。 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 中处理日期时为您节省大量时间和精力。本教程仅触及该库功能的表面，因此请务必通过查看官方文档来探索其功能和可用选项。