date-fns日期格式化_date-fns简介–轻量级JavaScript日期库

最新推荐文章于 2024-08-09 07:28:31 发布

dingshi7798

最新推荐文章于 2024-08-09 07:28:31 发布

阅读量1.9k

点赞数

文章标签： java python javascript js vue ViewUI

原文链接：https://www.sitepoint.com/date-fns-javascript-date-library/

版权

date-fns日期格式化

date-fns简介

在JavaScript中使用日期非常麻烦。本地日期方法通常很冗长，有时也不一致 —这也使它们易于出错。但是，好消息即将到来。有几个库可以消除过时的痛苦。这些库是JavaScript日期，jQuery是本机DOM API。

让我举一个例子。这是对Stack Overflow问题的公认答案，询问如何获得每月的最后一天：

var t = new Date();
alert( new Date(t.getFullYear(), t.getMonth() + 1, 0, 23, 59, 59) );

当然可以，但是在getMonth之后的数字代表什么并不立刻显而易见。现在，将其与更具可读性的对比：

const today = new Date();
console.log( lastDayOfMonth(today) );

该lastDayOfMonth方法是date- lastDayOfMonth提供的一种方法， date- lastDayOfMonth是一个自称全面的工具集，用于在浏览器和Node.js中操纵JavaScript日期。

在本文中，我将向您展示如何启动和运行date-fns。阅读后，您将可以将其放入项目中，并利用其许多辅助方法轻松地操作日期。这将使像t.getMonth() + 1, 0, 23, 59, 59这样的代码成为过去。

那么，为什么不仅仅使用Moment.js？

房间里的大象是Moment.js 。无疑，该库已成为在JavaScript中使用日期的实际标准。那么为什么不使用它呢？为什么我们需要另一个JavaScript日期库？

好吧，根据date-fns的创建者Sasha Koss的说法，Moment.js存在一些固有的问题，促使他创建了date-fns。 Sasha在项目的GitHub页面上扩展了这些问题的内容，但简而言之：

Moment.js易变，可能导致错误。
它具有复杂的OOP API（使可变性问题加倍）。
由于API复杂，因此具有性能开销。
与Webpack一起使用时，它的构建大小很大，因为语言环境文件作为捆绑包的一部分包含在内。

让我们与date-fns（来自项目主页）进行对比：

Date-fns是不可变的，总是返回一个新日期，而不是更改传递的日期。
它有一个简单的API。您总是只有一个功能可以做一件事。
很快您可以确定您的用户将拥有最佳的用户体验。
它是Webpack的完美伴侣。使用每个文件的功能样式，您可以选择所需的内容，并停止使用无用功能的项目肿。

对我来说，使它发光的功能是易于使用。在基于Web的项目中使用它时，您只需从CDN中获取date-fns，然后将其放入页面即可获利。接下来的更多内容...

安装

有多种安装库的方法。

它可以作为npm软件包使用：

npm install date-fns --save

或通过纱线：

yarn add date-fns

或凉亭：

bower install date-fns

或从CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.28.5/date_fns.min.js"/>

如果选择此方法，请注意，该库在dateFns对象下命名空间，就像jQuery在$下命名空间一样。

<script>
  console.log(
    dateFns.isToday(new Date())
  );
</script>

Date-fns基本用法

假设您使用的是模块加载器，则只需要您需要的那些部件。以下示例显示如何格式化日期。

const format = require('date-fns/format');
console.log(
  format(new Date(2017, 6, 6), 'MM/DD/YYYY')
);

// '06/07/2017'

是否要更改语言环境？没问题：

const format = require('date-fns/format');
const deLocale = require('date-fns/locale/de') // German

console.log(
  format(new Date(2017, 6, 6), 'DD MMMM YYYY', { locale: deLocale })
);

// 06 Juli 2017

以下是受支持的语言列表。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

如果您使用的是浏览器，请不要忘记dateFns helper方法的任何调用都挂在dateFns对象之外。以下是使用恰当命名的lastDayOfMonth方法确定月份的最后一天的方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.28.5/date_fns.min.js"></script>
<script>
  console.log(
    dateFns.lastDayOfMonth( new Date(2017, 6, 7) )
  );
  // Mon Jul 31 2017 00:00:00 GMT+0200 (CEST)
</script>

注意date-fns具有确定周，季度和年的最后一天的等效方法。

不变性，纯正和简单

date-fns的卖点之一是其功能纯净，易于解释。这样可以使代码易于理解，并在出现问题时更易于调试。

让我使用Moment.js作为反示例进行演示。如前所述，Moment中的日期是可变的，这可能导致意外行为。

const moment = require('moment');
const now = new Date(); 
const mNow = moment(now);

mNow.add('day', 3);
console.log(mNow.toDate());
mNow.add(3, 'day');
console.log(mNow.toDate());

// 2017-07-08T22:00:00.000Z
// 2017-07-11T22:00:00.000Z

