date-fns日期格式化_date-fns简介–轻量级JavaScript日期库
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：
如果选择此方法，请注意，该库在dateFns对象下命名空间，就像jQuery在$下命名空间一样。
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方法确定月份的最后一天的方法：
注意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日期格式化