前端TS 时间格式化函数

1. /**
2. * 时间日期转换
3. * @param date 当前时间，new Date() 格式
4. * @param format 需要转换的时间格式字符串
5. * @returns 返回拼接后的时间字符串
6. */
7. export function formatDate(date: Date, format: string): string {
8.   const week: { [key: string]: string } = {
9.     '0': '日', '1': '一', '2': '二', '3': '三', '4': '四', '5': '五', '6': '六',
10.   };
11.   const quarter: { [key: string]: string } = { '1': '一', '2': '二', '3': '三', '4': '四' };
13.   const we = date.getDay(); // 星期
14.   const z = getWeek(date); // 周
15.   const qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
17.   const opt: { [key: string]: string } = {
18.     'Y+': date.getFullYear().toString(),
19.     'm+': (date.getMonth() + 1).toString(),
20.     'd+': date.getDate().toString(),
21.     'H+': date.getHours().toString(),
22.     'M+': date.getMinutes().toString(),
23.     'S+': date.getSeconds().toString(),
24.     'q+': quarter[qut], // 季度
25.   };
27.   // 处理格式中的特殊标记
28.   format = format.replace(/(W+)/, (match) => match.length > 1 ? `周${week[we]}` : week[we]);
29.   format = format.replace(/(Q+)/, (match) => match.length === 4 ? `第${quarter[qut]}季度` : quarter[qut]);
30.   format = format.replace(/(Z+)/, (match) => match.length === 3 ? `第${z}周` : `${z}`);
32.   // 替换日期格式中的部分
33.   Object.keys(opt).forEach((key) => {
34.     const reg = new RegExp(`(${key})`);
35.     format = format.replace(reg, (match) => match.length === 1 ? opt[key] : opt[key].padStart(match.length, '0'));
36.   });
38.   return format;
39. }
41. /**
42. * 获取当前日期是第几周
43. * @param dateTime 当前传入的日期值
44. * @returns 返回第几周数字值
45. */
46. export function getWeek(dateTime: Date): number {
47.   const temptTime = new Date(dateTime);
48.   const weekday = temptTime.getDay() || 7;  // 周几 (0-6，0代表星期天)
49.   
50.   // 调整日期到上周一
51.   temptTime.setDate(temptTime.getDate() - weekday + 1);
52.   const firstDay = new Date(temptTime.getFullYear(), 0, 1);
54.   // 获取第一周的第一天
55.   const dayOfWeek = firstDay.getDay();
56.   const spendDay = dayOfWeek === 0 ? 7 : 7 - dayOfWeek + 1;
58.   // 计算周数
59.   const startOfYear = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
60.   const days = Math.ceil((temptTime.getTime() - startOfYear.getTime()) / 86400000);
61.   return Math.ceil(days / 7);
62. }
64. /**
65. * 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
66. * @param param 当前时间，new Date() 格式或者字符串时间格式
67. * @param format 需要转换的时间格式字符串
68. * @returns 返回拼接后的时间字符串
69. */
70. export function formatPast(param: string | Date, format: string = 'YYYY-mm-dd'): string {
71.   const time = new Date().getTime();
72.   let t = typeof param === 'string' || param instanceof Date ? new Date(param).getTime() : param;
73.   const diff = time - t;
75.   if (diff < 10000) return '刚刚';  // 10秒内
76.   if (diff < 60000) return `${Math.floor(diff / 1000)}秒前`;  // 少于1分钟
77.   if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;  // 少于1小时
78.   if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;  // 少于24小时
79.   if (diff < 259200000) return `${Math.floor(diff / 86400000)}天前`;  // 少于3天
81.   return formatDate(new Date(param), format);  // 超过3天
82. }
84. /**
85. * 时间问候语
86. * @param param 当前时间，new Date() 格式
87. * @returns 返回拼接后的时间字符串
88. */
89. export function formatAxis(param: Date): string {
90.   const hour = new Date(param).getHours();
91.   if (hour < 6) return '凌晨好';
92.   if (hour < 9) return '早上好';
93.   if (hour < 12) return '上午好';
94.   if (hour < 14) return '中午好';
95.   if (hour < 17) return '下午好';
96.   if (hour < 19) return '傍晚好';
97.   if (hour < 22) return '晚上好';
98.   return '夜里好';
99. }
101. /**
102. * 日期格式化 (更简洁，兼容字符串和时间戳)
103. * @param time 当前时间，string | number | Date
104. * @param pattern 格式字符串
105. * @returns 格式化后的日期字符串
106. */
107. export function parseTime(time: string | number | Date, pattern: string = '{y}-{m}-{d} {h}:{i}:{s}'): string {
108.   const date = new Date(time);
109.   const formatObj = {
110.     y: date.getFullYear(),
111.     m: date.getMonth() + 1,
112.     d: date.getDate(),
113.     h: date.getHours(),
114.     i: date.getMinutes(),
115.     s: date.getSeconds(),
116.     a: date.getDay(),
117.   };
118.   return pattern.replace(/{(y|m|d|h|i|s|a)+}/g, (match, key) => {
119.     let value = formatObj[key];
120.     if (key === 'a') {
121.       return ['日', '一', '二', '三', '四', '五', '六'][value];
122.     }
123.     return value.toString().padStart(match.length, '0');
124.   });
125. }
127. /**
128. * 日期格式化 (仅年月日)
129. * @param time 当前时间，string | number | Date
130. * @param pattern 格式字符串
131. * @returns 格式化后的日期字符串
132. */
133. export function parseDate(time: string | number | Date, pattern: string = '{y}-{m}-{d}'): string {
134.   return parseTime(time, pattern);
135. }
137. export const dateTimeStr: string = 'YYYY-MM-DD HH:mm:ss';
138. export const dateStr: string = 'YYYY-MM-DD';
139. export const timeStr: string = 'HH:mm:ss';

