分类
文章

理解javascript中的日期和时间

介绍

日期和时间是我们日常生活的一部分,因此在计算机编程中占有重要地位。在JavaScript中,您可能必须创建一个带有日历,火车时刻表或用于设置约会的界面的网站。这些应用程序需要根据用户的当前时区显示相关时间,或围绕到达和离开或开始和结束时间进行计算。此外,您可能需要使用JavaScript在每天的特定时间生成报告,或筛选当前营业的餐馆和场所。

为了实现所有这些目标以及更多目标,JavaScript附带了内置的Date对象和相关方法。本教程将介绍如何在JavaScript中格式化和使用日期和时间。

日期对象

Date 对象是JavaScript中的内置对象,用于存储日期和时间。它提供了许多用于格式化和管理数据的内置方法。

默认情况下,不提供任何参数的新Date实例将创建一个与当前日期和时间相对应的对象。这将根据当前计算机的系统设置来创建。

为了演示JavaScript的Date ,让我们创建一个变量并为其分配当前日期。本文是10月18日星期三在伦敦(GMT)撰写的,因此这是下面表示的当前日期,时间和时区。

now.js

// Set variable to current date and time
const now = new Date();
// View the output
now;
OutputWed Oct 18 2017 12:41:34 GMT+0000 (UTC)

查看输出,我们有一个包含以下内容的日期字符串:

Day of the Week Month Day Year Hour Minute Second Timezone
Wed Oct 18 2017 12 41 34 GMT+0000 (UTC)

日期和时间以我们可以理解为人类的方式分解和打印。

但是,JavaScript会根据源自Unix timetimestamp理解日期,该timestamp是从1970年1月1日午夜以来经过的毫秒数组成的值。我们可以使用getTime()方法获取时间戳。

// Get the current timestamp
now.getTime();
Output1508330494000

当前时间戳在输出中显示的大数字表示与2017年10月18日相同的值。

Epoch time (也称为零时间)由日期字符串01 January, 1970 00:00:00 Universal Time (UTC)0时间戳表示。我们可以在浏览器中通过创建一个新变量并根据时间戳0为其分配一个新的Date实例来对其进行测试。

epoch.js

// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);
epochTime;
Output01 January, 1970 00:00:00 Universal Time (UTC)

纪元时间被选为计算机在编程的前几天测量时间的标准,并且它是JavaScript使用的方法。重要的是要了解时间戳和日期字符串的概念,因为根据应用程序的设置和用途可以同时使用两者。

到目前为止,我们学习了如何基于当前时间创建新的Date实例,以及如何基于时间戳创建一个Date实例。总共,您可以通过四种格式在JavaScript中创建新的Date 。除了当前时间的默认值和时间戳,您还可以使用日期字符串,或指定特定的日期和时间。

Date Creation Output
new Date() Current date and time
new Date(timestamp) Creates date based on milliseconds since Epoch time
new Date(date string) Creates date based on date string
new Date(year, month, day, hours, minutes, seconds, milliseconds) Creates date based on specified date and time

为了演示引用特定日期的不同方法,我们将创建三种新的Date对象,它们分别代表格林威治标准时间1776年7月4日下午12:30。

usa.js

// Timestamp method
new Date(-6106015800000);
// Date string method
new Date("January 31 1980 12:30");
// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);

上面的三个示例都创建了一个包含相同信息的日期。

您会注意到timestamp方法的值为负数;大纪元时间之前的任何日期都将表示为负数。

在日期和时间方法中,我们的秒和毫秒设置为0 。如果创建Date缺少任何数字,则默认为0 。但是,顺序不能更改,因此,如果您决定省略一个数字,请记住这一点。您可能还会注意到,7月表示为6 ,而不是通常的7 。这是因为日期和时间数字从0开始,就像编程中的大多数计数一样。有关更详细的图表,请参见下一部分。

使用get检索日期

有了日期后,就可以使用各种内置方法访问日期的所有组件。这些方法将返回相对于当地时区的日期的每个部分。这些方法中的每一个都以get开头,并将返回相对编号。下面是Date对象的get方法的详细表。

