一文搞懂Dayjs - 技术栈

在 JavaScript 中处理日期和时间时，开发人员经常发现自己正在努力解决内置对象的复杂性。Date

这就是像 DayJS 这样的外部库发挥作用的地方，它提供了大量优势，使处理日期和时间变得轻而易举。

在本文中，我将向您介绍 DayJS 以及这个小型库如何极大地提高您的代码库和生产力。

以下是我们将介绍的内容：

如何安装 DayJS 库
如何在 JavaScript 中使用日期和时间
如何利用 DayJS 库使这些函数更轻松、更简洁、更易读
在原版JS和DayJS中执行功能之间的比较
DayJS 库中可用的有用函数

JavaScript 中日期对象的快速介绍

您可以在 JavaScript 中使用对象来处理日期和时间段。但有时处理对象可能很麻烦，并且日期/时间可能难以操作。Date Date

让我们看看如何在 JavaScript 中获取今天的日期：

js 复制代码

var date = new Date();

这将给我们一个 ISO 日期（这是一种通用日期格式），如下所示：

2023-08-29T04:07:34.791Z

因此，您可以在中看到，标记了日期的时间部分的开始点。那么下面的数字是。末尾表示没有指定时区，应使用 UTC 时区

sql 复制代码

year-month-date T hours:minutes:seconds.fractional seconds Z

DayJS 库

现在，我并不是说使用日期和时间的其他方法是错误的，但由于它们的复杂性，对我来说，它们似乎不值得麻烦。

在处理代码中的日期和时间时，我想要一个易于使用的开箱即用解决方案，以增加代码的可读性并提供灵活性。

这就是DayJS发挥作用的地方。这是在 JavaScript 中以库的形式处理日期和时间的另一种方式。

与其他库不同，该库的面积非常小。

如何安装 DayJS 库

DayJS 可以使用以下命令通过 yarn 或 npm 包管理器轻松安装

sh 复制代码

// yarn
yarn add dayjs

//node
npm install dayjs

要在文件中使用 DayJS，只需使用常规导入语法导入它：.js

js 复制代码

import dayjs from 'dayjs'

DayJS API 和基本语法

首先我们来看用js原生来实现一个输出。

js 复制代码

const formatDate = (date) => {
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();


    var formattedDay = day < 10 ? "0" + day : day;
    var formattedMonth = month < 10 ? "0" + month : month;


    return formattedDay + "/" + formattedMonth + "/" + year;
}


var currentDate = new Date();
var formatted = formatDate(currentDate);
console.log(formatted); //输出29/08/2023

下面我们来看如何用dayjs来简化操作。

js 复制代码

import dayjs from "dayjs";
const currentDate = dayjs();
const formattedDate = currentDate.format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate);

在上面的代码中，我们使用了实用程序函数。此函数允许我们根据通用的 JS 格式语法传递我们首选的日期格式。dayjs.format()

DayJS 中的不可变性和不可变对象

相比之下，不变性意味着对象的状态一旦创建就无法更改，因为它不会对实际对象本身进行"更改"操作。

使用不可变对象时，可以使用修改的值创建新实例，而不是更改原始实例。这有助于确保您的数据在整个程序中保持一致且可预测。

不可变数据结构通常在函数式编程中受到青睐，并且可以产生更健壮、更易于维护的代码。

当您对 DayJS 对象执行操作（例如加减时间）时，库会返回一个具有修改值的新实例，而原始实例保持不变。

此方法可防止对数据进行意外更改，并降低引入难以跟踪的错误的风险。

js 复制代码

var originalDate = dayjs("2023-07-16");
var modifiedDate = originalDate.add(1, "day");

console.log(originalDate.format("YYYY-MM-DD")); // Output: "2023-07-16"
console.log(modifiedDate.format("YYYY-MM-DD")); // Output: "2023-07-17"

使用 DayJS，您可以使用各种可用函数随意修改原始日期对象，而无需丢弃原始值。这意味着可以随时使用/访问它。

解析灵活性

解析日期字符串在普通 JavaScript 中可能是一个真正的挑战，尤其是在处理非标准格式时。

DayJS 提供了一组广泛的解析选项，使其在处理各种输入格式时更加通用。在处理来自不同源或可能具有不同日期表示形式的 API 的数据时，此功能特别有价值。

用户输入：处理用户输入（如表单中的日期）时，用户可能会以各种格式输入日期。DayJS的解析功能使您能够准确、一致地处理这些输入。
数据库交互：数据库可能以不同的格式或时区存储日期。DayJS的解析可以帮助正确解释这些日期，以便在您的应用程序中使用。
API 响应：API 通常以标准化格式（如 ISO 8601）返回日期和时间数据，但它们也可能有所不同。DayJS 使您能够轻松解析 API 响应，确保应用程序中的数据表示正确。

这确实需要从 DayJS 添加插件------这可以很容易地导入。customParseFormat

js 复制代码

import dayjs from "dayjs";
import CustomParseFormat from "dayjs/plugin/customParseFormat";

dayjs.extend(CustomParseFormat);

js 复制代码

import dayjs from "dayjs";
import customParseFormat from 'dayjs/plugin/customParseFormat.js'
dayjs.extend(customParseFormat)

const customFormat = 'YYYY/MM/DD HH:mm:ss';

const dateStr = '2023/08/23 14:37:41';
const parsedDate = dayjs(dateStr, customFormat);


console.log(parsedDate.format('YYYY-MM-DD'));

