用JavaScript处理日期

立即通过http://jauyeung.net/subscribe/订阅我的电子邮件列表

在Twitter上关注我,网址为https://twitter.com/AuMayeung

https://medium.com/@hohanga上还有更多文章

在许多JavaScript程序中,处理日期和时间也很重要。这就是JavaScript具有内置功能的原因 Date 对象来处理日期。 Dates对象包含一个数字,该数字表示自1970年1月以来的UTC(Linux纪元时间)以来的毫秒数。

我们可以使用Date对象来做很多事情来操纵日期。但是,它有许多怪癖和缺少的功能。因此,在许多情况下,第三方库比使用内置的Date对象更好地处理日期。 Moment.js是最受欢迎的应用程序之一,因此当我们需要在JavaScript中操作日期时,它自然是首选。

内置日期对象

要在JavaScript中使用日期,我们必须创建一个 new Date 宾语。 date对象的构造函数采用零个或多个参数。如果没有传入任何参数,则创建的Date对象将具有实例化时的本地时区中的当前日期和时间。

它可以接受的参数包括日期字符串,另一个日期对象或(年,月索引,日,时,分,秒和毫秒)。我们可以将日期字符串如下传递给日期构造函数:

new Date('2019-01-01');

如果我们记录结果,我们得到 ‘Mon Dec 31 2018 16:00:00 GMT-0800 (Pacific Standard Time)’ 由于日期存储在UTC中,并且浏览器在太平洋时区的计算机上运行,​​因此在太平洋标准时间2019年1月1日比UTC晚8个小时。

如我们所见,将日期字符串传递给 Date 构造函数令人困惑。不同的浏览器将以不同的方式解析日期字符串。同样, Date.parse 方法也不应用于解析日期字符串。我们可以看到像我们传入的仅日期字符串被视为UTC而非本地时间。

如果我们想将Date对象传递给构造函数,我们可以编写:

new Date(new Date());

当我们记录结果时,我们会得到类似“ Sun Oct 20 2019 10:57:58 GMT-0700(太平洋夏令时间)”的信息。这是在您当地时间显示的。

我们可以将年,月索引,日,时,分,秒和毫秒传递给构造函数。只需要年份和月份。因此,我们可以编写如下内容:

new Date(2019,0,1,0,0,0,0)

如果我们将其记录下来,将返回“ Tue Jan 01 2019 00:00:00 GMT-0800(太平洋标准时间)”。请注意,构造函数的第二个参数中有0。第二个参数是月份索引,1月为0,2月为1,依此类推。因此,12月将是11月。其余的论点正是我们所期望的。第一个是年份,第三个是日期,第四个是小时,第五个是分钟,第六个是秒,最后一个是毫秒。

我们可以将Date对象转换为UNIX时间戳,这是自1970年1月1日UTC以来的毫秒数,其中一元 + 运算符,所以如果我们写:

+new Date(2019,0,1,0,0,0,0)

我们得到 1546329600000 当我们记录输出时,因为它将日期强制为数字。

获取时间戳的另一种方法是使用 .getTime() 方法。

要更改Date对象的各个组成部分(例如设置小时或日期)或更改Date的组成部分(例如星期几或每月的某天),可以使用一些方法在Date对象中执行此操作。

Date对象中的方法

Date对象中有一些方法可以获取和设置部分日期,以及将时间转换为UTC或设置时区偏移量。一些重要的Date对象方法包括:

Date.now()

以UNIX时间戳的形式返回当前时间,忽略leap秒。此方法是静态的。

Date.UTC()

以UNIX时间戳的形式返回当前时间,忽略leap秒。此方法是静态的。它接受与Date构造函数的最长参数列表相同的参数,即年,月索引,日,时,分,秒和毫秒,但仅需要年和月。我们可以按以下代码使用它:

Date.UTC(2019,0,1,1,0,0,0)

我们返回类似的东西 1546304400000

吸气功能

Date.getDate()

根据当地时间返回月中的某天。例如,如果我们有:

const date = new Date(2019,0,1,0,0,0,0);  
console.log(date.getDate());

因为我们在构造函数的参数中将其指定为月份中的某天,所以我们将得到1。

Date.getDay()

根据当地时间返回指定日期的星期几(0–6),其中0代表星期日,6代表星期六,而1到5代表之间的日期。例如,我们可以这样写:

