关于 JavaScript 中的日期对象你需要知道的一切

2025-06-11

关于 JavaScript 中的日期对象你需要知道的一切

在 Web 开发中，我们经常需要与日期/时间值进行交互，可能需要对日期和时间值进行各种操作，例如获取帖子发布以来的已用时间、消息发送的时间等等。我们无法像变量一样不断地为程序提供时间/日期值，我们需要一种机制来跟踪时间/日期的变化。JavaScript 提供了日期对象，可以帮助我们跟踪时间/日期，并提供了一些与日期和时间值交互的方法。日期对象基于自 1970 年 1 月 1 日 UTC 时间以来的毫秒数。

在 JavaScript 中，日期/时间不是字符串，而是以 Date 对象的形式表示。时间和日期没有单独的数据类型，时间和日期都使用 Date 对象表示。Date 对象有一些内置方法，可以从 Date 对象中提取时间和日期部分。

new Date();
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
Enter fullscreen mode Exit fullscreen mode

为了获取当前日期和时间，我们可以调用不带任何参数的 Date 函数，输出将是当前日期、时间（调用构造函数的时间）和时区的字符串表示形式，因为输出是字符串格式，我们不能在其上使用 Date 对象方法。

正如我之前所说，Date 对象基于自 1970 年 1 月 1 日以来经过的毫秒值，如果我们将 0（毫秒）作为参数传递给 Date 构造函数，我们将得到“1970 年 1 月 1 日”的输出。此处的输出采用“GMT+0530”时区，因为这是我的浏览器默认时区。

let time1 = new Date(0);
console.log(time1); // Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

您可以使用 Date.now() 获取 1970 年 1 月 1 日至调用 now() 方法的时间之间的毫秒数。

找出下面 Date() 和 new Date() 之间的区别。

let now = new Date();
console.log(now);                 
// Current Time: Fri May 14 2021 20:29:55 GMT+0530 (India Standard Time)   
console.log(typeof now);           // object 
console.log(now.getMonth());       // 4

let strnow = Date();
console.log(strnow);
// Current Time: Fri May 14 2021 20:29:55 GMT+0530 (India Standard Time) 
console.log(typeof strnow);        //string

console.log(strnow.getMonth());
//Uncaught TypeError: strnow.getMonth is not a function
Enter fullscreen mode Exit fullscreen mode

Date 对象提供了获取日期/时间值和设置日期/时间值的方法，这些方法如下所述。

Date() 的获取方法

Getter 方法用于从 Date 对象中获取特定数据。以下列出了一些主要的 getter 函数。

1. getTimezoneOffset()：返回当前本地时区，本地时区以+/-分钟变化来表示。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getTimezoneOffset());   // -330
Enter fullscreen mode Exit fullscreen mode

2. getDate()：返回表示日期的整数（1到31）。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getDate());             // 14
Enter fullscreen mode Exit fullscreen mode

3. getDay()：返回当地时间的星期几（0 到 6），0 代表星期日，不可更改。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getDay());              // 5
Enter fullscreen mode Exit fullscreen mode

4. getMonth()：返回代表当地时间月份的整数，月份从0到11。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMonth());            // 4
Enter fullscreen mode Exit fullscreen mode

5 getFullYear().：返回当地日期的年份，年份用4位数字表示。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getFullYear());         // 2021
Enter fullscreen mode Exit fullscreen mode

6. getHours()：返回当地时间的当前小时。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getHours());            // 20
Enter fullscreen mode Exit fullscreen mode

7. getMinutes()：返回当地时间的当前分钟数。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMinutes());          // 29
Enter fullscreen mode Exit fullscreen mode

8. getSeconds()：返回当前当地时间的秒数。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getSeconds());          // 44
Enter fullscreen mode Exit fullscreen mode

9. getMilliseconds()：返回当地时间的毫秒数。

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMilliseconds());     // 251
Enter fullscreen mode Exit fullscreen mode 
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getFullYear());         // 2021
console.log(now.getMonth());            // 4
console.log(now.getDate());             // 14
console.log(now.getHours());            // 20
console.log(now.getMinutes());          // 29
console.log(now.getSeconds());          // 44
console.log(now.getMilliseconds());     // 251
console.log(now.getDay());              // 5
console.log(now.getTimezoneOffset());   // -330
Enter fullscreen mode Exit fullscreen mode

以上所有方法均基于本地时间，您可以使用这些方法的 UTC 变体来处理基于 UTC 的时间。只需在 get 方法后添加 UTC 即可，例如 getUTCDate()、getUTCDay 等。

Date() 的 Setter 方法

1. setDate()：设置月份中的日期。

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now.setDate(20)
console.log(now);
// Thu May 20 2021 21:28:29 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

