TypeScript封裝一個(gè)通用的時(shí)間格式化方法
在日常開(kāi)發(fā)中,我們經(jīng)常需要將時(shí)間格式化為用戶友好的形式,比如 PM 03:05。本文將介紹如何在 TypeScript 中封裝一個(gè)通用的時(shí)間格式化方法,支持多種輸入類型,并具備良好的擴(kuò)展性和錯(cuò)誤處理能力。
1. 核心實(shí)現(xiàn)代碼
以下是核心代碼實(shí)現(xiàn):
/**
* 將時(shí)間格式化為 AM/PM 格式(例如 "PM 03:05")
* @param input 時(shí)間輸入(支持 Date 對(duì)象、時(shí)間戳、ISO 字符串)
* @returns 格式化后的時(shí)間字符串
* @throws 當(dāng)輸入無(wú)效時(shí)拋出錯(cuò)誤
*/
function formatTimeToAMPM(input: Date | number | string): string {
// 將輸入統(tǒng)一轉(zhuǎn)換為 Date 對(duì)象
const date = input instanceof Date ? input : new Date(input);
// 驗(yàn)證時(shí)間有效性
if (isNaN(date.getTime())) {
throw new Error("Invalid date input");
}
// 提取小時(shí)和分鐘
let hours = date.getHours();
const minutes = date.getMinutes().toString().padStart(2, "0");
// 判斷 AM/PM
const ampm = hours >= 12 ? "PM" : "AM";
// 轉(zhuǎn)換為 12 小時(shí)制
hours = hours % 12;
hours = hours === 0 ? 12 : hours; // 處理 0 點(diǎn)顯示為 12
// 格式化為兩位數(shù)小時(shí)
const formattedHours = hours.toString().padStart(2, "0");
return `${ampm} ${formattedHours}:${minutes}`;
}
2. 功能特性
- 多類型輸入支持:接受
Date對(duì)象、時(shí)間戳(number)、ISO 字符串(string)。 - 錯(cuò)誤處理:無(wú)效輸入會(huì)拋出明確錯(cuò)誤。
- 自動(dòng)補(bǔ)零:小時(shí)和分鐘始終顯示兩位數(shù)(如
03:05)。 - 12 小時(shí)制:自動(dòng)轉(zhuǎn)換 24 小時(shí)制為 12 小時(shí)制(
0 點(diǎn)顯示為 12)。
3. 使用示例
// 示例 1: 使用 Date 對(duì)象
const now = new Date("2023-10-10T15:05:00"); // 3:05 PM
console.log(formatTimeToAMPM(now)); // 輸出 "PM 03:05"
// 示例 2: 使用時(shí)間戳
const timestamp = now.getTime();
console.log(formatTimeToAMPM(timestamp)); // 輸出 "PM 03:05"
// 示例 3: 使用 ISO 字符串
console.log(formatTimeToAMPM("2023-10-10T00:05:00")); // 輸出 "AM 12:05"
console.log(formatTimeToAMPM("2023-10-10T12:05:00")); // 輸出 "PM 12:05"
console.log(formatTimeToAMPM("2023-10-10T13:05:00")); // 輸出 "PM 01:05"
4. 高級(jí)用法(擴(kuò)展功能)
支持自定義格式
interface FormatOptions {
showSeconds?: boolean; // 是否顯示秒(如 "PM 03:05:30")
uppercase?: boolean; // AM/PM 是否大寫(xiě)(默認(rèn) true)
}
function formatTimeToAMPM(
input: Date | number | string,
options: FormatOptions = {}
): string {
// ...(省略前面的代碼)
// 處理選項(xiàng)
const ampmDisplay = options.uppercase !== false ? ampm : ampm.toLowerCase();
let result = `${ampmDisplay} ${formattedHours}:${minutes}`;
// 添加秒數(shù)
if (options.showSeconds) {
const seconds = date.getSeconds().toString().padStart(2, "0");
result += `:${seconds}`;
}
return result;
}
// 使用示例
console.log(formatTimeToAMPM(new Date(), { showSeconds: true }));
// 輸出 "PM 03:05:30"
console.log(formatTimeToAMPM(new Date(), { uppercase: false }));
// 輸出 "pm 03:05"
5. 關(guān)鍵邏輯解析
| 步驟 | 代碼 | 說(shuō)明 |
|---|---|---|
| 輸入轉(zhuǎn)換 | new Date(input) | 統(tǒng)一轉(zhuǎn)換為 Date 對(duì)象 |
| 有效性校驗(yàn) | isNaN(date.getTime()) | 確保輸入是合法時(shí)間 |
| 12 小時(shí)制轉(zhuǎn)換 | hours = hours % 12 | 將 24 小時(shí)制轉(zhuǎn)換為 12 小時(shí)制 |
| 午夜 0 點(diǎn)處理 | hours = hours === 0 ? 12 : hours | 0 點(diǎn)顯示為 12(符合日常習(xí)慣) |
| 自動(dòng)補(bǔ)零 | .padStart(2, "0") | 確保小時(shí)和分鐘始終是兩位數(shù) |
| AM/PM 判斷 | hours >= 12 ? "PM" : "AM" | 根據(jù)小時(shí)數(shù)判斷時(shí)段 |
6. 常見(jiàn)問(wèn)題解決
問(wèn)題 1:時(shí)區(qū)不一致
現(xiàn)象:輸出時(shí)間與預(yù)期不符。
解決:明確函數(shù)基于本地時(shí)間,如需 UTC 時(shí)間,改用以下方法:
// 使用 UTC 時(shí)間 let hours = date.getUTCHours(); const minutes = date.getUTCMinutes().toString().padStart(2, "0");
問(wèn)題 2:輸入解析失敗
- 現(xiàn)象:傳入字符串如
"3:05 PM"導(dǎo)致錯(cuò)誤。 - 解決:使用更安全的解析庫(kù)(如
date-fns或moment.js)替代new Date()。
問(wèn)題 3:瀏覽器兼容性
現(xiàn)象:舊瀏覽器不支持 .padStart()。
解決:添加 Polyfill 或改用以下代碼:
const padZero = (num: number) => (num < 10 ? `0${num}` : num.toString());
const minutes = padZero(date.getMinutes());
7. 總結(jié)
通過(guò)上述方法,我們實(shí)現(xiàn)了一個(gè)靈活且可靠的 TypeScript 時(shí)間格式化工具。它支持多種輸入類型,具備良好的擴(kuò)展性和錯(cuò)誤處理能力,能夠滿足日常開(kāi)發(fā)中的大部分需求。
到此這篇關(guān)于TypeScript封裝一個(gè)通用的時(shí)間格式化方法的文章就介紹到這了,更多相關(guān)TypeScript時(shí)間格式化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript使用location.search的示例
本文介紹javascript 使用location.search獲取當(dāng)前地址欄參數(shù)的實(shí)例2013-11-11
javascript實(shí)現(xiàn)劃詞標(biāo)記劃詞搜索功能修正版
javascript實(shí)現(xiàn)劃詞標(biāo)記劃詞搜索功能修正版...2006-12-12
解決ie11 SCRIPT5011:不能執(zhí)行已釋放Script的代碼問(wèn)題
這篇文章主要介紹了ie11 SCRIPT5011:不能執(zhí)行已釋放Script的代碼 ,需要的朋友可以參考下2019-05-05
HBuilderX開(kāi)發(fā)一個(gè)簡(jiǎn)單的微信小程序的實(shí)現(xiàn)步驟
本文主要介紹了HBuilderX開(kāi)發(fā)一個(gè)簡(jiǎn)單的微信小程序的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片
用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片...2007-03-03
js實(shí)現(xiàn)股票實(shí)時(shí)刷新數(shù)據(jù)案例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)股票實(shí)時(shí)刷新數(shù)據(jù)案例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試方法
這篇文章主要介紹了利用Vconsole和Fillder進(jìn)行移動(dòng)端抓包調(diào)試,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
JavaScript實(shí)現(xiàn)的聯(lián)動(dòng)菜單特效示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的聯(lián)動(dòng)菜單特效,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-07-07
如何通過(guò)javascript操作web控件的自定義屬性
這篇文章主要是對(duì)如何通過(guò)javascript操作web控件的自定義屬性進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所 幫助2013-11-11

