前端利器DateUtils日期時間工具深度剖析
序言
在前端開發(fā)中，日期和時間的處理是一個常見且重要的任務(wù)。從格式化日期展示到復(fù)雜的日期計算，每一個環(huán)節(jié)都需要精確和高效的代碼支持。今天，我們就來深入探討一個精心打造的前端日期時間工具類 DateUtils，它涵蓋了從基礎(chǔ)的日期格式化到高級的日期范圍計算等一系列實用功能。
一、工具類概述
DateUtils 是一個功能豐富的日期時間工具集合，它為開發(fā)者提供了便捷的方式來處理各種日期和時間相關(guān)的操作。該工具類依賴于一個輔助工具 TypeUtils 中的 isDate 方法來進行日期對象的有效性驗證。通過枚舉定義了多種常見的日期格式，并且提供了一系列方法來實現(xiàn)日期的格式化、解析、相對時間獲取、日期范圍計算、日期加減、差值計算等功能。
二、核心功能解析
（一）日期格式化
- FORMAT 枚舉
DateUtils首先定義了一個FORMAT枚舉，它包含了多種常用的日期格式，如DATE（YYYY - MM - DD）、TIME（HH:mm:ss）、DATETIME（YYYY - MM - DD HH:mm:ss）等，涵蓋了中文和英文的常見格式，方便開發(fā)者在不同場景下選擇合適的格式。 - 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 對象和一個可選的格式字符串作為參數(shù)。如果未傳入格式字符串，則默認(rèn)使用 DATETIME 格式。首先通過 TypeUtils.isDate 方法驗證日期對象的有效性，然后從 Date 對象中提取年、月、日、時、分、秒等信息，最后通過字符串替換的方式將占位符替換為實際的日期時間值，實現(xiàn)日期的格式化。
（二）日期解析
parse 方法用于將日期字符串解析為 Date 對象。
parse(dateStr: string): Date {
const date = new Date(dateStr);
if (isNaN(date.getTime())) {
throw new Error("無效的日期字符串!");
}
return date;
}
該方法嘗試使用 Date 構(gòu)造函數(shù)將傳入的字符串解析為日期對象。如果解析后的日期對象的 getTime 方法返回 NaN，則說明解析失敗，拋出“無效的日期字符串！”錯誤。
（三）相對時間獲取
getRelativeTime 方法用于獲取相對于當(dāng)前時間的日期描述。
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);
}
該方法首先計算當(dāng)前時間與傳入日期之間的時間差，然后根據(jù)時間差的大小返回不同的相對時間描述。如果時間差小于 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];
}
該方法根據(jù)傳入的類型參數(shù)，通過 switch 語句分別計算本周、本月、本年的起止日期。例如，對于“week”類型，先獲取當(dāng)前日期是一周中的第幾天（周日為 0，這里處理為 7），然后計算本周的起始日期和結(jié)束日期。
（五）日期加減
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 對象、一個數(shù)值和一個時間單位作為參數(shù)。通過 switch 語句根據(jù)不同的時間單位，對日期對象進行相應(yīng)的加減操作，并返回新的日期對象。
（六）日期差值計算
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 對象和一個時間單位作為參數(shù)。首先計算兩個日期的時間戳差值，然后根據(jù)不同的時間單位，通過 switch 語句進行相應(yīng)的計算，返回兩個日期之間的差值。
（七）工作日判斷
isWorkday 方法用于判斷一個日期是否為工作日。
isWorkday(date: Date): boolean {
const day = date.getDay();
return day!== 0 && day!== 6;
}
該方法通過獲取日期是一周中的第幾天（周日為 0，周六為 6），判斷該日期是否既不是周日也不是周六，從而確定是否為工作日。
（八）月份天數(shù)獲取
getDaysInMonth 方法用于獲取指定月份的天數(shù)。
getDaysInMonth(year: number, month: number): number {
return new Date(year, month, 0).getDate();
}
該方法通過創(chuàng)建一個指定年份和月份的 Date 對象，并將日期設(shè)置為 0，此時 getDate 方法返回的就是該月份的總天數(shù)。
（九）閏年判斷
isLeapYear 方法用于判斷指定年份是否為閏年。
isLeapYear(year: number): boolean {
return (year % 4 === 0 && year % 100!== 0) || year % 400 === 0;
}
該方法根據(jù)閏年的定義，即能被 4 整除且不能被 100 整除，或者能被 400 整除的年份為閏年，返回相應(yīng)的布爾值。
（十）獲取日期是當(dāng)年的第幾周
getWeekOfYear 方法用于獲取指定日期是當(dāng)年的第幾周。
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;
}
該方法首先獲取當(dāng)年的第一天，然后計算指定日期與當(dāng)年第一天的時間差，并考慮了時區(qū)偏移量。最后將時間差除以一周的毫秒數(shù)，并向上取整加 1，得到該日期是當(dāng)年的第幾周。
（十一）獲取時間戳
getTimestamp 方法用于獲取指定日期的時間戳，如果未傳入日期，則返回當(dāng)前日期的時間戳。
getTimestamp(date: Date = new Date()): number {
return date.getTime();
}
該方法通過調(diào)用 Date 對象的 getTime 方法獲取時間戳。
三. 工具類功能詳解
（一） 日期格式化
方法說明：format方法用于將Date對象格式化為指定的字符串格式。它支持多種預(yù)定義的格式，如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對象。無論是標(biāo)準(zhǔn)的ISO格式還是中文格式，都可以輕松解析。
使用示例：
DateUtils.parse('2024-03-21'); // Date 對象
DateUtils.parse('2024-03-21 14:30:00'); // Date 對象
DateUtils.parse('2024年03月21日'); // Date 對象
（三）相對時間描述
方法說明：getRelativeTime方法可以根據(jù)當(dāng)前時間生成相對時間描述，如“剛剛”、“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 (周六)
（八） 獲取月份天數(shù)
方法說明：getDaysInMonth方法可以獲取指定年份和月份的天數(shù)，支持閏年判斷。
使用示例：
DateUtils.getDaysInMonth(2024, 2); // 返回 29 (閏年2月) DateUtils.getDaysInMonth(2024, 3); // 返回 31
（九） 閏年判斷
方法說明：isLeapYear方法可以判斷某一年是否為閏年。
使用示例：
DateUtils.isLeapYear(2024); // 返回 true DateUtils.isLeapYear(2023); // 返回 false
（十） 獲取日期是當(dāng)年的第幾周
方法說明：getWeekOfYear方法可以獲取某個日期是當(dāng)年的第幾周。
使用示例：
DateUtils.getWeekOfYear(new Date('2024-03-21')); // 返回周數(shù)
（十一） 獲取時間戳
方法說明：getTimestamp方法可以獲取當(dāng)前時間或指定日期的時間戳。
使用示例：
DateUtils.getTimestamp(); // 返回當(dāng)前時間戳
DateUtils.getTimestamp(new Date('2024-03-21')); // 返回指定日期的時間戳
四、總結(jié)
DateUtils 工具類為前端開發(fā)者提供了一個全面且強大的日期時間處理解決方案。無論是在數(shù)據(jù)展示、數(shù)據(jù)分析還是業(yè)務(wù)邏輯處理中，這些功能都能極大地提高開發(fā)效率，減少日期時間處理過程中的錯誤。通過合理運用這些方法，開發(fā)者可以更加專注于業(yè)務(wù)邏輯的實現(xiàn)，而無需在基礎(chǔ)的日期時間操作上花費過多精力。希望本文對 DateUtils 的剖析能幫助你更好地理解和運用這個工具類，在前端開發(fā)中更加得心應(yīng)手地處理日期和時間相關(guān)的任務(wù)。
到此這篇關(guān)于前端利器DateUtils日期時間工具的文章就介紹到這了,更多相關(guān)前端DateUtils日期時間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談JavaScript變量的自動轉(zhuǎn)換和語句。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了基于js實現(xiàn)投票的實例代碼,三種投票表現(xiàn)效果，個人比較喜歡柱狀投票圖，具有立體感，感興趣的朋友可以參考下2015-08-08
枚舉是一種數(shù)據(jù)結(jié)構(gòu)，它定義了一個有限的具名常量集，每個常量都可以通過其名稱來訪問，這篇文章主要介紹了JavaScript中的四種枚舉方式,需要的朋友可以參考下2023-05-05
JS事件監(jiān)聽與事件委托舉例詳解(前端小白必學(xué))
在JavaScript的學(xué)習(xí)中我們經(jīng)常會遇到JavaScript的事件機制,例如,事件綁定、事件監(jiān)聽、事件委托(事件代理)等,下面這篇文章主要給大家介紹了關(guān)于JS事件監(jiān)聽與事件委托的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)解析了BootStrap的Tooltip插件源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Windows下支持自動更新的Electron應(yīng)用腳手架的方法
這篇文章主要介紹了Windows下支持自動更新的Electron應(yīng)用腳手架的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
我們?nèi)サ羰录壎ǖ倪壿?發(fā)現(xiàn)只渲染dom元素,不綁定事件的時間,僅僅125ms,可見事件綁定的時間消耗還是很大的 ,尤其是第一種方式,也就是Dom Level 0 Event,最為耗時2012-12-12
javascript與css3動畫結(jié)合使用小結(jié)
本文給大家講述的是如何使用javascript結(jié)合CSS動畫來實現(xiàn)一些占用資源更少，更優(yōu)化的動畫效果，思路十分巧妙，這里推薦給小伙伴們參考下。2015-03-03
Javascript注入技巧...2007-06-06
js實現(xiàn)動畫特效的文字鏈接鼠標(biāo)懸停提示的方法
這篇文章主要介紹了js實現(xiàn)動畫特效的文字鏈接鼠標(biāo)懸停提示的方法,實例分析了javascript操作css的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03