date-fns를 사용하여 날짜 작업 단순화
- WBOY원래의
- 2023-09-03 10:29:071664검색
날짜 조작은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!