关于前端:JavaScript日期处理不再难Dayjs带你飞

3次阅读

共计 10250 个字符，预计需要花费 26 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱
体验地址:https://chat.waixingyun.cn/#/home
能够退出网站底部技术群，一起找 bug.

本文介绍了 Day.js 的应用办法，Day.js 是一个轻量级的 JavaScript 库，用于解析、验证、操作和格式化日期和工夫。Day.js 的应用办法相似于Moment.js，但 Day.js 的大小只有 2KB，比 Moment.js 更小。

Day.js 反对链式语法，能够通过插件扩大性能，同时 Day.js 还提供了许多有用的性能，如绝对工夫、时区反对、本地化等。

Day.js的次要性能包含日期解析、日期格式化、日期操作、绝对工夫和本地化。日期解析包含字符串解析和日期对象解析，能够将字符串转换为日期对象，也能够将日期对象转换为字符串。日期格式化能够将日期对象格式化为指定的字符串格局。日期操作能够进行日期的加减、比拟和判断。绝对工夫能够将日期转换为绝对于以后工夫的时间差，如“2 分钟前”、“1 小时前”等。本地化能够将日期格式化为本地化的格局，包含日期格局、工夫格局、绝对工夫格局等。

总之，Day.js 是一个十分有用的 JavaScript 日期库，能够帮忙开发人员轻松地解决日期和工夫。它具备轻量级、易于应用和扩大、反对链式语法等长处。如果你须要在 JavaScript 中解决日期和工夫，那么 Day.js 是一个不错的抉择。

Day.js 是 JavaScript 中最受举荐的日期和工夫格式化库之一，因为它能够用于客户端和服务器端渲染，并且在这两种状况下都能完满地工作。

上面是一个图表，显示了 Day.js 每月的 NPM 下载量。

上面是一张图表，显示了曾经增加到 GitHub 上的 Day.js 星标。

在本文中，咱们将展现如何应用它来可能代替 Moment.js。

Moment.js 是一个 JavaScript 包，它使得在 JavaScript 中解析、验证、操作和显示日期和工夫非常简单。

自从 Moment.js 团队公布了对于其应用的弃用告诉以来，开发人员被迫迁徙到 Day.js 和其余倡议的库。上面列出了 Moment.js 的毛病。

与树摇优化不兼容，因为它会导致较大的捆绑包大小和性能问题
Moment.js 存在一个影响可变性的问题。
因为其简单的 API 和宏大的捆绑包大小，如果正在开发须要高性能的 Web 应用程序，则可能会导致显着的性能损失

应用相似的 API，Day.js 旨在成为 Moment.js 的简略替代品。Day.js 不是一个齐全兼容的替代品；然而，如果你习惯于应用 Moment 的 API 并且须要疾速迁徙，请思考应用 Day.js：

应用 Day.js 性能高。
Day.js 比 Moment.js 更轻，因为 Date.js 的软件包大小仅约为 232 kB。Day JS 的最新版本为 7Kb（已压缩），大小为 2Kb（已压缩）。
Day.js 能够作为 JavaScript 文件从 CDN 或本地文件中蕴含，同时反对 import 和 require。

不过，有一个毛病：

Day.js 的性能比 Moment.js 少

继续更新工具的需要是开发人员面临的问题的触发因素。任何 Web 开发人员都会始终以最大化优化为指标，以生产简略、疾速的应用程序。为了保障软件产品的高性能并保护其安全性，咱们必须定期降级咱们的库和框架到最新版本。

Day.js 是一个优良的代替 Moment.js 的抉择，当比拟大小和性能时。

寻找 Day.js 的 CDN 很简略，cdnjs.com 提供了一个 Day.js CDN，可用于咱们的浏览器。CDN 链接具备一个脚本标签，能够增加到咱们的 HTML 代码的顶部或底部。

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

应用 Unpkg：

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

要在 Node.js 中装置 day，请运行上面的代码。

npm i dayjs

应用以下代码将 Day.js 作为 Node.js 我的项目的依赖项：

const dayjs = require("dayjs");

应用 Babel 或 ES6：

import Dayjs from "dayjs";

在本教程中，咱们将应用 Day.js CDN 和纯 JavaScript 在浏览器中格式化日期和工夫。

