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

47次阅读

共计 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？

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

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

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

Day.js 的益处

应用相似的 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 少

JavaScript 社区中的 Day.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 概述

表白数字日历日期并打消歧义的规范办法是国际标准化组织（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 插件。应用 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>

Node.js 和 ES6 导入的 RelativeTime 插件

当应用 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 获取工夫

提供示意绝对于 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

如何生成日期的 Unix 工夫戳

这将给出 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]

以 JSON 格局获取工夫和日期

将其序列化为 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
关于前端:Web-代码片段主题
关于前端:细数各版本JS的新特性
关于前端:教你做小游戏-五子棋怎么存棋局信息
关于前端:网页视频autoplay兼容及解决方案