const date = new Date(2019,0,1,0,0,0,0);  
console.log(date.getDay());

然后我们得到2,即星期二。

Date.getFullYear()

根据当地时间返回指定日期的4位数字年份。例如,我们可以这样写:

const date = new Date(2019,0,1,0,0,0,0);  
console.log(date.getFullYear());

然后我们得到2019,这是4位数字的年份 date

Date.getHours()

根据当地时间返回指定日期的小时(0–23)。例如,我们可以这样写:

const date = new Date(2019,0,1,0,0,0,0);  
console.log(date.getHours());

然后我们得到0,这是我们在构造函数的hours参数中指定的值。

日期。 getMilliseconds()

根据本地时间返回指定日期的毫秒数,范围从0到999。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getMilliseconds());

这将获得在 date 对象,该对象应返回构造函数中指定的0。

Date.getMinutes()

返回本地时间中指定日期的分钟(0–59)。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getMinutes());

然后,我们在构造函数中指定的时间为0分钟。

Date.getMonth()

根据当地时间返回指定日期的月份(从1月的0到12月的11)。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getMonth());

然后,我们在构造函数中指定的1月份的月份为0。

Date.getSeconds()

返回本地时间中指定日期的秒数(0–59)。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getSeconds());

然后,我们在构造函数中指定的时间为0秒。

Date.getTime()

返回指定日期的UNIX时间戳,这是自1970年1月1日00:00:00 UTC以来的毫秒数。对于以前的时间,它将是负面的。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getTime());

然后我们得到1546329600000从 getTime() 功能。简写是使用一元 + 运算符,如以下代码所示:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(+date);

如果运行上面的代码,则会记录相同的结果。

Date.getTimezoneOffset()

返回在您的主机设备上设置的当前位置的时区偏移量(以分钟为单位)。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getTimezoneOffset());

如果您的主机设备设置为太平洋时区,那么我们将得到480,因为自2019年1月1日起,太平洋时区比UTC落后8小时,因此我们得到的时区偏移为480分钟,即8小时。

Date.getUTCDate()

根据UTC,返回指定日期中从1到31的月份中的一天。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getUTCDate());

因为我们将2019年1月1日指定为日期,所以我们得到1。

Date.getUTCDay()

根据UTC中指定的日期,从0到6返回星期几。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getUTCDay());

然后我们得到2,因为2019年1月1日是星期二。

Date.getUTCFullYear()

根据UTC返回指定日期的4位数字年份。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getUTCFullYear());

我们得到2019年,因为这是我们在日期构造函数中指定的内容。

Date.getUTCHours()

根据UTC在指定日期返回0到23之间的小时数。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getUTCHours());

如果将语言环境设置设置为太平洋时区,则由于指定的当地时间为0,与UTC在2019年1月1日的8相同,因此得到8。

Date.getUTCMilliseconds()

根据UTC返回指定日期的毫秒数,范围从0到999。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getUTCMilliseconds());

这将获得在 date 对象,该对象应返回构造函数中指定的0。

Date.getUTCMonth()

根据UTC,将月份从指定的时间从一月的0到十二月的11返回。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getUTCMonth());

这将获得在 date 对象,它应该返回0,就像我们在构造函数中指定的一样。

Date.getUTCSeconds()

以UTC返回指定日期中的秒数(0–59)。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getUTCSeconds());

然后,我们在构造函数中指定的时间为0秒。

Date.getYear()

返回年份,根据本地时区,通常在指定日期为2到3位数字。

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
console.log(date.getUTCSeconds());

然后我们得到119 2019。

如果我们改为:

const date = new Date(1900, 0, 1, 0, 0, 0, 0);  
console.log(date.getYear());

1900年我们得到0。如果我们有:

const date = new Date(2000, 0, 1, 0, 0, 0, 0);  
console.log(date.getYear());

然后我们得到2000的100。因此,根据 getYear() 方法。最好使用 getFullYear() 方法,而不是从Date对象获取正确的年份。

设定器功能

我们上面提到的每个getter函数也都有相应的setter函数。我们为Date对象提供以下setter函数:

Date.setDate()

根据当地时间设置每月的某天。例如,如果我们有:

const date = new Date(2019,0,1,0,0,0,0);  
date.setDate(2)  
console.log(date);

当主机设备设置为太平洋时区时,我们会得到“ Wed Jan 02 2019 00:00:00 GMT-0800(太平洋标准时间)”,因为我们在 setDate 功能。

