前端利器DateUtils日期时间工具深度剖析-牛翰网

序言

在前端开发中，日期和时间的处理是一个常见且重要的任务。从格式化日期展示到复杂的日期计算，每一个环节都需要精确和高效的代码支持。今天，我们就来深入探讨一个精心打造的前端日期时间工具类 DateUtils，它涵盖了从基础的日期格式化到高级的日期范围计算等一系列实用功能。

一、工具类概述

DateUtils 是一个功能丰富的日期时间工具集合，它为开发者提供了便捷的方式来处理各种日期和时间相关的操作。该工具类依赖于一个辅助工具 TypeUtils 中的 isDate 方法来进行日期对象的有效性验证。通过枚举定义了多种常见的日期格式，并且提供了一系列方法来实现日期的格式化、解析、相对时间获取、日期范围计算、日期加减、差值计算等功能。

二、核心功能解析

（一）日期格式化

FORMAT 枚举DateUtils 首先定义了一个 FORMAT 枚举，它包含了多种常用的日期格式，如 DATE（YYYY - MM - DD）、TIME（HH:mm:ss）、DATETIME（YYYY - MM - DD HH:mm:ss）等，涵盖了中文和英文的常见格式，方便开发者在不同场景下选择合适的格式。
format 方法

format(date: Date, format: string = this.FORMAT.DATETIME): string {
    if (!TypeUtils.isDate(date)) {
        throw new Error("无效的日期对象!");
    }
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    return format
     .replace("YYYY", year.toString())
     .replace("MM", month.toString().padStart(2, "0"))
     .replace("DD", day.toString().padStart(2, "0"))
     .replace("HH", hours.toString().padStart(2, "0"))
     .replace("mm", minutes.toString().padStart(2, "0"))
     .replace("ss", seconds.toString().padStart(2, "0"));
}

该方法接收一个 Date 对象和一个可选的格式字符串作为参数。如果未传入格式字符串，则默认使用 DATETIME 格式。首先通过 TypeUtils.isDate 方法验证日期对象的有效性，然后从 Date 对象中提取年、月、日、时、分、秒等信息，最后通过字符串替换的方式将占位符替换为实际的日期时间值，实现日期的格式化。

（二）日期解析

parse 方法用于将日期字符串解析为 Date 对象。

parse(dateStr: string): Date {
    const date = new Date(dateStr);
    if (isNaN(date.getTime())) {
        throw new Error("无效的日期字符串!");
    }
    return date;
}

该方法尝试使用 Date 构造函数将传入的字符串解析为日期对象。如果解析后的日期对象的 getTime 方法返回 NaN，则说明解析失败，抛出“无效的日期字符串！”错误。

（三）相对时间获取

getRelativeTime 方法用于获取相对于当前时间的日期描述。

getRelativeTime(date: Date): string {
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const minutes = Math.floor(diff / (1000 * 60));
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    if (minutes < 1) return "刚刚";
    if (minutes < 60) return `${minutes}分钟前`;
    if (hours < 24) return `${hours}小时前`;
    if (days < 30) return `${days}天前`;
    return this.format(date, this.FORMAT.DATE);
}

该方法首先计算当前时间与传入日期之间的时间差，然后根据时间差的大小返回不同的相对时间描述。如果时间差小于 1 分钟，返回“刚刚”；如果小于 60 分钟，返回“X 分钟前”；如果小于 24 小时，返回“X 小时前”；如果小于 30 天，返回“X 天前”；否则，返回格式化后的日期字符串。

（四）日期范围获取

getDateRange 方法用于获取指定类型（周、月、年）的日期范围。

getDateRange(type: "week" | "month" | "year"): [Date, Date] {
    const now = new Date();
    let start: Date, end: Date;
    switch (type) {
        case "week":
            const day = now.getDay() || 7;
            start = new Date(now.setDate(now.getDate() - day + 1));
            end = new Date(now.setDate(now.getDate() + 6));
            break;
        case "month":
            start = new Date(now.getFullYear(), now.getMonth(), 1);
            end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
            break;
        case "year":
            start = new Date(now.getFullYear(), 0, 1);
            end = new Date(now.getFullYear(), 11, 31);
            break;
    }
    return [start, end];
}

该方法根据传入的类型参数，通过 switch 语句分别计算本周、本月、本年的起止日期。例如，对于“week”类型，先获取当前日期是一周中的第几天（周日为 0，这里处理为 7），然后计算本周的起始日期和结束日期。

