在 JavaScript 中获取当前年份

在 JavaScript 中获取当前年份

技术背景

在前端开发中，经常需要获取当前的年份，例如在网页的版权声明部分显示当前年份，或者根据年份进行一些动态的内容展示。JavaScript 提供了内置的 Date 对象来处理日期和时间，通过该对象的方法可以方便地获取当前年份。

实现步骤

基本方法

创建一个 Date 对象，然后调用其 getFullYear() 方法即可获取当前年份。示例代码如下：

1
2
const currentYear = new Date().getFullYear();
console.log(currentYear); // 输出当前年份

在 HTML 页面中显示当前年份

可以将获取到的年份显示在 HTML 页面上。以下是一个在页脚显示当前年份的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示当前年份</title>
    <style>
        footer {
            text-align: center;
            font-family: sans-serif;
        }
    </style>
</head>

<body>
    <footer>
        &copy; <span id="year"></span> by Stack Overflow
    </footer>
    <script>
        document.getElementById("year").innerHTML = new Date().getFullYear();
    </script>
</body>

</html>

在 React 中使用

在 React 组件中，可以使用内联 JavaScript 来获取当前年份：

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';

const Footer = () => {
    return (
        <p className="font-inter text-sm text-gray-500 lg:mt-0">
            &copy; Copyright {new Date().getFullYear()}. All rights reserved.
        </p>
    );
};

export default Footer;

其他日期相关方法

除了获取当前年份，Date 对象还提供了许多其他方法来获取日期和时间的不同部分：

1
2
3
4
5
6
7
8
new Date().getDate();          // 获取日期（1 - 31）
new Date().getDay();           // 获取星期几（0 - 6）
new Date().getHours();         // 获取小时（0 - 23）
new Date().getMilliseconds();  // 获取毫秒（0 - 999）
new Date().getMinutes();       // 获取分钟（0 - 59）
new Date().getMonth();         // 获取月份（0 - 11，0 表示 1 月）
new Date().getSeconds();       // 获取秒数（0 - 59）
new Date().getTime();          // 获取从 1970 年 1 月 1 日至今的毫秒数

最佳实践

使用第三方库

如果项目中需要处理复杂的日期和时间操作，可以考虑使用第三方库，如 DayJS。它是一个轻量级的日期处理库，具有不可变数据结构，使用简单。示例代码如下：

1
2
3
4
import dayjs from 'dayjs';

const currentYear = dayjs().year();
console.log(currentYear); // 输出当前年份

考虑时区问题

大多数情况下，使用 Date 对象获取的年份是基于本地机器的时区和偏移量，在某些场景下可能不可靠。可靠的时间来源包括：

常见问题

getYear() 方法已弃用

在早期的 JavaScript 中，有 getYear() 方法，但该方法返回的是自 1900 年以来的年数，已经被弃用。建议使用 getFullYear() 方法来获取四位数的年份。

月份从 0 开始

getMonth() 方法返回的月份是从 0 开始的，即 0 表示 1 月，11 表示 12 月。在使用时需要注意加上 1 来获取实际的月份。例如：

1
2
const currentMonth = new Date().getMonth() + 1;
console.log(currentMonth); // 输出当前月份