如何在JavaScript中从一个日期中添加和减去时间

900 阅读6分钟

在这篇文章中,我们将讨论如何用JavaScript的Date 对象进行日期操作。具体来说,我们将看到你如何在JavaScript中向Date 对象添加时间,并从Date 对象中减去时间。

很多时候,你需要在JavaScript中处理日期和时间。幸运的是,JavaScript提供了一个内置的Date 对象,它为日期和时间管理提供了很多实用方法。尽管这些方法对于检索日期和时间的不同元素确实很有用,但Date 对象并没有提供任何可以用来操作日期本身的方法。在大多数情况下,你可以只使用这些方法来格式化输出日期和时间。

事实上,如果你想对一个Date 对象进行操作,比如在一个日期中加入时间或减去时间,在vanilla JavaScript中没有简单的方法。通常情况下,你最终会实现一个适合你的自定义解决方案。另外,你可以使用一个日期和时间库,比如moment.js。今天,我们将讨论在JavaScript中进行日期操作的两种方法。

如何用Vanilla JavaScript将时间添加到JavaScript日期中

在这一节中,我们将讨论如何在vanilla JavaScript中向JavaScriptDate 对象添加时间。

在JavaScript中,getTime() 函数返回自Unix纪元时间以来的毫秒数。这只是一个计算机时间惯例,它计算的是1970年1月1日UTC午夜后的秒数(JavaScript中的毫秒数)。

让我们试着理解如何使用getTime() 函数来为JavaScript中的Date 对象添加时间。在下面的例子中,我们将在现有的Date 对象中增加一个小时。

var currentDateObj = new Date();
var numberOfMlSeconds = currentDateObj.getTime();
var addMlSeconds = 60 * 60000;
var newDateObj = new Date(numberOfMlSeconds + addMlSeconds);

结果

currentDateObj: Sat Jul 24 2021 00:19:27 GMT-0300 (Atlantic Daylight Time)
newDateObj: Sat Jul 24 2021 01:19:27 GMT-0300 (Atlantic Daylight Time)

首先,我们已经用当前的日期初始化了currentDateObj 这个变量,它是一个Date 对象。接下来,我们用getTime() 函数从currentDateObj 对象中得到了毫秒数。

接下来,我们计算了一小时内的毫秒数。基本上,我们只是将一小时内的分钟数(60)乘以一分钟内的秒数(60),再乘以一秒钟内的毫秒数(1000),得到一小时内的毫秒数(60000)。

你可能已经知道,你可以通过提供毫秒数作为第一个参数来初始化一个Date 对象,这将初始化一个引用它的日期对象。因此,我们将numberOfMlSecondsaddMlSeconds 加在一起,得到总的毫秒数,我们用它来初始化一个新的日期对象。最终的结果是newDateObj 对象,与currentDateObj 对象相比,它应该显示一个提前一个小时的日期。

事实上,你可以继续做一个可重复使用的函数,如下面的片段所示。

function addHoursToDate(objDate, intHours) {
    var numberOfMlSeconds = objDate.getTime();
    var addMlSeconds = (intHours * 60) * 60000;
    var newDateObj = new Date(numberOfMlSeconds + addMlSeconds);

    return newDateObj;
}

下面是你如何调用它来获得,例如,一个正好在未来一天的日期。

addHoursToDate(Date.now(), 24)

结果

Sat Jul 25 2021 00:14:01 GMT-0300 (Atlantic Daylight Time)

这就是你如何在JavaScript中使用getTime() 函数来为Date对象添加时间。你也可以使用上述函数在现有的Date对象中增加天数,你只需要在调用上述函数之前将天数转换为小时数。

如何用Vanilla JavaScript从JavaScript日期中减去时间

在本节中,我们将看到如何从一个JavaScriptDate 对象中减去时间。

正如我们在上一节已经讨论过的,你可以使用getTime() 函数从一个Date 对象中得到毫秒数。因此,从一个Date 对象中减去时间的逻辑与添加操作非常相似,唯一的例外是我们需要减去毫秒而不是添加。

让我们通过下面的例子来看看它是如何工作的。

function subtractTimeFromDate(objDate, intHours) {
    var numberOfMlSeconds = objDate.getTime();
    var addMlSeconds = (intHours * 60) * 60000;
    var newDateObj = new Date(numberOfMlSeconds - addMlSeconds);

    return newDateObj;
}

numberOfMlSeconds 正如你所看到的,它与添加操作几乎相同,唯一的例外是我们要从addMlSeconds ,而不是添加它。

如何使用Moment.js库来执行日期操作

在上一节中,我们讨论了如何使用vanilla JavaScript来执行日期和时间操作。如果你不需要用JavaScriptDate 对象进行任何复杂的操作,你可以用vanilla JavaScript实现。另一方面,如果你的项目需要你执行不同类型的日期和时间操作,最好使用第三方库,这样可以使事情变得更简单。

日期和时间可能出乎意料地复杂。举个例子,想想用上面的方法在一个日期上增加若干年。这很容易,如果年份总是相同的长度。然而,在现实世界中,我们有闰年。同样地,如果你想在一个日期上添加若干个月,你必须知道每个月有多少天。

在本节中,我们将看到你如何使用Moment.js库,它提供了大量的实用方法来操作JavaScriptDate 对象。继续下载Moment.js库,你就可以使用它了!

你可以在这个CodePen中测试一下Moment.js库。

// display the current datetime
console.log(moment().format());

// add '1' hour to the current datetime
console.log(moment().add(1, 'h').format());

// add '30' minutes to the current datetime
console.log(moment().add(30, 'm').format());

// add '2' days to the current datetime
console.log(moment().add(2, 'd').format());

// add '1' week to the current datetime
console.log(moment().add(1, 'w').format());

// add '1' month to the current datetime
console.log(moment().add(1, 'M').format());

// subtract '1' hour from the current datetime
console.log(moment().subtract(1, 'h').format());

// subtract '30' minutes from the current datetime
console.log(moment().subtract(30, 'm').format());

// subtract '1' day from the current datetime
console.log(moment().subtract(1, 'd').format());

// subtract '1' week from the current datetime
console.log(moment().subtract(1, 'w').format());

// subtract '3' months from the current datetime
console.log(moment().subtract(3, 'M').format());

你只需要调用moment() 函数来获取当前的日期对象。一旦你得到它,你可以使用不同的解析方法来格式化和操作方法来操作当前的日期对象。

你可以使用下面的CodePen来试验不同的Moment实用方法和加减日期的方式。为了获得更多的参考,我建议你访问官方文档

所以这就是你如何使用Moment.js库来格式化和操作日期。

总结

今天,我们讨论了如何用JavaScript日期对象进行日期操作。除了vanilla JavaScript之外,我们还探讨了Moment.js库,它提供了相当简单的方法来进行日期操作。