这里有几件事要注意。 Moment的add函数对其接受其参数的顺序并不挑剔（尽管第一个方法现在将抛出弃用警告）。但更令人困惑的是，如果您连续多次调用add ，您将不会得到相同的结果，因为Moment对象是可变的：

mNow.add(3, 'day'); // add 3 days
mNow.add(3, 'day'); // adds 3 **more** days

现在将其与date-fns进行比较，后者将参数保持在一个顺序中，并且始终返回相同的结果，并为每个调用返回一个新的Date对象。

let addDays = required('date-fns/add_days');
addDays(now, 3); // (April 30, 2017)
addDays(now, 3); // (April 30, 2017)
addDays(now, 3); // (April 30, 2017)

还要注意方法名称如何更具表现力（ addDays而不是add ），保持事物的一致性，并使一种方法只能执行一件事情和一件事情。

比较日期

如果您查看SitePoint JavaScript频道上的帖子列表，则可以看到有些列表被列出为在某个日期发布，而其他列表则被列出为X天前发布。如果您尝试在原始JavaScript中实现它可能会花费一些时间，但是使用date-fns则很容易–只需使用distanceInWords方法即可。

让我们比较两个不同的日期。

const distanceInWords = require('date-fns/distanceInWords');
const startDate = new Date(2017, 3, 27); // (April 27, 2017)
const endDate = new Date(2018, 3, 27); // (April 27, 2018)
console.log(
  distanceInWords(startDate, endDate)
);
// "about 1 year"

在date-fns中，如果您想知道另一单位的差异，则可以替换以下任何一种方式：

毫秒
秒
分钟
小时
天
月数
年份

其中方法名称为differenceIn[any of the above here]如differenceInDays 。

处理日期集合

Date-fns有一些非常方便的辅助方法，您可以使用它们以各种方式来操纵日期集合。

订购日期收集

以下示例使用compareAsc将日期按升序排序。为此，如果第一个日期在第二个日期之后，则返回1；如果第一个日期在第二个日期之前，则返回-1；如果日期相等，则返回0。

const compareAsc = require('date-fns/compare_asc');
const date1 = new Date('2005-01-01');
const date2 = new Date('2010-01-01');
const date3 = new Date('2015-01-01');
const arr = [date3, date1, date2];
const sortedDates = arr.sort(compareAsc);

// [ 2005-01-01, 2010-01-01, 2015-01-01 ]

如您所见，日期现在按升序排列。

compareAsc的对应方法是compareDesc 。

const compareDesc = require('date-fns/compare_desc');
...
const sortedDates = arr.sort(compareDesc);
// [ 2015-01-01, 2010-01-01, 2005-01-01 ]

生成两个日期之间的日期

要生成两个日期之间的日期，可以使用我们先前遇到的addDays方法，以及eachDay帮助器，该方法返回指定范围内的日期数组。

const addDays = require('date-fns/add_days');
const eachDay = require('date-fns/each_day');
const today = new Date();
const dayAWeekFromNow = addDays(today, 7);
const thisWeek = eachDay(today, dayAWeekFromNow); 
console.log(thisWeek);

// [ 2017-07-03, 2017-07-04, 2017-07-05, 2017-07-06, 2017-07-07, 2017-07-08, 2017-07-09, 2017-07-10 ]

寻找最近的日期

可以使用closestTo方法在日期数组中查找最接近某个日期的日期。此代码段来自上一个示例：

const closestTo = require('date-fns/closest_to');
...
const christmas = new Date(2017, 11, 25);
const closestToChristmasDate = closestTo(christmas, thisWeek); 
// 2017-07-10T

如果您想获取数组的索引，则还有closeestIndexTo方法。

时区

date-fns的一个缺点是它目前没有像Moment.js那样的任何时区帮助程序功能。这个Stack Overflow答案实际上为原生Date对象如何实际不存储“实时区域”数据提供了一些背景知识。但是，date-fns始终返回运行代码的本地时区。

在该线程中，您会注意到他们提到了在JavaScript中原生设置时区的一种有限方式。如答案所示，这不是一个全面的解决方案，但是它适用于仅需要输出转换（从UTC或本地时间到特定时区）的许多情况。

new Date().toLocaleString("en-US", {timeZone: "America/New_York"});

时区实际上是一个要解决的复杂问题，这就是为什么MomentJS拥有一个单独的库的原因。还计划在date-fns中添加时区支持，但是在撰写本文时，这仍在进行中。

结论

Date-fns是一个很棒的小程序库，它为您提供了很多在JavaScript中处理日期的辅助方法。我希望本文能给您足够的理解和启发，以便您进行检查并开始在自己的项目中使用它。该库正在非常积极的开发中，希望版本2即将来临。

基于此，我让您开始使用date-fns，请在下面的评论中让我知道您如何使用date-fns。

翻译自: https://www.sitepoint.com/date-fns-javascript-date-library/

date-fns日期格式化

dingshi7798

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