表白数字日历日期并打消歧义的规范办法是国际标准化组织（ISO）日期格局。能够应用 JavaScript 日期办法toISOString()，它以 ISO 格局返回新造成的日期，以确认此格局。

当咱们在浏览器中运行 Day.js 时，.format() 办法会返回一个 ISO 格局的字符串。这与原生 JavaScript 的 toISOString() 日期构造函数办法十分类似。

console.log(dayjs().format())
//Output: 2022-08-17T09:28:20+01:00

在方括号内搁置转义字符（例如 [MM，DD，YY]）：

dayjs().format() // Output: 2022-08-17T09:31:09+01:00 
dayjs().format('MM') // Output: 08
dayjs().format('DD') // Output: 17
dayjs().format('YY') // Output: 22
dayjs().format('MMMM') // August

此外，能够定义你心愿日期以哪种格局返回：

console.log(dayjs('2022-04-2').format('DD/MM/YYYY')) // Output: 02/04/2022

更多格式化内容：

dayjs().format('a') // am

dayjs().format('A') // AM

// @ The offset from UTC, ±HHmm
dayjs().format('ZZ') // +0100

// @ The millisecond, 3-digits
dayjs().format('SSS') // 912

dayjs().format('h:mm A') // 8:28 AM  

dayjs().format('h:mm:ss A') // 8:30:51 AM 

dayjs().format('MM/DD/YYYY') // 08/19/2022

dayjs().format('M/D/YYYY') // 8/19/2022

dayjs().format('ddd, hA')
// Output:  "Fri, 8AM"

dayjs().format('MMM D, YYYY') 
// Aug 19, 2022

咱们还能够看到一些高级的日期格局：

dayjs().format('ddd, MMM D, YYYY h:mm A');
// @ Output: Fri, Aug 19, 2022 8:23 AM        

dayjs().format('MMM D, YYYY h:mm A');
// Aug 19, 2022 8:24 AM

dayjs().format('dddd, MMMM D YYYY, h:mm:ss A')
// Output:  "Friday, August 19 2022, 8:15:51 AM"

dayjs().format('dddd, MMMM Do YYYY, h:mm:ss A')
// output => "Friday, August 19o 2022, 8:15:51 AM"

在持续其余示例之前，咱们来讨论一下 RelativeTime 插件。应用 RelativeTime 插件，能够将日期和工夫数字转换为绝对语句，例如“5 小时前”。

应用 CD 装置浏览器：咱们必须应用 Relativetime CDN，而后应用 Day.js 设置它，以使 RelativeTime 插件失常工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js"
    integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

其次从 cdnjs.com 获取的 CDN。

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/relativeTime.min.js"></script>

绝对工夫插件正在为 Day.js 进行设置:

<script>
    dayjs.extend(window.dayjs_plugin_relativeTime)    
</script>

当应用 npm i dayjs 时，RelativeTime 插件位于 Day.js 包内。只须要 Day 内的 RelativeTime 门路即可应用它。

const dayjs = require('dayjs')
var relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)

ES6 import

import Dayjs from "dayjs";
import relativeTIme from "dayjs/plugin/relativeTime";
Dayjs.extend(relativeTIme);

提供示意绝对于 X 的工夫字符串。绝对工夫插件将使咱们可能实现这一点。

始终确保应用 dayjs.extend 配置相干插件。您能够浏览更多对于 Day.js 插件的信息。

dayjs.extend(window.dayjs_plugin_relativeTime);
var a = dayjs("2022-01-01");
console.log(dayjs("2020-01-01").from(a))
// Output: 2 years ago

如果传递 true，能够取得没有后缀的值。

dayjs.extend(window.dayjs_plugin_relativeTime);
var a = dayjs("2022-01-01");
console.log(dayjs("2020-01-01").from(a, true))
// Output: 2 years

这将把绝对于当初的工夫字符串转换进去。当初须要一个 RelativeTime 插件。

<script>
    dayjs.extend(window.dayjs_plugin_relativeTime);
    console.log(dayjs('2000-01-01').fromNow()) 
</script>

来自将来：

<script>
    dayjs.extend(window.dayjs_plugin_relativeTime);
    console.log(dayjs('2050-01-01').fromNow()) 
</script>

// Output: in 27 years

没有后缀：您]能够应用 true 布尔值提供返回日期字符串。

