了解JavaScript的日期和时间

 

 

介绍

日期和时间是我们日常生活的一部分，因此在计算机编程中尤为突出。在JavaScript中，您可能需要创建一个带有日历、列车时刻表或接口来设置约会的网站。这些应用程序需要根据用户当前的时区显示相关时间，或者根据到达和离开或开始和结束时间执行计算。此外，您可能需要使用JavaScript每天在特定时间生成报告，或者通过当前开放的餐馆和场所进行筛选。

为了实现所有这些目标，JavaScript伴随着构建的日期对象和相关方法。本教程将讨论如何在JavaScript中格式化和使用日期和时间。

 

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

默认情况下，没有提供参数的新日期实例将创建与当前日期和时间相对应的对象。这将根据当前计算机的系统设置创建。

为了演示JavaScript的日期，让我们创建一个变量并分配当前日期。这篇文章将于10月18日(北京时间10月18日)在伦敦(格林尼治时间)上写下来，这是目前的日期、时间和时区。

 

now.js

 

// Set variable to current date and time

const now = new Date();

 

// View the output

now;

Output

Wed 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时间派生的时间戳来了解日期，它是由1970年1月1日午夜过后经过的毫秒数组成的。我们可以使用getTime()方法获得时间戳。

// Get the current timestamp

now.getTime();

Output

1508330494000

在我们的输出中出现的当前时间戳的大量数字代表了与上面相同的值，即2017年10月18日。

纪元时间，也称为0时，由日期字符串01年1月1日，1970 00:00世界时(UTC)和0时间戳表示。我们可以通过创建一个新的变量并根据0的时间戳为它分配一个新的日期实例来在浏览器中进行测试。

epoch.js

 

// Assign the timestamp 0 to a new variable

const epochTime = new Date(0);

 

epochTime;

Output

01 January, 1970 00:00:00 Universal Time (UTC)

时代被选为计算机在早期编程时测量时间的标准，也是JavaScript使用的方法。理解时间戳和日期字符串的概念很重要，因为两者都可以根据应用程序的设置和目的而使用。

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

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

为了演示引用特定日期的不同方法，我们将创建新的日期对象，这些对象将代表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);

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

你会注意到时间戳方法有一个负数;在新时代之前的任何日期都将被表示为一个负数。

在日期和时间方法中，我们的秒和毫秒设置为0。如果在创建日期时丢失了任何数字，则默认为0。然而，订单不能更改，所以请记住，如果您决定放弃一个数字。你也可以注意到7月是6个月，而不是通常的7个月。这是因为日期和时间从0开始，就像编程中大多数的计数一样。请参阅下一节更详细的图表。

检索日期与get

一旦我们有了日期，我们就可以使用各种内置的方法访问日期的所有组件。方法将返回相对于本地时区的日期的每个部分。每一种方法都是从get开始的，并将返回相对的数字。下面是日期对象的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日那天和月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.");

}

Output

It's not October 3rd.

从那时起，在写作的时候，并不是10月3日，控制台反映了这一点。

从get开始的内置日期方法允许我们访问与我们从实例化对象中检索的值相关联的日期组件。

修改日期和设置

对于我们在上面学到的所有get方法，都有相应的set方法。Where get用于从日期检索特定组件，set用于修改日期的组件。下面是日期对象的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

我们可以使用这些设置方法来修改某个日期的一个、多个或全部组件。例如，我们可以将我们的生日变量的年份从上面改为1997年，而不是1980年。

harryPotter.js

 

// Change year of birthday date

birthday.setFullYear(1997);

 

birthday;

Output

Thu Jul 31 1997 00:00:00 GMT+0000 (UTC)

我们在上面的例子中可以看到，当我们将生日变量称为“生日变量”时，作为输出的一部分，我们得到了新的一年。

从设置开始的内建方法让我们修改日期对象的不同部分。

与UTC日期的方法

上面讨论的get方法基于用户的本地时区设置检索日期组件。为了增加对日期和时间的控制，您可以使用getUTC方法，这与get方法完全相同，只是它们根据UTC(协调的通用时间)标准计算时间。下面是JavaScript日期对象的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开发人员网络上的日期引用。

了解如何使用日期对JavaScript中的许多常见任务至关重要，因为这可以使您可以做很多事情，从设置重复的报告到在正确的时区显示日期和时间表。