Gunakan date-fns untuk memudahkan operasi tarikh

Manipulasi tarikh ialah tugas biasa dalam JavaScript dan objek Tarikh asli menyediakan beberapa fungsi asas. Walau bagaimanapun, bekerja dengan tarikh boleh menjadi rumit dan mudah ralat, dan Tarikh tidak mempunyai fungsi yang diperlukan untuk melaksanakan tugas biasa ini. Untuk menjadikan pemprosesan tarikh lebih mudah dan lebih dipercayai, pembangun mesti bergantung pada perpustakaan pihak ketiga. Terdapat banyak tersedia dalam ekosistem JavaScript, tetapi date-fns menonjol sebagai standard de facto. Ia adalah perpustakaan utiliti ringan untuk menghuraikan, memformat dan memanipulasi tarikh. 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！只需将以下 <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() 使用 yyyy-MM-dd 格式。 MM 占位符指的是两位数月份。

format() 函数还可以轻松格式化时间。使用 h 或 hh 占位符输出一位或两位数的小时，mm 输出两位数的分钟，a

Dalam tutorial ini, kami akan meneroka asas penggunaan date-fns dan merangkumi fungsi yang paling biasa untuk bekerja dengan tarikh. Akhir sekali, anda akan mendapat pandangan tentang cara memasukkan date-fns ke dalam projek JavaScript anda untuk mengendalikan tarikh dengan cekap.

Memasang date-fns

date-fns ialah pakej Nod. Jadi, jika anda menggunakan timbunan alat seperti NPM, Babel atau Webpack, anda boleh memasang date-fns menggunakan arahan npm berikut:

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

Jika mana-mana perkara ini terdengar asing bagi anda, jangan risau anda boleh menggunakan date-fns dalam penyemak imbas anda juga! Cuma tambahkan elemen <script/> berikut pada HTML anda:

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

Memformat tarikh

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

Panggilan kedua untuk format() menggunakan format yyyy-MM-dd. Pemegang tempat MM merujuk kepada bulan dua digit. Fungsi format() juga boleh memformat masa dengan mudah. Gunakan ruang letak h atau hh untuk mengeluarkan satu atau dua digit jam, mm untuk mengeluarkan dua digit minit dan a Output penunjuk AM/PM. Contohnya:

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

unitPemegang tempatContoh hasilTahun kalendar (2 digit) 年23Tahun kalendar (4 angka) 年2023Bulan (1 digit) Sederhana 7Bulan (2 digit)MM07bulan(singkatan)MMMJanuari, Februari, Disemberbulan(nama penuh)MMMMJanuari, FebruariHari dalam bulan Januari (1 angka) d5, 23Hari dalam bulan (2 digit) dd05, 23Hari dalam seminggu (dipendekkan) EIsnin, Selasa, RabuHari dalam seminggu (nama penuh)EEEEIsnin, Selasapagi,petang一pagi,petangJam (jam 12 jam, 1 digit) jam1,2,10Jam (jam 12 jam, 2 digit) Hehe01,02,10Jam (jam 24 jam, 1 digit) jam1、2、10、23Jam (jam 24 jam, 2 digit) Hehe01,02,10,23Minit (1 digit) Sederhana1、2、3、25、30、58Minit (2 digit)MM01,02,03,24,56Digit kedua (1 digit)

Ini ialah modul JavaScript yang mengimport versi terkini pustaka date-fns daripada rangkaian jsdelivr. Dengan import ini, semua fungsi dan utiliti date-fns boleh diakses melalui objek dateFns. Ambil perhatian bahawa untuk berjaya menjalankan semua kod dalam tutorial ini, kod mesti terkandung dalam modul yang sama yang mengimport date-fns.	Salah satu tugas utama semasa bekerja dengan tarikh ialah memformatkannya ke dalam rentetan yang boleh dibaca manusia. Objek Tarikh JavaScript mempunyai sokongan asas untuk tarikh yang diformatkan, tetapi tidak mempunyai sokongan untuk format tersuai. date-fns menyediakan fungsi pemformatan untuk tujuan ini.	Dalam contoh ini, kami mencipta objek Tarikh baharu yang mewakili tarikh semasa. Kami kemudian menggunakan fungsi format() untuk memformat tarikh berdasarkan rentetan format yang disediakan. Rentetan format menggunakan ruang letak, seperti dd untuk tarikh dua digit, MMMM untuk nama bulan penuh dan yyyy untuk sepanjang tahun .
Terdapat banyak ruang letak yang boleh anda gunakan untuk memformat tarikh dan masa. Jadual di bawah menyenaraikan beberapa, tetapi pastikan anda melawati dokumentasi untuk senarai lengkap.

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

Atas ialah kandungan terperinci Gunakan date-fns untuk memudahkan operasi tarikh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!