（五）日期加减

add 方法用于对日期进行加减操作。

add(
    date: Date,
    amount: number,
    unit: "year" | "month" | "day" | "hour" | "minute" | "second"
): Date {
    const result = new Date(date);
    switch (unit) {
        case "year":
            result.setFullYear(result.getFullYear() + amount);
            break;
        case "month":
            result.setMonth(result.getMonth() + amount);
            break;
        case "day":
            result.setDate(result.getDate() + amount);
            break;
        case "hour":
            result.setHours(result.getHours() + amount);
            break;
        case "minute":
            result.setMinutes(result.getMinutes() + amount);
            break;
        case "second":
            result.setSeconds(result.getSeconds() + amount);
            break;
    }
    return result;
}

该方法接收一个 Date 对象、一个数值和一个时间单位作为参数。通过 switch 语句根据不同的时间单位，对日期对象进行相应的加减操作，并返回新的日期对象。

（六）日期差值计算

diff 方法用于计算两个日期之间的差值。

diff(
    date1: Date,
    date2: Date,
    unit: "year" | "month" | "day" | "hour" | "minute" | "second"
): number {
    const diff = date2.getTime() - date1.getTime();
    switch (unit) {
        case "year":
            return date2.getFullYear() - date1.getFullYear();
        case "month":
            return (
                (date2.getFullYear() - date1.getFullYear()) * 12 +
                date2.getMonth() -
                date1.getMonth()
            );
        case "day":
            return Math.floor(diff / (1000 * 60 * 60 * 24));
        case "hour":
            return Math.floor(diff / (1000 * 60 * 60));
        case "minute":
            return Math.floor(diff / (1000 * 60));
        case "second":
            return Math.floor(diff / 1000);
        default:
            return diff;
    }
}

该方法接收两个 Date 对象和一个时间单位作为参数。首先计算两个日期的时间戳差值，然后根据不同的时间单位，通过 switch 语句进行相应的计算，返回两个日期之间的差值。

（七）工作日判断

isWorkday 方法用于判断一个日期是否为工作日。

isWorkday(date: Date): boolean {
    const day = date.getDay();
    return day!== 0 && day!== 6;
}

该方法通过获取日期是一周中的第几天（周日为 0，周六为 6），判断该日期是否既不是周日也不是周六，从而确定是否为工作日。

（八）月份天数获取

getDaysInMonth 方法用于获取指定月份的天数。

getDaysInMonth(year: number, month: number): number {
    return new Date(year, month, 0).getDate();
}

该方法通过创建一个指定年份和月份的 Date 对象，并将日期设置为 0，此时 getDate 方法返回的就是该月份的总天数。

（九）闰年判断

isLeapYear 方法用于判断指定年份是否为闰年。

isLeapYear(year: number): boolean {
    return (year % 4 === 0 && year % 100!== 0) || year % 400 === 0;
}

该方法根据闰年的定义，即能被 4 整除且不能被 100 整除，或者能被 400 整除的年份为闰年，返回相应的布尔值。

（十）获取日期是当年的第几周

getWeekOfYear 方法用于获取指定日期是当年的第几周。

getWeekOfYear(date: Date): number {
    const start = new Date(date.getFullYear(), 0, 1);
    const diff =
        date.getTime() -
        start.getTime() +
        (start.getTimezoneOffset() - date.getTimezoneOffset()) * 60 * 1000;
    const oneWeek = 1000 * 60 * 60 * 24 * 7;
    return Math.floor(diff / oneWeek) + 1;
}

该方法首先获取当年的第一天，然后计算指定日期与当年第一天的时间差，并考虑了时区偏移量。最后将时间差除以一周的毫秒数，并向上取整加 1，得到该日期是当年的第几周。

（十一）获取时间戳

getTimestamp 方法用于获取指定日期的时间戳，如果未传入日期，则返回当前日期的时间戳。

getTimestamp(date: Date = new Date()): number {
    return date.getTime();
}

该方法通过调用 Date 对象的 getTime 方法获取时间戳。

三. 工具类功能详解

（一）日期格式化

方法说明：format方法用于将Date对象格式化为指定的字符串格式。它支持多种预定义的格式，如YYYY-MM-DD、HH:mm:ss等，也支持自定义格式字符串。

使用示例：

