date-fns日期格式化_date-fns快速浏览，一个简单JavaScript日期库

date-fns日期格式化

Working with dates in JavaScript isn’t easy. That’s why if you look at the package.json files of most apps, you’ll usually find a library like Moment.js in there.

在JavaScript中使用日期并不容易。 这就是为什么如果查看大多数应用程序的package.json文件，通常会在其中找到像Moment.js这样的库。

Moment.js was one of the first libraries to gain notoriety. It made parsing/formatting/calculating dates less daunting for developers.

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

But do you know about a library called date-fns?

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

date-fns is generally considered to be a worthy alternative to Moment.js. Not only because it offers the same feature set, but it also appeals to functional programmers.

date-fns通常被认为是Moment.js的替代品 。 不仅因为它提供了相同的功能集，而且还吸引了函数式程序员。

安装date-fns (Install date-fns)

You can install date-fns with npm/Yarn:

您可以使用npm / Yarn安装date-fns ：

# Using npm
$ npm install date-fns

# Or using yarn
$ yarn add date-fns

格式化日期 (Formatting Dates)

Formatting dates is the bread and butter of libraries like Moment.js/date-fns. This is because native JavaScript doesn’t have a simple way to handle this.

格式化日期是Moment.js / date-fns之类的库的基础。 这是因为本机JavaScript没有简单的方法来处理此问题。

date-fns uses string patterns similar to Moment.js:

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"

It’s that simple! There are lots of ways to format dates so they look exactly the way you want them to.

就这么简单！ 有很多格式化日期的方法，因此它们看起来完全符合您的期望。

加/减日期 (Adding/Subtracting Dates)

Now that we can format dates, what about performing addition/subtractions with them? There are several functions for doing this:

现在我们可以格式化日期了，如何对它们进行加减运算呢？ 有几个功能可以做到这一点：

• addDays

  addDays

• subDays

  次日

• addWeeks

  addWeeks

• subWeeks

  子周

• addMonths

  addMonths

• subMonths

  个月

In the example below, we add 1 year to a specified date:

在下面的示例中，我们将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"

使用语言环境 (Using Locales)

Formatting is pretty easy, but what about locales? We know that users will be visiting your website from around the world, and we don’t want to assume they speak our native language.

格式化非常容易，但是语言环境呢？ 我们知道用户将在世界各地访问您的网站，并且我们不希望他们会说我们的母语。

For this, we can import specific locale plugins:

为此，我们可以导入特定的语言环境插件：

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"

2个日期之间的差异 (Differences Between 2 Dates)

The ability to calculate the differences between 2 dates is important for a date manipulation library. date-fns provides several functions for calculating this.

计算两个日期之间的差异的能力对于日期处理库很重要。 date-fns提供了几个函数来计算此值。

For example, we can calculate the days from January 1st to Christmas (as well as “business days”!):

例如，我们可以计算从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的足迹很小 (🎁 Bonus! date-fns has a Small Footprint 🎁)

One of the biggest downsides to using Moment.js is that it’s large! There isn’t a way to import individual functions because its API only allows for chaining. This means you’re required to import the entire library:

使用Moment.js的最大缺点之一就是它很大！ 无法导入单个函数，因为其API仅允许链接。 这意味着您需要导入整个库：

const moment = require('moment');
const formattedDate = moment(new Date()).format('MM/DD/YYYY');

console.log(formattedDate);
// => "03/17/2020"

With date-fns, you only grab the specific functions you need (a lot like with Lodash):

使用date-fns，您只需获取所需的特定功能(与Lodash相似)：

const format = require('date-fns/format');
const formattedDate = format(new Date(), 'MM/dd/yyyy');

console.log(formattedDate);
// => "03/17/2020"

This makes date-fns a much smaller dependency than Moment.js. See the graphic below for the bundle sizes of Moment.js vs date-fns:

这使得date-fns的依赖性比Moment.js小得多。 有关Moment.js与date-fns的捆绑包大小，请参见下图：

Source: BundlePhobia

资料来源： BundlePhobia

Note that there’s a way to configure webpack to exclude the “locale” plugins. This would significantly reduce its bundle size.

请注意，有一种方法可以将webpack配置为排除“语言环境”插件。 这将大大减小其束的大小。

结论 (Conclusion)

date-fns seems to be getting a lot more development work than Moment.js at the moment 😉. For this reason, it’s really well-maintained, and developers get more input into its direction. Along with its robust feature set and modern ES6 sensibilities, it’s worth giving it a try! 📅📌

到目前为止，date-fns似乎比Moment.js进行了更多的开发工作。 因此，它确实维护得很好，并且开发人员在其发展方向上获得了更多的投入。 凭借其强大的功能集和现代的ES6敏感性，值得一试！ 📅📌

The official docs for date-fns are really great, and have lots of code samples!

date-fns的官方文档非常棒，并且有很多代码示例！

翻译自: https://www.digitalocean.com/community/tutorials/js-date-fns

date-fns日期格式化