了解JavaScript中的日期和时间

介绍

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

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

日期对象

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

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

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

现在.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)

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

一周中的天	月	天	年	小时	分钟	第二	时区
星期三	十月	18	2017	12	41	34	格林威治标准时间+0000 (UTC)

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

然而，JavaScript 根据从 Unix 时间 派生的 timestamp 来理解日期，该值由自 1970 年 1 月 1 日午夜以来经过的毫秒数组成。 我们可以使用 getTime() 方法获取时间戳。

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

Output1508330494000

当前时间戳的输出中出现的大数字表示与上述相同的值，即 2017 年 10 月 18 日。

Epoch 时间，也称为零时间，由日期字符串 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 实例，以及如何基于时间戳创建一个。 总共有四种格式可用于在 JavaScript 中创建新的 Date。 除了当前时间默认值和时间戳之外，您还可以使用日期字符串，或指定特定日期和时间。

日期创建	输出
new Date()	当前日期和时间
new Date(timestamp)	根据纪元时间以来的毫秒数创建日期
new Date(date string)	根据日期字符串创建日期
new Date(year, month, day, hours, minutes, seconds, milliseconds)	根据指定的日期和时间创建日期

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

美国.js

// Timestamp method
new Date(-6106015800000);

// Date string method
new Date("July 4 1776 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方法的详细表。

约会时间	方法	范围	例子
年	getFullYear()	年年	1970
月	getMonth()	0-11	0 = 一月
日（月）	getDate()	1-31	1 = 每月 1 日
一周中的天）	getDay()	0-6	0 = 星期日
小时	getHours()	0-23	0 = 午夜
分钟	getMinutes()	0-59
第二	getSeconds()	0-59
毫秒	getMilliseconds()	0-999
时间戳	getTime()	自纪元时间以来的毫秒数

让我们根据 1980 年 7 月 31 日创建一个新日期，并将其分配给一个变量。

哈利波特.js

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

现在我们可以使用我们所有的方法来获取每个日期组件，从年到毫秒。

获取日期组件.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 方法允许我们访问返回与我们从实例化对象中检索的内容相关联的数字的日期组件。

使用 set 修改日期

对于我们上面了解的所有 get 方法，都有一个对应的 set 方法。 其中 get 用于从日期中检索特定组件，set 用于修改日期的组件。 下面是Date对象的set方法的详细图表。

约会时间	方法	范围	例子
年	setFullYear()	年年	1970
月	setMonth()	0-11	0 = 一月
日（月）	setDate()	1-31	1 = 每月 1 日
一周中的天）	setDay()	0-6	0 = 星期日
小时	setHours()	0-23	0 = 午夜
分钟	setMinutes()	0-59
第二	setSeconds()	0-59
毫秒	setMilliseconds()	0-999
时间戳	setTime()	自纪元时间以来的毫秒数

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

哈利波特.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 方法表。

约会时间	方法	范围	例子
年	getUTCFullYear()	年年	1970
月	getUTCMonth()	0-11	0 = 一月
日（月）	getUTCDate()	1-31	1 = 每月 1 日
一周中的天）	getUTCDay()	0-6	0 = 星期日
小时	getUTCHours()	0-23	0 = 午夜
分钟	getUTCMinutes()	0-59
第二	getUTCSeconds()	0-59
毫秒	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 中的许多常见任务至关重要，因为这可以让您做很多事情，从设置重复报告到在正确的时区显示日期和时间表。