const date = new Date('2024-03-21 14:30:00');
DateUtils.format(date); // "2024-03-21 14:30:00"
DateUtils.format(date, DateUtils.FORMAT.DATE); // "2024-03-21"
DateUtils.format(date, DateUtils.FORMAT.DATE_CN); // "2024年03月21日"
DateUtils.format(date, 'YYYY/MM/DD'); // "2024/03/21"

（二）日期解析

方法说明：parse方法用于将日期字符串解析为Date对象。无论是标准的ISO格式还是中文格式，都可以轻松解析。

使用示例：

DateUtils.parse('2024-03-21'); // Date 对象
DateUtils.parse('2024-03-21 14:30:00'); // Date 对象
DateUtils.parse('2024年03月21日'); // Date 对象

（三）相对时间描述

方法说明：getRelativeTime方法可以根据当前时间生成相对时间描述，如“刚刚”、“5分钟前”、“2小时前”等。

使用示例：

const date = new Date('2024-03-21 14:30:00');
DateUtils.getRelativeTime(date); // "刚刚"、"5分钟前"、"2小时前"、"3天前"等

（四）日期范围获取

方法说明：getDateRange方法可以方便地获取本周、本月、今年的起止日期。

使用示例：

// 获取本周的起止日期
const [weekStart, weekEnd] = DateUtils.getDateRange('week');

// 获取本月的起止日期
const [monthStart, monthEnd] = DateUtils.getDateRange('month');

// 获取今年的起止日期
const [yearStart, yearEnd] = DateUtils.getDateRange('year');

（五）日期加减

方法说明：add方法支持对日期进行加减操作，支持年、月、日、时、分、秒等多种单位。

使用示例：

const date = new Date('2024-03-21');

// 加一天
DateUtils.add(date, 1, 'day'); // 返回 2024-03-22

// 减一个月
DateUtils.add(date, -1, 'month'); // 返回 2024-02-21

// 加一年
DateUtils.add(date, 1, 'year'); // 返回 2025-03-21

（六）日期差值计算

方法说明：diff方法可以计算两个日期之间的差值，支持年、月、日、时、分、秒等多种单位。

使用示例：

const date1 = new Date('2024-03-21');
const date2 = new Date('2024-03-25');

DateUtils.diff(date1, date2, 'day'); // 返回 4
DateUtils.diff(date1, date2, 'hour'); // 返回 96

（七）工作日判断

方法说明：isWorkday方法可以判断某个日期是否为工作日（周一至周五）。

使用示例：

const date = new Date('2024-03-21');
DateUtils.isWorkday(date); // 返回 true (周四)
DateUtils.isWorkday(new Date('2024-03-23')); // 返回 false (周六)

（八）获取月份天数

方法说明：getDaysInMonth方法可以获取指定年份和月份的天数，支持闰年判断。

使用示例：

DateUtils.getDaysInMonth(2024, 2); // 返回 29 (闰年2月)
DateUtils.getDaysInMonth(2024, 3); // 返回 31

（九）闰年判断

方法说明：isLeapYear方法可以判断某一年是否为闰年。

使用示例：

DateUtils.isLeapYear(2024); // 返回 true
DateUtils.isLeapYear(2023); // 返回 false

（十）获取日期是当年的第几周

方法说明：getWeekOfYear方法可以获取某个日期是当年的第几周。

使用示例：

DateUtils.getWeekOfYear(new Date('2024-03-21')); // 返回周数

（十一）获取时间戳

方法说明：getTimestamp方法可以获取当前时间或指定日期的时间戳。

使用示例：

DateUtils.getTimestamp(); // 返回当前时间戳
DateUtils.getTimestamp(new Date('2024-03-21')); // 返回指定日期的时间戳

四、总结

DateUtils 工具类为前端开发者提供了一个全面且强大的日期时间处理解决方案。无论是在数据展示、数据分析还是业务逻辑处理中，这些功能都能极大地提高开发效率，减少日期时间处理过程中的错误。通过合理运用这些方法，开发者可以更加专注于业务逻辑的实现，而无需在基础的日期时间操作上花费过多精力。希望本文对 DateUtils 的剖析能帮助你更好地理解和运用这个工具类，在前端开发中更加得心应手地处理日期和时间相关的任务。

到此这篇关于前端利器DateUtils日期时间工具的文章就介绍到这了,更多相关前端DateUtils日期时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/338545ws5.htm

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END