了解JavaScript中的日期和时间

JavaScript带有内置的Date对象和相关的方法。本教程将介绍如何在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;
Wed Oct 18 2017 12:41:34 GMT+0000 (UTC)

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

一周中的天 小时 分钟 第二 时区
星期三 十月 18 2017年 12 41 34 GMT + 0000(UTC)

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

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

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

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

纪元时间 (也称为零时间)由日期字符串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;
01 January, 1970 00:00:00 Universal Time (UTC)

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

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

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

为了演示引用特定日期的不同方式,我们将创建新的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);

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

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

在日期和时间方法中,我们的秒和毫秒设置为0 如果创建Date缺少任何数字,则默认为0 但是,订单不能改变,所以如果你决定离开一个数字,请记住这一点。 您可能还会注意到,7月份是6 ,而不是7 这是因为日期和时间数字从0开始,因为编程中的大部分时间都是这样。 请参阅下一节获取更详细的图表。

使用get检索日期

一旦我们有一个日期,我们可以用各种内置的方法访问日期的所有组件。 这些方法将返回相对于本地时区的日期的每个部分。 每个方法都以get开头,并返回相对的数字。 下面是Date对象的get方法的详细表格。

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

让我们根据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.");
}
It's not October 3rd.

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

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

set修改日期

对于我们上面学到的所有get方法,都有一个相应的set方法。 get用于从日期检索特定组件, set用于修改日期的组件。 以下是Date对象的set方法的详细图表。

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

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

harryPotter.js

// Change year of birthday date
birthday.setFullYear(1997);

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

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

set开始的内置方法让我们修改Date对象的不同部分。

使用UTC的日期方法

上面讨论的get方法根据用户的本地时区设置检索日期组件。 为了增加对日期和时间的控制,除了基于UTC(协调世界时)标准计算时间之外,您可以使用getUTC方法,它们与get方法完全相同。 下面是JavaScript Date对象的UTC方法的表格。

约会时间 方法 范围
getUTCFullYear() YYYY 1970年
getUTCMonth() 0-11 0 =一月
日(月) getUTCDate() 1-31 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中的许多常见任务来说是非常重要的,因为这样做可以使您从设置重复报告到在正确的时区显示日期和时间表,从而做许多事情。