异常教程

JavaScript getFullYear() 方法（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，日期和时间的处理是许多应用场景的基础需求，例如表单验证、动态生成内容、日历功能等。而 getFullYear() 方法作为获取日期对象年份的关键工具，其简洁性和实用性使其成为开发者常用的方法之一。无论是为用户展示当前年份，还是计算年龄、处理历史数据，getFullYear() 方法都能提供精准的年份数值。本文将从基础用法到高级技巧，结合实际案例，帮助读者系统掌握这一方法，同时避免常见误区。

一、基础概念与核心语法

1.1 什么是 getFullYear() 方法？

getFullYear() 是 JavaScript 中 Date 对象的一个方法，用于获取日期对象中的完整年份（4 位数字格式，如 2023）。它与 getYear() 方法不同：后者返回的是从 1900 年起计算的年份差值（例如 2023 年返回 123），因此 getFullYear() 是更直观、更推荐的年份获取方式。

1.2 核心语法与返回值类型

// 创建一个 Date 对象，表示当前时间  
const currentDate = new Date();  
// 调用 getFullYear() 方法获取年份  
const currentYear = currentDate.getFullYear();  
console.log(currentYear); // 输出：2023（假设当前年份为 2023）

返回值类型：getFullYear() 返回一个整数（number 类型），直接表示完整的年份数值。

二、应用场景与典型用例

2.1 获取当前年份

最常见的用法是获取当前日期的年份，例如在网页底部动态显示版权信息：

document.getElementById("copyright").textContent =  
  `© ${new Date().getFullYear()} MyWebsite. All rights reserved.`;

此代码会根据当前年份自动更新页面中的版权信息，无需手动修改。

2.2 计算年龄

结合用户的出生日期，可以通过 getFullYear() 计算年龄：

function calculateAge(birthYear) {  
  const currentYear = new Date().getFullYear();  
  return currentYear - birthYear;  
}  
// 示例：出生年份为 1990  
console.log(calculateAge(1990)); // 输出：33（假设当前年份为 2023）

需要注意的是，此方法仅计算年份差，未考虑具体月份和日期，因此可能产生误差。

2.3 处理历史事件时间线

在展示历史事件或项目里程碑时，可以结合 getFullYear() 动态生成时间线：

const events = [  
  { year: 1981, event: "JavaScript 设计初稿" },  
  { year: 1995, event: "JavaScript 1.0 发布" },  
];  

function displayEvents() {  
  const currentYear = new Date().getFullYear();  
  const timeline = events  
    .map(  
      (event) => `${event.year} - ${event.event}（${currentYear - event.year} 年前）`  
    )  
    .join("\n");  
  console.log(timeline);  
}  
// 输出示例：  
// 1981 - JavaScript 设计初稿（42 年前）  
// 1995 - JavaScript 1.0 发布（28 年前）

三、深入理解与进阶技巧

3.1 与 getYear() 的对比与选择

虽然 getYear() 方法仍然存在于 JavaScript 中，但它的设计存在历史遗留问题：

  • getYear() 的局限性：在 2000 年前返回 year - 1900，例如 1999 年返回 99；
  • getFullYear() 的优势：始终返回完整的 4 位年份，例如 2023。

示例对比：

const date = new Date("December 31, 1999");  
console.log(date.getYear()); // 输出：99  
console.log(date.getFullYear()); // 输出：1999

因此，在现代开发中，应优先使用 getFullYear()。

3.2 处理时区问题

Date 对象默认以浏览器的本地时区为基准，可能导致跨时区计算的差异。例如，若需获取 UTC 时间的年份，可以使用 getUTCFullYear() 方法：

const localYear = new Date().getFullYear(); // 浏览器本地年份  
const utcYear = new Date().getUTCFullYear(); // UTC 时间年份  
console.log(localYear, utcYear); // 输出：可能相同或相差 1（跨时区时）

3.3 结合其他日期方法

getFullYear() 常与其他日期方法（如 getDate()、getMonth()）联合使用，构建完整的日期逻辑。例如，验证用户输入的日期是否有效：