Date.setFullYear()

根据当地时间设置指定日期的4位数字年份。例如,我们可以这样写:

const date = new Date(2019,0,1,0,0,0,0);  
date.setFullYear(2020)  
console.log(date.getFullYear());

然后我们得到2020,这是4位数的年份 date

Date.setHours()

根据当地时间设置指定日期的小时(0–23)。例如,我们可以这样写:

const date = new Date(2019,0,1,0,0,0,0);  
date.setHours(3)  
console.log(date.getHours());

然后我们叫3 getHours 这是我们在小时参数中指定的 setHours 功能。

日期。 setMilliseconds()

根据当地时间在0到999之间设置指定日期的毫秒数。例如,我们可以这样写:

const date = new Date(2019,0,1,0,0,0,0);  
date.setMilliseconds(3)  
console.log(date.getMilliseconds());

这将设置在 date 对象,该对象应返回3,如我们在 setMilliseconds 当我们调用 getMilliseconds 功能。

Date.setMinutes()

设置当地时间中指定日期的分钟(0–59)。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setMinutes(20)  
console.log(date.getMinutes());

然后我们得到20分钟 getMinutes() 就像我们在 setMinutes 功能。

Date.setMonth()

根据当地时间设置指定日期的月份(从1月的0到12月的11)。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setMonth(3)  
console.log(date.getMonth());

然后我们得到从 getMonth() 在我们设置它之后 setMonth()

Date.setSeconds()

设置当地时间中指定日期的秒数(0–59)。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setSeconds(10);  
console.log(date.getSeconds());

然后我们得到10秒 getSeconds() 就像我们在 setSeconds 功能。

Date.setTime()

设置指定日期的UNIX时间戳,该时间戳是自1970年1月1日00:00:00 UTC以来的毫秒数。对于以前的时间,它将是负面的。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setTime(100)  
console.log(date.getTime());

然后我们从 getTime() 函数,因为我们将其设置为100 setTime

Date.setUTCDate()

根据UTC在指定日期中设置从1到31的月份中的一天。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setUTCDate(2)  
console.log(date.getUTCDate(2));

因为我们在2中指定了2 setUTCDate

Date.setUTCFullYear()

根据UTC设置指定日期的4位数字年份。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setUTCFullYear(2020)  
console.log(date.getUTCFullYear());

我们到2020年 getUTCFullYear() 因为这是我们在日期中指定的 setUTCFullYear() 功能。

Date.setUTCHours()

根据UTC在指定日期中将小时设置为0到23。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setUTCHours(2)  
console.log(date.getUTCHours());

我们得到2 getUTCHours() 因为我们在调用时指定了它 setUTCHours()

Date.setUTCMilliseconds()

根据UTC在0到999之间设置指定日期的毫秒数。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setUTCMilliseconds(10)  
console.log(date.getUTCMilliseconds());

这将获得毫秒数 getUTCMilliseconds(),它应返回10,如我们在 setUTCMilliseconds()

Date.setUTCMonth()

根据UTC,将月份从指定的时间从一月的0到十二月的11返回。例如,如果我们写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setUTCMonth(3);  
console.log(date.getUTCMonth());

这将获得在 date 对象,该对象应从返回3 getUTCMonth() 就像我们在 setUTCMonth() 呼叫。

Date.setUTCSeconds()

以UTC设置指定日期中的秒数(0–59)。例如,我们可以这样写:

const date = new Date(2019, 0, 1, 0, 0, 0, 0);  
date.setUTCSeconds(10);  
console.log(date.getUTCSeconds());

然后当我们打电话时,我们得到10秒 getUTCSeconds() 因为我们在调用时在10中指定 setUTCSeconds()

setYear() 方法设置the。最好使用 setFullYear() 方法,而不是从Date对象获取正确的年份。

Date对象有一些限制。例如,它不支持时区。当我们需要日期中的时区数据时,这会带来问题。 JavaScript日期仅支持本地时区,UTC或相对于UTC的时区偏移量。处理日期对象时,仅允许这些时区之间的某些转换。例如,当我们将Date对象转换为日期字符串时,我们只能在本地时间和UTC之间选择。 JavaScript Date对象在内部将日期存储在UTC中。

Moment.js