如何对日期和时间进行加减

javascript 复制代码

var date = dayjs().add(5, "day").toISOString(); //2023-08-21T16:43:33.000Z

javascript 复制代码

var date = dayjs().subtract(5, "day").toISOString(); //2023-08-11T16:43:33

如何在 DayJS 中比较日期

对于 JavaScript 对象，您通常使用（>）或（<）运算符执行此操作。

javascript 复制代码

var date1 = new Date("2023-07-16");
var date2 = new Date("2023-07-18");

if (date1 < date2) {
  console.log("Date 1 is before Date 2");
} else {
  console.log("Date 1 is after Date 2");
}

虽然这看起来很容易阅读和使用，但 DayJS 提供了一个很棒的 API 来处理日期比较，可以更容易地立即阅读。

现在假设我们要检查 date1 是否早于 date2 -- 我们可以使用 API 函数。我和许多其他开发人员发现代码实际在做什么要清楚得多，而不必考虑代码使用的是哪个运算符。isBefore()

javascript 复制代码

if (date1.isBefore(date2)) {
  console.log("Date 1 is before date 2");
} else {
  console.log("Date 1 is after date 2");
}

您还可以在函数中使用类似的结果，检查 date1 是否在 date2 之后。isAfter()

javascript 复制代码

if (date1.isAfter(date2)) {
  console.log("Date 1 is after date 2");
} else {
  console.log("Date 1 is before date 2");
}

JavaScript 复制代码

//check if date1 is the same as date2
if (date1.isSame(date2)) {
  console.log("Date 1 is exactly the same as date 2");
} else {
  console.log("Date 1 is not exactly the same as date 2");
}

假设我们要检查日期是否介于两个范围之间。同样，DayJS通过该功能使这变得更容易。使用该函数还为我们带来了其他几个好处：isBetween()``isBetween()

轻松检查日期范围：您可以使用轻松检查日期是否在指定范围内，而不是手动比较日期和执行算术运算。isBetween()
可读性和可维护性：使用可使代码更具可读性和可理解性。它清楚地传达了检查日期是否在某个范围内的意图。isBetween()
支持包含和排除范围：DayJS 中的函数允许您指定开始日期和结束日期是包含在范围中还是排除在范围之外。这使您可以灵活地定义日期间隔。isBetween()

例：

javascript 复制代码

const targetDate = dayjs('2023-08-15');
const startDate = dayjs('2023-08-01');
const endDate = dayjs('2023-08-31');

const isWithinRange = targetDate.isBetween(startDate, endDate, null, '[]'); 
console.log(isWithinRange) // Output: true

如您所见，函数、、并更清楚地说明了代码正在检查的内容。isBefore``isAfter``isSame``isBetween

拥有如此冗长的名称表明了函数正在做什么的明确意图（与JavaScript使用运算符或数学转换的内置方法相反）。API 函数的清晰简洁的性质可能对初级开发人员或只是浏览代码时有所帮助。

这在 DayJS 函数中肯定更为明显，例如：

isYesterday()
isTomorrow()
isToday()

如何获得两个日期之间的差异

该函数使获取两个日期之间的差异变得如此简单。它可以向我们显示距离特定日期和时间有多少天、几周、几小时。您可以使用该功能完成所有这些操作。diff()

我们来看看这个函数：diff

javascript 复制代码

const date1 = dayjs("2019-01-25");
const date2 = dayjs("2018-06-05");

const differenceInMilliseconds = date1.diff(date2); 
console.log(differenceInMilliseconds); // Output: // 20214000000

也可以让他指定输出的单位

javascript 复制代码

const date1 = dayjs("2023-01-25");
const date2 = dayjs("2022-06-05")
date1.diff(date2, "month"); // 7 (months)

const date1 = dayjs("2023-08-25");
date1.diff("2023-08-27", "day"); // 2

默认情况下，会将结果截断为零小数位，返回一个整数。如果你想要一个浮点数，传递 true 作为第三个参数，这将给你一个更准确的差值。diff()

javascript 复制代码

const date1 = dayjs("2023-01-25");
date1.diff("2022-06-05", "month", true); // 7.645161290322581

如何获取时间段的开始或结束

go 复制代码

startOf`并且是 DayJS 库中另外两个很棒的函数。它们允许您轻松返回日期期间的开始和结束。`endOf

例如，您可以获取一天，一周，一个月或一年的开始/结束。当需要计算一个月还剩多少天时，这可能很方便。

让我们看看如何使用它：

javascript 复制代码

const startOfDay = dayjs().startOf("day"); // 00:00:00 of today

// or given date
const startOfGivenDate = dayjs("2023-08-12T15:00:00").startOf("day");

const startOfWeek = dayjs().startOf("week"); // 00:00:00 first day of the week (locale aware)
const startOfYear = dayjs().startOf("year"); // 1st Jan 2023 00:00:00

const endOfDay = dayjs().endOf("day"); // 23:59:59 of today
const endOfWeek = dayjs().endOf("week"); // 23:59:59 of last day of week (locale aware)
const endOfYear = dayjs().endOf("year"); // 31 Dec 2023 23:59:59

结论

本文的最终目标是重点介绍一个有用的库，该库使使用日期和时间变得更加容易。该代码比JavaScript中内置的标准Date对象更简洁，更易于阅读。

如果你想了解更多的细节，可以去Day.js中文网 (fenxianglu.cn)

官网进行查看