function isValidDate(day, month, year) {  
  const date = new Date(year, month - 1, day); // 注意月份从 0 开始  
  return (  
    date.getFullYear() === year &&  
    date.getMonth() === month - 1 &&  
    date.getDate() === day  
  );  
}  
// 测试无效日期（2023 年 2 月有 28 天）  
console.log(isValidDate(30, 2, 2023)); // 输出：false

四、常见问题与解决方案

4.1 未定义错误（undefined）

若调用 getFullYear() 返回 undefined，通常是因为：

  • 未正确创建 Date 对象；
  • 对象值为 null 或 undefined。

示例错误代码：

const invalidDate = new Date("invalid-date");  
console.log(invalidDate.getFullYear()); // 输出：NaN

解决方案：
在调用前验证日期对象的合法性：

if (isNaN(invalidDate.getTime())) {  
  console.log("无效日期");  
} else {  
  console.log(invalidDate.getFullYear());  
}

4.2 跨年计算的边界问题

当计算年龄或事件间隔时，需考虑月份和日期的先后顺序。例如：

// 用户生日为 2000-01-01，当前日期为 2023-12-31  
const birthYear = 2000;  
const currentYear = 2023;  
const age = currentYear - birthYear; // 23 岁  
// 但实际年龄应为 23 岁（未过生日的情况需进一步判断）

改进方案：
结合月份和日期进行更精确的计算：

function preciseAge(birthYear, birthMonth, birthDay) {  
  const today = new Date();  
  let age = today.getFullYear() - birthYear;  
  const monthDiff = today.getMonth() - birthMonth;  
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDay)) {  
    age--;  
  }  
  return age;  
}

五、最佳实践与性能优化

5.1 减少重复创建 Date 对象

频繁调用 new Date() 可能影响性能，建议将日期对象缓存起来：

let currentDate = new Date();  
const year = currentDate.getFullYear();  
const month = currentDate.getMonth() + 1; // 月份从 0 开始，需加 1

5.2 处理未来日期场景

在涉及未来事件（如预约系统）时，需确保年份计算的合理性：

function daysUntilEvent(targetYear, targetMonth, targetDay) {  
  const targetDate = new Date(targetYear, targetMonth - 1, targetDay);  
  const now = new Date();  
  const difference = targetDate - now; // 毫秒差  
  return Math.ceil(difference / (1000 * 60 * 60 * 24));  
}  
// 计算距离 2024-01-01 的天数  
console.log(daysUntilEvent(2024, 1, 1)); // 输出：约 8 天（假设当前为 2023-12-24）

5.3 国际化与本地化

若需支持多语言或不同地区的日期格式，可以结合 Intl.DateTimeFormat：

const year = new Date().getFullYear();  
const localizedYear = new Intl.DateTimeFormat("zh-CN", { year: "numeric" })  
  .format(new Date(year, 0, 1)); // 输出中文年份（如 "2023"）

六、总结与扩展

通过本文的讲解，读者应已掌握以下核心内容：

  • getFullYear() 方法的语法与基本用法；
  • 典型应用场景（如版权信息、年龄计算、时间线展示）；
  • 常见问题及解决方案（如时区、边界条件、性能优化）；
  • 与其他日期方法的联合使用技巧。

6.1 后续学习方向

若想进一步深入日期与时间处理，可以探索以下内容：

  • Date 对象的其他方法：如 getHours()、getMinutes()、setFullYear() 等；
  • 第三方库：如 moment.js（已停止维护）或 date-fns，提供更简洁的日期操作；
  • 时区处理库：如 luxon 或 dayjs-timezone，解决复杂时区转换问题。

6.2 最后建议

建议读者通过实际项目练习 getFullYear() 方法，例如：

  1. 构建一个动态更新的年龄计算器；
  2. 开发一个显示过去十年重要事件的交互式时间线；
  3. 优化现有代码中与日期相关的逻辑，提升健壮性。

通过持续实践，开发者不仅能熟练掌握 getFullYear() 方法，还能形成处理日期问题的系统性思维，为更复杂的业务需求打下基础。

最新发布

查看更多文章