前端TypeScript時(shí)間格式化函數(shù)舉例詳解

更新時(shí)間：2025年02月26日 10:03:33 作者：念九_(tái)ysl

這篇文章主要介紹了前端TypeScript時(shí)間格式化函數(shù)的相關(guān)資料,包括日期格式化formatDate、獲取周數(shù)getWeek、相對(duì)時(shí)間格式化formatPast、時(shí)間問(wèn)候語(yǔ)formatAxis以及日期時(shí)間格式化parseTime和parseDate,每個(gè)方法都有詳細(xì)的參數(shù)說(shuō)明和示例,需要的朋友可以參考下

1. formatDate - 時(shí)間日期轉(zhuǎn)換
2. getWeek - 獲取當(dāng)前日期是第幾周
3. formatPast - 將時(shí)間轉(zhuǎn)換為幾秒前、幾分鐘前、幾小時(shí)前、幾天前
4. formatAxis - 時(shí)間問(wèn)候語(yǔ)
5. parseTime - 日期格式化 (時(shí)間+日期)
6. parseDate - 日期格式化 (僅年月日)
其他常量
總結(jié)

/**
 * 時(shí)間日期轉(zhuǎn)換
 * @param date 當(dāng)前時(shí)間，new Date() 格式
 * @param format 需要轉(zhuǎn)換的時(shí)間格式字符串
 * @returns 返回拼接后的時(shí)間字符串
 */
export function formatDate(date: Date, format: string): string {
  const week: { [key: string]: string } = {
    '0': '日', '1': '一', '2': '二', '3': '三', '4': '四', '5': '五', '6': '六',
  };
  const quarter: { [key: string]: string } = { '1': '一', '2': '二', '3': '三', '4': '四' };

  const we = date.getDay(); // 星期
  const z = getWeek(date); // 周
  const qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度

  const opt: { [key: string]: string } = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
    'H+': date.getHours().toString(),
    'M+': date.getMinutes().toString(),
    'S+': date.getSeconds().toString(),
    'q+': quarter[qut], // 季度
  };

  // 處理格式中的特殊標(biāo)記
  format = format.replace(/(W+)/, (match) => match.length > 1 ? `周${week[we]}` : week[we]);
  format = format.replace(/(Q+)/, (match) => match.length === 4 ? `第${quarter[qut]}季度` : quarter[qut]);
  format = format.replace(/(Z+)/, (match) => match.length === 3 ? `第${z}周` : `${z}`);

  // 替換日期格式中的部分
  Object.keys(opt).forEach((key) => {
    const reg = new RegExp(`(${key})`);
    format = format.replace(reg, (match) => match.length === 1 ? opt[key] : opt[key].padStart(match.length, '0'));
  });

  return format;
}

/**
 * 獲取當(dāng)前日期是第幾周
 * @param dateTime 當(dāng)前傳入的日期值
 * @returns 返回第幾周數(shù)字值
 */
export function getWeek(dateTime: Date): number {
  const temptTime = new Date(dateTime);
  const weekday = temptTime.getDay() || 7;  // 周幾 (0-6，0代表星期天)
  
  // 調(diào)整日期到上周一
  temptTime.setDate(temptTime.getDate() - weekday + 1);
  const firstDay = new Date(temptTime.getFullYear(), 0, 1);

  // 獲取第一周的第一天
  const dayOfWeek = firstDay.getDay();
  const spendDay = dayOfWeek === 0 ? 7 : 7 - dayOfWeek + 1;

  // 計(jì)算周數(shù)
  const startOfYear = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
  const days = Math.ceil((temptTime.getTime() - startOfYear.getTime()) / 86400000);
  return Math.ceil(days / 7);
}

/**
 * 將時(shí)間轉(zhuǎn)換為 `幾秒前`、`幾分鐘前`、`幾小時(shí)前`、`幾天前`
 * @param param 當(dāng)前時(shí)間，new Date() 格式或者字符串時(shí)間格式
 * @param format 需要轉(zhuǎn)換的時(shí)間格式字符串
 * @returns 返回拼接后的時(shí)間字符串
 */
