date-fns를 사용하여 날짜 작업 단순화

날짜 조작은 JavaScript의 일반적인 작업이며 기본 Date 对象提供了一些基本功能。但是，处理日期可能很复杂且容易出错，并且 Date에는 이러한 일반적인 작업을 수행하는 데 필요한 기능이 부족합니다. 날짜 처리를 더욱 쉽고 안정적으로 만들기 위해 개발자는 타사 라이브러리에 의존해야 합니다. JavaScript 생태계에는 사용할 수 있는 것들이 많이 있지만 date-fns가 사실상의 표준으로 두드러집니다. 날짜 구문 분석, 형식 지정 및 조작을 위한 경량 유틸리티 라이브러리입니다.

이 튜토리얼에서는 date-fns 사용의 기본 사항을 살펴보고 날짜 작업을 위한 가장 일반적인 기능을 다룹니다. 마지막으로 날짜를 효율적으로 처리하기 위해 date-fns를 JavaScript 프로젝트에 통합하는 방법에 대한 통찰력을 얻게 됩니다.

날짜-fns 설치

date-fns는 노드 패키지입니다. 따라서 NPM, Babel 또는 Webpack과 같은 도구 스택을 사용하는 경우 다음 npm 명령을 사용하여 date-fns를 설치할 수 있습니다.

으아아아

이 내용이 낯설게 들리더라도 걱정하지 마세요. 브라우저에서도 date-fns를 사용할 수 있습니다. 다음 <script></script> 요소를 HTML에 추가하세요:

으아아아

이것은 jsdelivr 네트워크에서 최신 버전의 date-fns 라이브러리를 가져오는 JavaScript 모듈입니다. 이 가져오기를 사용하면 dateFns 개체를 통해 모든 date-fns 기능과 유틸리티에 액세스할 수 있습니다. 이 튜토리얼의 모든 코드를 성공적으로 실행하려면 date-fns를 가져오는 동일한 모듈에 코드가 포함되어 있어야 합니다.

날짜 형식

날짜 작업 시 주요 작업 중 하나는 사람이 읽을 수 있는 문자열로 형식을 지정하는 것입니다. JavaScript의 Date 개체는 형식화된 날짜에 대한 기본 지원을 제공하지만 사용자 정의 형식에 대한 지원은 부족합니다. date-fns는 이러한 목적을 위한 형식 지정 기능을 제공합니다.

으아아아

이 예에서는 현재 날짜를 나타내는 새로운 Date 对象，表示当前日期。然后，我们使用 format() 函数根据提供的格式字符串格式化日期。格式字符串使用占位符，例如 dd 表示两位数的日期，MMMM 表示完整的月份名称，yyyy 개체를 만듭니다. 그런 다음 format() 함수를 사용하여 제공된 형식 문자열을 기반으로 날짜 형식을 지정합니다. 형식 문자열은 두 자리 날짜의 경우 dd, 전체 월 이름의 경우 MMMM, 전체 연도의 경우 yyyy와 같은 자리 표시자를 사용합니다. .

두 번째 호출 format() 使用 yyyy-MM-dd 格式。 MM 자리 표시자는 두 자리 월을 나타냅니다.

format() 函数还可以轻松格式化时间。使用 h 或 hh 占位符输出一位或两位数的小时，mm 输出两位数的分钟，a AM/PM 표시기를 출력합니다. 예:

으아아아

날짜와 시간 형식을 지정하는 데 사용할 수 있는 자리 표시자가 많이 있습니다. 아래 표에는 일부가 나열되어 있지만 전체 목록을 보려면 설명서를 방문하세요.

유닛	자리 표시자	결과 예
연도(2자리)	연도	23
연도(4자리)	연도	2023
월(1자리)	중형 사이즈	7
월(2자리)	mm	07
월(약어)	MMM	1월, 2월, 12월
월(성명)	MMMM	1월, 2월
1월의 날짜(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자리)	mm	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 중국어 웹사이트의 기타 관련 기사를 참조하세요!