JavaScript 获取当前时间与日期范围计算及封装方案

作者:闭包旅人

时间:2026-10-31

浏览:514

本文详解如何利用JavaScript内置Date对象获取当前时间,并演示YYYY-MM-DD、HH:MM:SS等多种格式转换方法。同时介绍计算昨天、明天及本周、上周、下周起止日期的逻辑,并提供一个封装好的getDateRange函数,帮助开发者在项目中复用日期处理逻辑,提升代码可维护性。

文章目录

JavaScript 获取当前时间与格式化

在 JavaScript 开发中,利用内置的 Date 对象可以便捷地获取当前系统时间,并根据业务需求将其转换为特定的字符串格式。以下示例展示了如何提取时间要素并进行格式化输出:

// 获取当前时间
let currentTime = new Date();
// 获取年份
let year = currentTime.getFullYear();
// 获取月份(注意月份是从0开始计数的,所以需要加1)
let month = currentTime.getMonth() + 1;
// 获取日期
let day = currentTime.getDate();
// 获取小时
let hours = currentTime.getHours();
// 获取分钟
let minutes = currentTime.getMinutes();
// 获取秒数
let seconds = currentTime.getSeconds();
// 获取毫秒数
let milliseconds = currentTime.getMilliseconds();
// 格式化时间为 YYYY-MM-DD
let formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
// 格式化时间为 HH:MM:SS
let formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
// 格式化时间为 YYYY-MM-DD HH:MM:SS
let formattedDateTime = `${formattedDate} ${formattedTime}`;
// 格式化时间为 MM/DD/YYYY
let formattedDateUS = `${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}/${year}`;
// 格式化时间为 HH:MM AM/PM
let formattedTime12Hour = `${hours % 12 || 12}:${minutes.toString().padStart(2, '0')} ${hours < 12 ? 'AM' : 'PM'}`;
console.log('当前时间:', currentTime);
console.log('年份:', year);
console.log('月份:', month);
console.log('日期:', day);
console.log('小时:', hours);
console.log('分钟:', minutes);
console.log('秒数:', seconds);
console.log('毫秒数:', milliseconds);
console.log('格式化日期:', formattedDate);
console.log('格式化时间:', formattedTime);
console.log('格式化日期时间:', formattedDateTime);
console.log('格式化日期(美国格式):', formattedDateUS);
console.log('格式化12小时制时间:', formattedTime12Hour);

该示例首先实例化 Date 对象以获取当前时间,随后通过 getFullYear、getMonth、getDate、getHours、getMinutes、getSeconds 和 getMilliseconds 等方法分别提取年、月、日、时、分、秒及毫秒数据。需要注意的是,getMonth 返回的值从 0 开始,因此实际月份需加 1。接着,代码通过字符串拼接或模板字符串等方式,将提取的数据组合成多种常见格式,包括 YYYY-MM-DD、HH:MM:SS、YYYY-MM-DD HH:MM:SS、MM/DD/YYYY 以及 12 小时制的 HH:MM AM/PM 格式。开发者可根据具体场景选择合适的格式化策略。

除了当前时间,实际开发中常需计算相对日期,如昨天、明天,以及本周、上周和下周的起始与结束日期。

在 JavaScript 中,可以通过操作 Date 对象的时间戳或日期分量来实现这些计算。以下代码演示了如何基于当前日期推导上述时间范围:

日期范围计算:昨天、明天及周起止日期

// 获取昨天的日期
let yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
// 获取明天的日期
let tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
// 获取本周的开始日期和结束日期
let today = new Date();
let startOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));
let endOfWeek = new Date(today.setDate(today.getDate() - today.getDay() + 6));
// 获取上周的开始日期和结束日期
let startOfLastWeek = new Date(startOfWeek);
startOfLastWeek.setDate(startOfLastWeek.getDate() - 7);
let endOfLastWeek = new Date(endOfWeek);
endOfLastWeek.setDate(endOfLastWeek.getDate() - 7);
// 获取下周的开始日期和结束日期
let startOfNextWeek = new Date(startOfWeek);
startOfNextWeek.setDate(startOfNextWeek.getDate() + 7);
let endOfNextWeek = new Date(endOfWeek);
endOfNextWeek.setDate(endOfNextWeek.getDate() + 7);
console.log('昨天的日期:', yesterday);
console.log('明天的日期:', tomorrow);
console.log('本周的开始日期:', startOfWeek);
console.log('本周的结束日期:', endOfWeek);
console.log('上周的开始日期:', startOfLastWeek);
console.log('上周的结束日期:', endOfLastWeek);
console.log('下周的开始日期:', startOfNextWeek);
console.log('下周的结束日期:', endOfNextWeek);