由于我们上面讨论的局限性,在JavaScript中操作时间和日期很痛苦。即使具有可用的功能 Date 对象,则有很多发生错误和错误的机会。另外,没有用于格式化时间和日期的函数,这是一个大问题。为了解决这个问题,我们使用moment.js。这是可用于处理时间的最佳库。

原生JavaScript Date对象的时区存在问题,其中YYYY-MM-DD日期被解析为UTC时间而不是本地时间。这会为不了解此问题的开发人员创建错误。参见https://stackoverflow.com/questions/29174810/javascript-date-timezone-issue

在不同的浏览器中,对日期部分的支持也有所不同。 (请参阅https://stackoverflow.com/questions/11253351/javascript-date-object-issue-in-safari-and-ie)

使用内置的Date函数添加和减去时间戳也很困难。没有编写大量代码并进行大量检查就无法做到这一点。另外,也无法比较2次。

如果不编写自己的使用第三方库的代码,则格式化日期也将不可用。

Moment.js通过提供内置函数来执行所有这些常见操作来解决所有这些问题。它提供了用于解析和格式化日期的功能。

moment 构造函数是您可以在其中传递日期字符串的地方, moment 对象将被创建。例如,您可以传递:

moment('2019-08-04')

你会回来的 moment 你可以和其他人比较 moment 对象,并按不同的时间跨度进行加减。

如果您没有将任何内容传递给 moment 构造函数,您将获得当前日期和时间。

它还需要第二个论点。如果要确保将日期解析为Y​​YYY-MM-DD日期,请输入 moment(‘2019–08–04’, 'YYYY-MM-DD')。如果您不知道日期或时间的格式,则可以输入一系列可能的格式,Moment会选择合适的格式:

moment('2019–08–04', ['YYYY-MM-DD', 'DD-MM-YYYY']);

创建Moment对象后,您可以执行许多操作,例如格式化日期:

const a = moment('2019–08–04', 'YYYY-MM-DD').format('MMMM Do YYYY, h:mm:ss a');  
console.log(a);// August 4th 2019, 12:00:00 am

const b = moment('2019–08–04', 'YYYY-MM-DD').format('dddd');  
console.log(b);// Sunday

const c = moment('2019–08–04', 'YYYY-MM-DD').format("MMM Do YY");  
console.log(c);// Aug 4th 19

const d = moment('2019–08–04', 'YYYY-MM-DD').format('YYYY [escaped] YYYY');      
console.log(d);// 2019 escaped 2019

const e = moment('2019–08–04', 'YYYY-MM-DD').format();  
console.log(e);// 2019-08-04T00:00:00-07:00

从上面的示例中,我们看到我们几乎可以用任何所需的方式格式化日期。

我们还可以通过写以下内容来判断一个日期相对于另一个日期的时间跨度:

const augDate = moment('2019–08–04', 'YYYY-MM-DD');  
const sepDate = moment('2019–09–04', 'YYYY-MM-DD');  
console.log(augDate.from(sepDate)); // a month ago

我们还可以添加或减去瞬间日期:

const augDate = moment('2019–08–04', 'YYYY-MM-DD');  
const sepDate = moment('2019–09–04', 'YYYY-MM-DD');  
console.log(augDate.add(10, 'days').calendar()); // 08/14/2019  
console.log(augDate.subtract(10, 'days').calendar()); // 07/25/2019

比较两个日期很容易:

moment('2010-01-01').isSame('2010-01-01', 'month'); // true  
moment('2010-01-01').isSame('2010-05-01', 'day');   // false, different month  
moment('2008-01-01').isSame('2011-01-01', 'month'); // false, different year

您还可以检查日期是否具有夏令时有效:

const augDate = moment('2019–08–04', 'YYYY-MM-DD');  
const decDate = moment('2019–12–04', 'YYYY-MM-DD');  
console.log(augDate.isDST()) // true  
console.log(decDate.isDST()) // false

您可以随时通过调用 toDate() 在Moment对象上起作用。

我们可以看到,JavaScript的Date对象在处理日期方面功能有限。它还无法很好地解析日期,也无法轻松格式化日期。这就是为什么我们需要使用Moment.js之类的库来填补空白,因此我们可以创建无错误代码的代码,从而更轻松地操作日期。


资讯来源:由0x资讯编译自DEV,原文:https://dev.to/aumayeung/handling-dates-in-javascript-2k93 ,版权归作者所有,未经许可,不得转载
你可能还喜欢