export function formatPast(param: string | Date, format: string = 'YYYY-mm-dd'): string {
  const time = new Date().getTime();
  let t = typeof param === 'string' || param instanceof Date ? new Date(param).getTime() : param;
  const diff = time - t;

  if (diff < 10000) return '剛剛';  // 10秒內(nèi)
  if (diff < 60000) return `${Math.floor(diff / 1000)}秒前`;  // 少于1分鐘
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分鐘前`;  // 少于1小時(shí)
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小時(shí)前`;  // 少于24小時(shí)
  if (diff < 259200000) return `${Math.floor(diff / 86400000)}天前`;  // 少于3天

  return formatDate(new Date(param), format);  // 超過(guò)3天
}

/**
 * 時(shí)間問(wèn)候語(yǔ)
 * @param param 當(dāng)前時(shí)間，new Date() 格式
 * @returns 返回拼接后的時(shí)間字符串
 */
export function formatAxis(param: Date): string {
  const hour = new Date(param).getHours();
  if (hour < 6) return '凌晨好';
  if (hour < 9) return '早上好';
  if (hour < 12) return '上午好';
  if (hour < 14) return '中午好';
  if (hour < 17) return '下午好';
  if (hour < 19) return '傍晚好';
  if (hour < 22) return '晚上好';
  return '夜里好';
}

/**
 * 日期格式化 (更簡(jiǎn)潔，兼容字符串和時(shí)間戳)
 * @param time 當(dāng)前時(shí)間，string | number | Date
 * @param pattern 格式字符串
 * @returns 格式化后的日期字符串
 */
export function parseTime(time: string | number | Date, pattern: string = '{y}-{m}-wppm3vysvbp {h}:{i}:{s}'): string {
  const date = new Date(time);
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay(),
  };
  return pattern.replace(/{(y|m|d|h|i|s|a)+}/g, (match, key) => {
    let value = formatObj[key];
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value];
    }
    return value.toString().padStart(match.length, '0');
  });
}

/**
 * 日期格式化 (僅年月日)
 * @param time 當(dāng)前時(shí)間，string | number | Date
 * @param pattern 格式字符串
 * @returns 格式化后的日期字符串
 */
export function parseDate(time: string | number | Date, pattern: string = '{y}-{m}-wppm3vysvbp'): string {
  return parseTime(time, pattern);
}

export const dateTimeStr: string = 'YYYY-MM-DD HH:mm:ss';
export const dateStr: string = 'YYYY-MM-DD';
export const timeStr: string = 'HH:mm:ss';

1. formatDate - 時(shí)間日期轉(zhuǎn)換

方法作用：根據(jù)傳入的 Date 對(duì)象和指定的時(shí)間格式，返回格式化后的時(shí)間字符串。支持 YYYY, MM, DD, HH, MM, SS 等格式化符號(hào)，還可以格式化季度 (Q)、星期 (W) 和幾周 (Z)。

參數(shù)：

date：Date 對(duì)象（例如：new Date()）。
format：格式字符串，可以包含以下字符：

- YYYY: 年（例如：2024）
- MM: 月（例如：01）
- DD: 日（例如：01）
- HH: 小時(shí)（例如：12）
- mm: 分鐘（例如：30）
- SS: 秒（例如：45）
- W: 星期（例如：周一，星期一等）
- Q: 季度（例如：第1季度）
- Z: 周數(shù)（例如：第12周）

返回值：

格式化后的日期字符串。

示例：

const date = new Date();
const format1 = 'YYYY-MM-DD';
console.log(formatDate(date, format1)); // 輸出：2024-01-17

const format2 = 'YYYY-MM-DD HH:mm:ss';
console.log(formatDate(date, format2)); // 輸出：2024-01-17 12:30:45

const format3 = 'YYYY-MM-DD HH:mm:ss QQQQ';
console.log(formatDate(date, format3)); // 輸出：2024-01-17 12:30:45 第1季度

2. getWeek - 獲取當(dāng)前日期是第幾周

方法作用：根據(jù)傳入的日期，返回該日期是當(dāng)前年份的第幾周。

參數(shù)：

dateTime：Date 對(duì)象（例如：new Date()）。

返回值：

當(dāng)前日期是第幾周（數(shù)字形式）。

示例：

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

3. formatPast - 將時(shí)間轉(zhuǎn)換為幾秒前、幾分鐘前、幾小時(shí)前、幾天前