复制代码

1. formatDate - 时间日期转换

方法作用：
根据传入的 Date 对象和指定的时间格式，返回格式化后的时间字符串。支持 YYYY, MM, DD, HH, MM, SS 等格式化符号，还可以格式化季度 (Q)、星期 (W) 和几周 (Z)。
参数：

• date：Date 对象（比方：new Date()）。
  
• format：格式字符串，可以包罗以下字符：
  

• 
  
  
  
  • YYYY: 年（比方：2024）
    
  • MM: 月（比方：01）
    
  • DD: 日（比方：01）
    
  • HH: 小时（比方：12）
    
  • mm: 分钟（比方：30）
    
  • SS: 秒（比方：45）
    
  • W: 星期（比方：周一，星期一等）
    
  • Q: 季度（比方：第1季度）
    
  • Z: 周数（比方：第12周）
    
  
  

返回值：

• 格式化后的日期字符串。
  

示例：

1. const date = new Date();
2. const format1 = 'YYYY-MM-DD';
3. console.log(formatDate(date, format1)); // 输出：2024-01-17
5. const format2 = 'YYYY-MM-DD HH:mm:ss';
6. console.log(formatDate(date, format2)); // 输出：2024-01-17 12:30:45
8. const format3 = 'YYYY-MM-DD HH:mm:ss QQQQ';
9. console.log(formatDate(date, format3)); // 输出：2024-01-17 12:30:45 第1季度

复制代码

2. getWeek - 获取当前日期是第几周

方法作用：
根据传入的日期，返回该日期是当前年份的第几周。
参数：

• dateTime：Date 对象（比方：new Date()）。
  

返回值：

• 当前日期是第几周（数字情势）。
  

示例：

1. const date = new Date('2024-01-17');
2. console.log(getWeek(date)); // 输出：3，表示是2024年的第3周

复制代码

3. formatPast - 将时间转换为 几秒前、几分钟前、几小时前、几天前

方法作用：
根据传入的时间，返回一个“相对时间”的字符串，表示间隔当前时间的时间差。比方：刚刚, 5分钟前, 2小时前, 3天前。
参数：

