JavaScript日期处理库date-fns使用详解
本文深入解析JavaScript日期处理库date-fns的使用方法。内容涵盖安装步骤、日期格式化、加减运算、本地化支持及日期比较等核心功能，并与Moment.js进行对比，突出其轻量级和按需加载的优势，帮助开发者高效处理前端日期逻辑。
date-fns简介与安装
在JavaScript中处理日期并非易事，因此大多数应用程序的package.json文件中通常会包含如Moment.js这样的日期处理库。
虽然这些库简化了日期的解析、格式化和计算工作，但Moment.js作为早期流行的库，也存在一些不足之处。
你是否了解另一个名为date-fns的日期处理库？
date-fn官网
date-fns常被视为Moment.js的有价值替代品，不仅因为它提供了类似的功能集，还因其符合函数式编程的理念而受到欢迎。
安装date-fns
你可以通过npm或yarn安装date-fns，官方网站为：https://date-fns.org/
# Using npm
$ npm install date-fns
# Or using yarn
$ yarn add date-fns日期格式化
格式化Date
日期格式化是Moment.js和date-fns等库的基本功能，因为原生JavaScript缺乏简单的日期处理方式。
date-fns使用与Moment.js类似的字符串模式来格式化日期：
const format = require('date-fns/format');
const stPattysDay = new Date('2020/03/17');
const formattedDate1 = format(stPattysDay, 'MM/dd/yyyy');
const formattedDate2 = format(stPattysDay, 'MMMM dd, yyyy');
console.log(formattedDate1);
// => "03/17/2020"
console.log(formattedDate2);
// => "March 17, 2020"非常简单！通过多种方法，你可以将日期格式化为任意期望的形式。
日期加减运算
加/减日期
现在我们已经学会了如何格式化日期，接下来看看如何对日期进行加减运算。以下是一些常用函数：
- addDays - 加天
- subDays - 减天
- addWeeks - 加周
- subWeeks - 减周
- addMonths - 加月
- subMonths - 减月
在下面的例子中，我们在一个指定的日期上加上1年：
const format = require('date-fns/format');
const addYears = require('date-fns/addYears');
const stPattysDay = new Date('2020/03/17');
const stPattysDayNextYear = addYears(stPattysDay, 1);
const formattedDate = format(stPattysDayNextYear, 'MMMM dd, yyyy');
console.log(formattedDate);
// => "March 17, 2021"本地化与国际化
本地化和国际化
格式化虽然简单，但locale（语言环境）如何处理呢？我们知道用户来自世界各地，不能假设他们都使用我们的母语。
为此，我们可以导入特定的语言环境插件：
const format = require('date-fns/format');
const russianLocale = require('date-fns/locale/ru');
const stPattysDay = new Date('2020/03/17');
const formattedDate = format(stPattysDay, 'MMMM dd, yyyy', { locale: russianLocale });
console.log(formattedDate);
// => "марта 17, 2020"国际化支持也非常完善。
日期比较
比较两个日期
对于一个日期操作库来说，计算两个日期之间的差值非常重要。date-fns提供了多个函数来实现这一功能。
例如，我们可以计算从1月1日到圣诞节的天数（包括“营业日”）：
const format = require('date-fns/format');
const addYears = require('date-fns/addYears');
const differenceInDays = require('date-fns/differenceInDays');
const differenceInBusinessDays = require('date-fns/differenceInBusinessDays')
const startDate = new Date('2020/01/01');
const endDate = new Date('2020/12/24');
const daysBetween = differenceInDays(endDate, startDate);
const workdaysBetween = differenceInBusinessDays(endDate, startDate);
console.log(daysBetween);
// => 358
console.log(workdaysBetween);
// => 256轻量级优势与总结
date-fns是轻量级的
Moment.js的一个主要缺点是，其API无法单独导入函数。
const moment = require('moment');
const formattedDate = moment(new Date()).format('MM/DD/YYYY');
console.log(formattedDate);
// => "03/17/2020"使用date-fns，你只需获取所需的特定功能（与Lodash类似）：
const format = require('date-fns/format');
const formattedDate = format(new Date(), 'MM/dd/yyyy');
console.log(formattedDate);
// => "03/17/2020"这使得date-fns的依赖比Moment.js小得多，有关Moment.js与date-fns的捆绑包大小对比，请参见下图：
Source: BundlePhobia
总结
目前，date-fns似乎比Moment.js得到了更多的开发支持，因此它的维护状态更好。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00