Date/Time Method Range Example
Year getFullYear() YYYY 1970
Month getMonth() 0-11 0 = January
Day (of the month) getDate() 1-31 1 = 1st of the month
Day (of the week) getDay() 0-6 0 = Sunday
Hour getHours() 0-23 0 = midnight
Minute getMinutes() 0-59
Second getSeconds() 0-59
Millisecond getMilliseconds() 0-999
Timestamp getTime() Milliseconds since Epoch time

让我们基于1980年7月31日来确定一个新日期,并将其分配给一个变量。

harryPotter.js

// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);

现在,我们可以使用所有方法来获取从日期到毫秒的每个日期部分。

getDateComponents.js

birthday.getFullYear();      // 1980
birthday.getMonth();         // 6
birthday.getDate();          // 31
birthday.getDay();           // 4
birthday.getHours();         // 0
birthday.getMinutes();       // 0
birthday.getSeconds();       // 0
birthday.getMilliseconds();  // 0
birthday.getTime();          // 333849600000 (for GMT)

有时可能仅需要提取日期的一部分,并且内置的get方法是实现此目的的工具。

例如,我们可以针对10月3日的日期和月份测试当前日期,以查看是否为10月3日。

oct3.js

// Get today's date
const today = new Date();
// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
  console.log("It's October 3rd.");
} else {
  console.log("It's not October 3rd.");
}
OutputIt's not October 3rd.

由于在撰写本文时,不是10月3日,因此控制台反映了这一点。

get开头的内置Date方法允许我们访问date组件,这些组件返回与我们从实例化对象中检索的内容关联的数字。

set修改日期

对于上面我们学到的所有get方法,都有一个对应的set方法。如果使用get从日期中检索特定的组成部分,则使用set来修改日期的组成部分。下面是Date对象的set方法的详细图表。

Date/Time Method Range Example
Year setFullYear() YYYY 1970
Month setMonth() 0-11 0 = January
Day (of the month) setDate() 1-31 1 = 1st of the month
Day (of the week) setDay() 0-6 0 = Sunday
Hour setHours() 0-23 0 = midnight
Minute setMinutes() 0-59
Second setSeconds() 0-59
Millisecond setMilliseconds() 0-999
Timestamp setTime() Milliseconds since Epoch time

我们可以使用这些set方法来修改日期的一个,多个或所有组成部分。例如,我们可以将birthday变量的年份从上面更改为1997而不是1980

harryPotter.js

// Change year of birthday date
birthday.setFullYear(1997);
birthday;
OutputThu Jul 31 1997 00:00:00 GMT+0000 (UTC)

我们在上面的示例中看到,当我们调用birthday变量时,我们将收到新年作为输出的一部分。

set开头的内置方法使我们可以修改Date对象的不同部分。

使用UTC的日期方法

上面讨论的get方法基于用户的本地时区设置检索日期成分。为了更好地控制日期和时间,可以使用getUTC方法,该方法与get方法完全相同,不同之处在于它们根据UTC(世界标准时间)标准计算时间。下表是JavaScript Date对象的UTC方法的表。

Date/Time Method Range Example
Year getUTCFullYear() YYYY 1970
Month getUTCMonth() 0-11 0 = January
Day (of the month) getUTCDate() 1-31 1 = 1st of the month
Day (of the week) getUTCDay() 0-6 0 = Sunday
Hour getUTCHours() 0-23 0 = midnight
Minute getUTCMinutes() 0-59
Second getUTCSeconds() 0-59
Millisecond getUTCMilliseconds() 0-999

要测试本地方法和UTC get方法之间的区别,我们可以运行以下代码。

UTC.js

// Assign current time to a variable
const now = new Date();
// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());

运行此代码将打印出当前时间以及UTC时区的时间。如果您当前处于UTC时区,则运行上述程序所输出的数字将相同。

UTC很有用,因为它提供了国际时间标准参考,因此,如果适用于您所开发的内容,则可以使您的代码在各个时区保持一致。

结论

在本教程中,我们学习了如何创建Date对象的实例,以及如何使用其内置方法访问和修改特定日期的组件。要更深入地了解JavaScript中的日期和时间,可以阅读Mozilla开发人员网络上的Date参考

对于JavaScript中的许多常见任务,知道如何使用日期是必不可少的,因为这可以使您完成从设置重复报告到在正确的时区中显示日期和计划的许多事情。

发表评论

电子邮件地址不会被公开。 必填项已用*标注