2. setMonth()：设置月份。您可以同时指定月份和日期。
setMonth(month, [date])

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)       
now = new Date();
now.setMonth(11);
console.log(now);
// Tue Dec 14 2021 21:29:51 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

3. setFullYear()：设置年份。可以指定日期、月份和年份，日期和月份为可选。
setFullYear(year, [month], [date])

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setFullYear(2025);
console.log(now);
// Wed May 14 2025 21:30:20 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

4 setHours().：设置小时。除了小时之外，您还可以指定分钟、秒和毫秒（可选）。setHours(hour, [min], [sec], [ms])

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setHours(23);
console.log(now);
// Fri May 14 2021 23:31:59 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

5.：setMinutes()设置分钟。您可以指定秒和毫秒作为可选参数。
setMinutes(min, [sec], [ms])

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setMinutes(00);
console.log(now);
// Fri May 14 2021 21:00:58 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

6.：setSeconds()设置秒数。您也可以指定毫秒作为可选参数。

// Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setSeconds(00);
console.log(now);
// Fri May 14 2021 21:33:00 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

7. setMilliseconds()：设置毫秒。

// Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setMilliseconds(00);
console.log(now);
// Fri May 14 2021 21:34:32 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

您可以将字符串转换为 Date 对象，Date 对象的构造函数可以接收不同格式的字符串。下面给出了一些示例。

const date1 = new Date("Fri, May 14 2021 21:00:00");
console.log(date1);
//Fri May 14 2021 21:00:00 GMT+0530 (India Standard Time)

const date2 = new Date("Fri, May 14 2021 21:00:00 UTC");
console.log(date2);
// Sat May 15 2021 02:30:00 GMT+0530 (India Standard Time)
// the output is in Indian standard time not in UTC, 
// i.e. 5:30 is added to 21:00
// so we get 02:30

const date3 = new Date("14 May 2021 21:00:00 UTC+05:30"); 
console.log(date3);
// Fri May 14 2021 21:00:00 GMT+0530 (India Standard Time)

const date4 = new Date(2021, 4, 14, 21, 00, 0);
console.log(date4);
// Fri May 14 2021 21:00:00 GMT+0530 (India Standard Time)
// Rememnber month starts from zero

const date5 = new Date("2021-05-14T21:00:00Z");
console.log(date5)
// Sat May 15 2021 02:30:00 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

Date 对象的输出是对象，我们可以将其转换为字符串格式，Date 对象有内置的方法。

  1. toString()：返回 Date 对象的字符串表示形式。
  2. toLocalString()：以本地格式返回 Date 对象的字符串表示形式。
  3. toTimeString()：返回 Date 对象的时间部分。
  4. toLocalTimeString()：以本地格式返回Date对象的时间部分。
  5. toDateString()：返回 Date 对象的日期部分。
  6. toLocalDateString()：以本地格式返回Date对象的日期部分。
console.log(typeof now.toString(), now.toString());
// string Fri May 14 2021 21:48:19 GMT+0530 (India Standard Time)

console.log(now.toLocaleString());
// 5/14/2021, 9:48:19 PM

console.log(now.toDateString());
// Fri May 14 2021

console.log(now.toLocaleDateString());
// 5/14/2021

console.log(now.toTimeString());
// 21:48:19 GMT+0530 (India Standard Time)

console.log(now.toLocaleTimeString());
// 9:48:19 PM
Enter fullscreen mode Exit fullscreen mode
基兰拉杰夫德

您可能不知道的 24 个 HTML 标签。

Kiran Raj R ・ 21年5月4日

#教程 #css #webdev #生产力
基兰拉杰夫德

10 个适合 Web 开发者的优秀 GitHub 仓库

Kiran Raj R ・ 2021年4月26日

#javascript #beginners #生产力 #webdev
基兰拉杰夫德

终极 Web 开发人员资源列表🔥超棒的 200+ 资源

Kiran Raj R ・ 21年5月6日

#css #javascript #webdev #beginners
基兰拉杰夫德

🔥 75 个很棒的 Web 开发人员资源 🔥

Kiran Raj R ・ 21年5月14日

#css #webdev #beginners #javascript
鏂囩珷鏉ユ簮锛�https://dev.to/kiranrajvjd/all-that-you-need-to-know-about-date-and-time-in-javascript-5bfd
Devto 翻译
PREV
使用 Validator V10 进行 Go 输入验证的指南
NEXT
学习 Go：完整课程目录 Go 是什么？为什么要学习 Go？安装和设置 Hello World 变量和数据类型 字符串格式化 流程控制函数 模块 工作区 包 实用命令 构建指针 结构体 方法 数组和切片 映射 接口 错误 恐慌和恢复 测试 泛型 并发 Goroutines 通道 选择 WaitGroups 互斥体 后续步骤