dayjs.extend(window.dayjs_plugin_relativeTime);
dayjs('2000-01-01').fromNow(true)  // Output: 23 years

这将返回一个示意绝对工夫到当初的字符串。请记住，这取决于绝对工夫插件。

dayjs.extend(window.dayjs_plugin_relativeTime);
dayjs('1980-01-01').toNow() // Output: in 43 years

短少后缀

dayjs('1980-01-01').toNow(true) // Output: 43 years

这将给出 Day.js 对象的 Unix 工夫戳，即自 Unix 纪元以来的秒数。Unix 工夫戳对象是 Day.js 中的内置对象，因而应用它不须要调用插件。

没有毫秒:

dayjs('2019-01-25').unix() // Output: 1548370800

以毫秒为单位：

dayjs('2019-01-25').valueOf() // Output: 1548370800000

依据 Day.js 文档，始终倡议应用 Unix 工夫戳。

获取以后月份的天数，无需插件:

dayjs('2020-02-04').daysInMonth() // Output: 29

为了以对象格局返回日期，应该应用带有 CDN 的 toObject 插件，或在 node.js 或 ES6 导入中要求它。

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/toObject.min.js"
    integrity="sha512-qWOc7v2jfO5Zg34fVOIfnpvDopsqDBilo8Onabl/MHIr5idHpg73tVRUGDMVOQs2dUEsmayiagk75Ihjn6yanA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Node.js

var dayjs = require('dayjs')
var toObject = require('dayjs/plugin/toObject')
dayjs.extend(toObject)

应用 toObject() 扩大 CDN:

<script>
    dayjs.extend(window.dayjs_plugin_toObject);
    dayjs('2020-01-25').toObject()
</script>

输入：

{date: 25, hours: 0, milliseconds: 0, minutes: 0, months: 0, seconds: 0, years: 2020}

为了以数组格局返回日期，应该应用带有 CDN 的 ToArray 插件，或在 node.js 或 ES6 导入中要求它。

CDN:

Node.js

var toArray = require('dayjs/plugin/toArray')
dayjs.extend(toArray)

dayjs.extend(window.dayjs_plugin_toArray);
dayjs('2022-08-04').toArray() // Output: [2022, 7, 4, 0, 0, 0, 0]

将其序列化为 ISO 8601 字符串格局，无需插件：

dayjs('2019-06-25').toJSON() // Output: 2019-06-24T23:00:00.000Z
dayjs('1996-01-11').toJSON() // Output: 1996-01-10T23:00:00.000Z
dayjs('2025-05-10').toJSON() // Output: 2025-05-09T23:00:00.000Z

返回一个蕴含日期示意的字符串，不须要插件:

dayjs('2025-03-20').toString() // Output: Wed, 19 Mar 2025 23:00:00 GMT
dayjs('2010-08-08').toString() // Output: Sat, 07 Aug 2010 23:00:00 GMT
dayjs('01-2005-25').toString() // @ Error output: Invalid Date

Day.js 对象是不可变的，这意味着所有批改它的 API 操作都会产生一个新的对象实例。

字符串转日期：查看以下代码以解析字符串并以日期格局返回它：

dayjs('2020-08-04T15:00:00.000Z')

一个已存在的本地 JavaScript Date 对象能够用来创立一个 Day.js 对象:

let d = new Date(2021, 02, 11);
let day = dayjs(); // The date returned by the first formatted date is copied in this line

当初应用 Parse：请参见上面的代码，以应用 Parse 返回以后日期

new Date(2021, 02, 11);
// Alternative
dayjs(new Date());

要查看日期和工夫是否无效，请应用 Day.js 中的 .isValid() 办法。该办法会产生一个布尔后果:

dayjs('1996-05-01').isValid(); // Output: true
dayjs('dummy text').isValid(); // Output: false
dayjs('2005-06-09').isValid(); // Output: true

Day.js 为察看雷同规范工夫的地区提供时区兼容性。应用 Day.js 时区须要一个插件。要在 Day.js 中应用时区，咱们须要同时装置时区和 UTC 插件:

const dayjs = require('dayjs')
const utc = require('dayjs/plugin/utc')
const timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)

UTC 插件的 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/utc.min.js"
    integrity="sha512-z84O912dDT9nKqvpBnl1tri5IN0j/OEgMzLN1GlkpKLMscs5ZHVu+G2CYtA6dkS0YnOGi3cODt3BOPnYc8Agjg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