该实现首先通过 setDate 方法增减天数来获取昨天和明天的日期。对于周范围的计算,代码以当前日期为基准,利用 getDay 方法获取星期几的数值(0 为周日),进而推算出本周起始日(通常为周一或周日,视具体逻辑而定)和结束日。通过在此基础上增减 7 天,即可分别得到上周和下周的起止日期。最终,所有计算结果通过 console.log 输出,供后续业务逻辑使用。

为了提升代码复用率,建议将上述日期计算逻辑封装为独立函数。

当项目中频繁需要获取昨天、明天以及各周起止日期时,封装一个统一的函数是最佳实践。以下是一个封装方案的示例:

日期处理函数的封装与优缺点分析

function getDateRange() {
  let today = new Date();
  let yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);
  let tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  let startOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));
  let endOfWeek = new Date(today.setDate(today.getDate() - today.getDay() + 6));
  let startOfLastWeek = new Date(startOfWeek);
  startOfLastWeek.setDate(startOfLastWeek.getDate() - 7);
  let endOfLastWeek = new Date(endOfWeek);
  endOfLastWeek.setDate(endOfLastWeek.getDate() - 7);
  let startOfNextWeek = new Date(startOfWeek);
  startOfNextWeek.setDate(startOfNextWeek.getDate() + 7);
  let endOfNextWeek = new Date(endOfWeek);
  endOfNextWeek.setDate(endOfNextWeek.getDate() + 7);
  return {
    yesterday,
    tomorrow,
    startOfWeek,
    endOfWeek,
    startOfLastWeek,
    endOfLastWeek,
    startOfNextWeek,
    endOfNextWeek,
  };
}
// 调用函数获取日期范围
let dateRange = getDateRange();
console.log('昨天的日期:', dateRange.yesterday);
console.log('明天的日期:', dateRange.tomorrow);
console.log('本周的开始日期:', dateRange.startOfWeek);
console.log('本周的结束日期:', dateRange.endOfWeek);
console.log('上周的开始日期:', dateRange.startOfLastWeek);
console.log('上周的结束日期:', dateRange.endOfLastWeek);
console.log('下周的开始日期:', dateRange.startOfNextWeek);
console.log('下周的结束日期:', dateRange.endOfNextWeek);

该方案定义了一个名为 getDateRange 的函数,其返回值是一个包含昨天、明天、本周、上周及下周起止日期的对象。调用此函数即可一次性获取所有需要的日期范围数据,并通过 console.log 查看结果。开发者可将此函数集成至工具库中,以便在项目的各个模块中直接调用,简化日期处理流程。

封装方案的优势主要体现在以下几个方面:

代码复用:将重复出现的日期计算逻辑封装后,避免了在多处重复编写相同代码,使整体代码结构更加简洁。

调用便捷:将复杂的日期推导过程封装为单一函数接口,降低了调用方的复杂度,提升了开发效率。

可读性增强:通过赋予函数具有语义的名称(如 getDateRange),使代码意图更加清晰,便于其他开发者理解和维护。

然而,封装方案也存在一定的局限性:

适用场景受限:封装函数通常针对特定需求设计,可能无法覆盖所有边缘情况或特殊业务场景。

扩展难度:当业务需求发生变动时,若原有封装逻辑紧密耦合,修改起来可能较为困难,影响代码的可扩展性。

封装方案主要适用于以下场景:

1. 项目需要频繁获取昨天、明天以及本周、上周、下周的起止日期。

2. 在项目的多个模块或页面中,需要重复使用相同的日期范围计算逻辑。

3. 希望将日期获取的逻辑抽象为独立的、可复用的函数,以优化代码结构。

总体而言,封装方案特别适合那些需要复用逻辑且希望简化代码的场景。但在应用时,需充分评估其适用性与可扩展性,确保封装后的函数既能满足当前需求,又能在未来需求变更时便于调整和维护。

本文介绍了 JavaScript 中获取各种格式时间以及计算日期范围的方法与封装技巧。更多关于 JS 时间处理的内容,欢迎查阅本站其他文章或继续浏览后续内容。感谢大家的支持!

到此这篇关于JS实现获取各种格式的时间的文章就介绍到这了,更多相关JS获取时间内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章