JavaScript日期库date-fn.js使用方法解析


Posted in Javascript onSeptember 09, 2020

用JavaScript处理日期并不容易。因此,如果您查看大多数应用程序的 package.json 文件,通常会在其中找到像 Moment.js 这样的库。

它对开发人员对解析/格式化/计算日期而言不再那么艰巨,但 Moment.js 是最早臭名昭著的库之一。

但是您知道一个名为 date-fns 的库吗?

JavaScript日期库date-fn.js使用方法解析

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"

国际化支持也很好

JavaScript日期库date-fn.js使用方法解析

比较两个日期

对于一个日期操作库来说,计算两个日期之间的差的能力是非常重要的。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的捆绑包大小,请参见下图:

JavaScript日期库date-fn.js使用方法解析

Source: BundlePhobia

总结

date-fns目前似乎比moment .js得到了更多的开发工作,因此,它确实维护得很好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
理解Javascript闭包
Nov 01 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
js实现简单抽奖功能
Nov 24 #Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 #Javascript
Vue路由 重定向和别名的区别说明
Sep 09 #Javascript
JavaScript常用8种数组去重代码实例
Sep 09 #Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 #Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
js实现右键弹出自定义菜单
Sep 08 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
php实现微信支付之退款功能
2018/05/30 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python使用OpenCV进行标定
2018/05/08 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
幼儿教师考核制度
2014/01/25 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
七年级作文之下雨天
2019/12/23 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
Mysql 如何查询时间段交集
2021/06/08 MySQL
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
Python开发五子棋小游戏
2022/05/02 Python