发布于:2021-01-08 11:23:15
0
47
0
与日期相关的问题与JavaScript一样古老。从理论上讲,如果不是因为API的许多弱点,则可以使用JavaScript的date对象执行日期计算。幸运的是,有一些有用的库可以为我们节省很多工作。其中之一是date-fns。
例如,一个问题是使用date对象处理不同的时区,因为JavaScript使用当前系统时区作为基础。这可能会导致困难,尤其是涉及跨多个时区的应用程序时。月份的表示形式是JavaScript中date对象的另一特性。例如,一月的值指定为0。但是,当涉及到日期和年份时,JavaScript会再次遵循预期的标准,因此每月5号用数字5表示。
当您实现一个使用日期值的应用程序时,通常会发现必须创建,修改和输出它们的问题。使用板载JavaScript工具,可以轻松地进行创建和输出。但是,如果修改了日期,例如,如果您想从日期中减去两天,则将不再可能。当然,您可以获取日期的时间戳,然后减去相应的毫秒数以达到目标日期。该解决方案不容易阅读和维护,或者特别优雅。由于这个问题以及更多其他问题,过去已经创建了许多库,以使您可以更轻松地处理JavaScript中的日期值。市场上最广泛的解决方案之一是Moment.js。不过,前一阵子的竞争对手在竞争激烈:
date-fns与Moment.js有何不同?
最重要的区别之一是项目名称,因为fns代表功能。date-fns是允许您使用日期值的功能的集合。
与此相反,Moment.js具有面向对象的方法。在这里,您创建一个瞬间-instance和工作与此对象的方法。当然,这会影响包装尺寸。
Moment.js默认包含整个接口。您确实可以优化程序包,但这需要其他步骤。在date-fns中,您仅加载真正需要的功能。
不过,在带有Node.js的后端应用程序中,这无关紧要,因为软件包大小是一个小问题。您可以在前端浏览器中像Moment.js一样使用date-fns。包装的大小在这里起决定性作用。
date-fns的开发人员不仅确保将项目划分为许多小的且很大程度上独立的功能,而且还确保这些功能是纯功能。例如,您传递一个日期对象和要添加到addHours函数的小时数。结果,您得到一个新的日期对象,其中指定的小时数晚于您输入的日期。因此,没有副作用,例如直接修改输入。
如何安装date-fns?
像大多数其他JavaScript库一样,date-fns可作为npm软件包提供,并可通过npm进行安装。在项目中使用命令npm install date-fns进行操作。该软件包将作为依赖项自动添加到您的package.json文件中。同样,您可以将纱线与纱线 添加日期-fns命令一起使用。
如何使用它?
您可以将date-fns包与CommonJS模块系统和ES模块一起使用。在下面的示例中,您使用格式函数输出当前日期。清单1显示了如何使用CommonJS模块系统。
清单1:通过CommonJS模块化系统集成date-fns
const { format } = require('date-fns'); const date = new Date(); console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);
较新版本的Node.js还支持关键字import和export,以便分别导入和导出模块。此时,您可以导入整个date-fns软件包并访问所需的功能,也可以利用每个功能在单独的文件中可用的事实,因此可以单独导入格式功能。您可以在清单2中看到它的工作方式。
清单2:将date-fns与ES模块一起使用
import { format } from 'date-fns/format'; const date = new Date(); console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);
格式化日期值
使用格式,您已经了解了格式化日期值的最重要功能。
您可以使用格式字符串来指定要格式化日期的哪一部分以及如何格式化。
您可以在https://date-fns.org/docs/format中找到可以在格式字符串中使用的各个令牌的全面参考。
除此功能外,您还可以访问其他辅助功能,例如distanceInWords函数,该函数以可读形式输出两个日期值之间的差。
日期算术
已经提到的JavaScript中对象日期的漏洞是缺少对日期算术的支持。因此,事不宜迟地执行加法或减法。
date-fns为此提供了许多辅助功能。这些功能通常具有统一的命名方案:首先指定操作,然后指定要使用的单元。
这将导致函数名称,例如addMinutes或subYears。该类别的所有函数都将日期对象作为第一个参数,将数字作为第二个参数表示要添加或减去的单位数。例如,要将当前日期增加四分之三小时,可以使用清单3中的代码。
清单3:使用date-fns的日期算术
const { addMinutes, addHours, format } = require('date-fns'); const date = addMinutes(addHours(new Date(), 1), 45); console.log(format(date, 'DD.MM.YYYY HH:mm'));
比较
date-fns的比较功能也非常有用,借助它们的帮助,您可以确定某个日期是在另一个日期之前还是之后,或者某个日期是在将来还是过去。清单4使用isAfter和isFuture函数作为示例来说明它们的用法。
清单4:wit dat-fns的比较
const { isAfter, isFuture, addHours } = require('date-fns'); const date1 = new Date(); const date2 = addHours(new Date(), 5); console.log(`Date1 is ${isAfter(date1, date2) ? 'after' : 'before'} Date2`); console.log(`Date2 is ${isFuture(date2) ? 'not' : ''} in the past`);
进一步的操作
date-fns软件包不仅为您提供诸如加法之类的简单操作,还为您提供诸如areRangesOverlapping函数之类的更复杂的操作,您可以使用它们来确定两个时间跨度是否重叠。
使用最小值和最大值功能,您可以找到一系列日期值的最早或最晚日期。
借助compareAsc和compareDsc函数,您还可以对具有日期值的数组进行排序。该函数作为比较函数传递给数组的sort方法。清单5是一个例子。
清单5:对日期值进行排序
const { compareAsc } = require('date-fns'); const sortedDates = [ new Date(2001, 1, 1), new Date(2003, 3, 3), new Date(2002, 2, 2), ].sort(compareAsc); console.log(sortedDates);
结论
Moment.js或date-fns之类的许多程序包都提供了,您也可以使用本机JavaScript来实现。但是,在这些情况下,源代码的可读性受到很大影响。除了更正JavaScript日期对象的特性之外,这是支持使用这些库的最重要的论据之一。
此处显示的date-fns的可能性仅代表该库的一小部分,并且只能使您对该库的功能范围有所了解。凭借众多扩展功能以及对应用程序国际化的良好支持,您下次确定一个应用程序的日期库时,至少应将date-fns入围。
作者介绍