方法作用：根據(jù)傳入的時(shí)間，返回一個(gè)“相對(duì)時(shí)間”的字符串，表示距離當(dāng)前時(shí)間的時(shí)間差。例如：剛剛, 5分鐘前, 2小時(shí)前, 3天前。

參數(shù)：

param：傳入的時(shí)間，可以是 Date 對(duì)象或字符串。
format：可選的格式化字符串，默認(rèn)是 'YYYY-mm-dd'。

返回值：

相對(duì)時(shí)間字符串（如：5分鐘前）。

示例：

const date1 = new Date();
console.log(formatPast(date1)); // 輸出：剛剛

const date2 = new Date('2024-01-15');
console.log(formatPast(date2)); // 輸出：3天前

const date3 = new Date('2023-12-01');
console.log(formatPast(date3, 'YYYY-MM-DD')); // 輸出：2023-12-01

4. formatAxis - 時(shí)間問(wèn)候語(yǔ)

方法作用：根據(jù)傳入的時(shí)間，返回適合的問(wèn)候語(yǔ)，例如：早上好、下午好、晚上好。

參數(shù)：

param：Date 對(duì)象。

返回值：

時(shí)間問(wèn)候語(yǔ)字符串。

示例：

const date1 = new Date('2024-01-17T08:00:00');
console.log(formatAxis(date1)); // 輸出：早上好

const date2 = new Date('2024-01-17T15:00:00');
console.log(formatAxis(date2)); // 輸出：下午好

const date3 = new Date('2024-01-17T20:00:00');
console.log(formatAxis(date3)); // 輸出：晚上好

5. parseTime - 日期格式化 (時(shí)間+日期)

方法作用：根據(jù)傳入的時(shí)間和格式，返回格式化后的日期時(shí)間字符串。支持自定義格式，可以格式化為年、月、日、小時(shí)、分鐘、秒等。

參數(shù)：

time：傳入的時(shí)間，支持 string、number 或 Date 對(duì)象。
pattern：格式化字符串，默認(rèn)是 '{y}-{m}-wppm3vysvbp {h}:{i}:{s}'?？梢园?/li>

- {y}：年份
- {m}：月份
- wppm3vysvbp：日
- {h}：小時(shí)
- {i}：分鐘
- {s}：秒
- {a}：星期（中文）

返回值：

格式化后的日期時(shí)間字符串。

示例：

const date1 = new Date('2024-01-17T12:30:45');
console.log(parseTime(date1, '{y}-{m}-wppm3vysvbp {h}:{i}:{s}')); // 輸出：2024-01-17 12:30:45

const date2 = new Date('2024-01-17T12:30:45');
console.log(parseTime(date2, '{y}-{m}-wppm3vysvbp 星期{a}')); // 輸出：2024-01-17 星期三

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

方法作用：根據(jù)傳入的時(shí)間，返回格式化后的年月日字符串。類(lèi)似于 parseTime，但只處理日期部分。

參數(shù)：

time：傳入的時(shí)間，支持 string、number 或 Date 對(duì)象。
pattern：格式化字符串，默認(rèn)是 '{y}-{m}-wppm3vysvbp'。

返回值：

格式化后的日期字符串。

示例：

const date1 = new Date('2024-01-17T12:30:45');
console.log(parseDate(date1, '{y}-{m}-wppm3vysvbp')); // 輸出：2024-01-17

const date2 = new Date('2024-01-17T12:30:45');
console.log(parseDate(date2)); // 輸出：2024-01-17

其他常量

export const dateTimeStr: string = 'YYYY-MM-DD HH:mm:ss'; // 完整的日期時(shí)間格式
export const dateStr: string = 'YYYY-MM-DD';              // 僅日期格式
export const timeStr: string = 'HH:mm:ss';                // 僅時(shí)間格式

總結(jié)

formatDate 用于將 Date 格式化為指定格式的字符串，支持多種日期格式（如季度、星期等）。
getWeek 用于獲取當(dāng)前日期是該年份的第幾周。
formatPast 用于將日期轉(zhuǎn)換為“幾秒前”、“幾分鐘前”等相對(duì)時(shí)間格式。
formatAxis 用于返回基于時(shí)間的問(wèn)候語(yǔ)。
parseTime 和 parseDate 用于根據(jù)傳入時(shí)間返回格式化后的日期字符串，parseTime 返回時(shí)間和日期，parseDate 僅返回日期。