时区插件的 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/timezone.min.js"
    integrity="sha512-fG1tT/Wn/ZOyH6/Djm8HQBuqvztPQdK/vBgNFLx6DQVt3yYYDPN3bXnGZT4z4kAnURzGQwAnM3CspmhLJAD/5Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Day.js 扩大时区和 UTC 插件：

<script>
    dayjs.extend(window.dayjs_plugin_utc)
    dayjs.extend(window.dayjs_plugin_timezone);
<script>

事例：

dayjs.tz("2020-06-01 12:00", "America/Toronto")

在管制台上输入：

let time = {
    $D: 18,
    $H: 11,
    $L: "en",
    $M: 10,
    $W: 1,
    $d: "Mon Nov 18 2013 11:55:00 GMT+0100 (West Africa Standard Time) {}",
    $m: 55,
    $ms: 0,
    $offset: -300,
    $s: 0,
    $x: {
        $localOffset: -60,
        $timezone: "America/Toronto"
    }
}

还能够应用 Day.js 中蕴含的 .toString() 办法，将时区作为一般字符串返回。

dayjs.tz("2013-11-18 11:55", "America/Toronto").toString()
// Output: Mon, 18 Nov 2013 16:55:00 GMT

如果你想解析时区格局的日期，请应用名为 CurrentParseFormate 的插件来帮助你解析时区：

Node.js

var customParseFormat = require('dayjs/plugin/customParseFormat')
dayjs.extend(customParseFormat)

dayjs('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z')
// Returns an instance containing '1969-05-02T18:02:03.000Z'

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/customParseFormat.min.js" integrity="sha512-FM59hRKwY7JfAluyciYEi3QahhG/wPBo6Yjv6SaPsh061nFDVSukJlpN+4Ow5zgNyuDKkP3deru35PHOEncwsw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

dayjs.extend(window.dayjs_plugin_customParseFormat);
dayjs.tz("12-25-1995", "MM-DD-YYYY", "America/Toronto").toString()
//Mon, 25 Dec 1995 05:00:00 GMT

更新偏移量，切换时区，而后返回到 day.js 对象实例。当第二个参数传递一个 true 值时，只有时区（和偏移量）被更改，而本地工夫放弃不变。

<script>
    dayjs.extend(window.dayjs_plugin_utc)
    dayjs.extend(window.dayjs_plugin_timezone);
<script>

dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);
dayjs.tz.guess()  //Asia/Calcutta

将你喜爱的时区设置为默认时区，而不是本地时区。在特定的 dayjs 对象中，依然能够自定义不同的时区

Node.js

var utc = require('dayjs/plugin/utc')
var timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)

CDN

dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);

dayjs.tz.setDefault("America/New_York") // Setting the default time

dayjs.tz("2019-08-05 11:00")

咱们首先理解了 Day.js 及其应用它格式化工夫和日期的益处。Day.js 简略地代替了 Moment.js。尽管 Moment.js 不是必须的，但 Day.js 提供了所有日期格式化、解析、插件和本地化要求。因而，能够应用 dayjs.org 在官网 Day.js 网站上抉择并查找更多信息。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://blog.openreplay.com/working-with-dates-and-times-with…

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

正文完

前端

发表至：前端

2023-04-18

0

关于前端:重磅前端开发技术之Vue架构知识分享

关于前端:React数据流对比recoil-vs-concent

关于前端:JS事件循环-Event-Loop

关于前端:EchartsdataZoom的自定义样式配置

关于前端:CSS文本平衡排版-textwrapbalance

关于前端:JavaScript日期处理不再难Dayjs带你飞

为什么要替换 Moment.js？

Day.js 的益处

JavaScript 社区中的 Day.js 反对

疾速开始

ISO 概述

格式化日期

RelativeTime 插件

Node.js 和 ES6 导入的 RelativeTime 插件

从 X 获取工夫

从当初开始计算工夫

获取以后工夫

如何生成日期的 Unix 工夫戳

计算一个月的天数

将日期作为对象返回

将日期作为数组返回

以 JSON 格局获取工夫和日期

提供日期和工夫作为字符串

解析日期

验证

时区

区解析

转换为时区

预计用户时区

默认时区设置

总结

交换

站内搜索