• param：传入的时间，可以是 Date 对象或字符串。
  
• format：可选的格式化字符串，默认是 'YYYY-mm-dd'。
  

返回值：

• 相对时间字符串（如：5分钟前）。
  

示例：

1. const date1 = new Date();
2. console.log(formatPast(date1)); // 输出：刚刚
4. const date2 = new Date('2024-01-15');
5. console.log(formatPast(date2)); // 输出：3天前
7. const date3 = new Date('2023-12-01');
8. console.log(formatPast(date3, 'YYYY-MM-DD')); // 输出：2023-12-01

复制代码

4. formatAxis - 时间问候语

方法作用：
根据传入的时间，返回适合的问候语，比方：早上好、下午好、晚上好。
参数：

• param：Date 对象。
  

返回值：

• 时间问候语字符串。
  

示例：

1. const date1 = new Date('2024-01-17T08:00:00');
2. console.log(formatAxis(date1)); // 输出：早上好
4. const date2 = new Date('2024-01-17T15:00:00');
5. console.log(formatAxis(date2)); // 输出：下午好
7. const date3 = new Date('2024-01-17T20:00:00');
8. console.log(formatAxis(date3)); // 输出：晚上好

复制代码

5. parseTime - 日期格式化 (时间+日期)

方法作用：
根据传入的时间和格式，返回格式化后的日期时间字符串。支持自界说格式，可以格式化为年、月、日、小时、分钟、秒等。
参数：

• time：传入的时间，支持 string、number 或 Date 对象。
  
• pattern：格式化字符串，默认是 '{y}-{m}-{d} {h}:{i}:{s}'。可以包罗：
  

• 
  
  
  
  • {y}：年份
    
  • {m}：月份
    
  • {d}：日
    
  • {h}：小时
    
  • {i}：分钟
    
  • {s}：秒
    
  • {a}：星期（中文）
    
  
  

返回值：

• 格式化后的日期时间字符串。
  

示例：

1. const date1 = new Date('2024-01-17T12:30:45');
2. console.log(parseTime(date1, '{y}-{m}-{d} {h}:{i}:{s}')); // 输出：2024-01-17 12:30:45
4. const date2 = new Date('2024-01-17T12:30:45');
5. console.log(parseTime(date2, '{y}-{m}-{d} 星期{a}')); // 输出：2024-01-17 星期三

复制代码

6. parseDate - 日期格式化 (仅年月日)

方法作用：
根据传入的时间，返回格式化后的年月日字符串。类似于 parseTime，但只处理日期部分。
参数：

• time：传入的时间，支持 string、number 或 Date 对象。
  
• pattern：格式化字符串，默认是 '{y}-{m}-{d}'。
  

返回值：

• 格式化后的日期字符串。
  

示例：

1. const date1 = new Date('2024-01-17T12:30:45');
2. console.log(parseDate(date1, '{y}-{m}-{d}')); // 输出：2024-01-17
4. const date2 = new Date('2024-01-17T12:30:45');
5. console.log(parseDate(date2)); // 输出：2024-01-17

复制代码

其他常量

1. export const dateTimeStr: string = 'YYYY-MM-DD HH:mm:ss'; // 完整的日期时间格式
2. export const dateStr: string = 'YYYY-MM-DD';              // 仅日期格式
3. export const timeStr: string = 'HH:mm:ss';                // 仅时间格式

复制代码

总结

• formatDate 用于将 Date 格式化为指定格式的字符串，支持多种日期格式（如季度、星期等）。
  
• getWeek 用于获取当前日期是该年份的第几周。
  
• formatPast 用于将日期转换为“几秒前”、“几分钟前”等相对时间格式。
  
• formatAxis 用于返回基于时间的问候语。
  
• parseTime 和 parseDate 用于根据传入时间返回格式化后的日期字符串，parseTime 返回时间和日期，parseDate 仅返回日期。