TypeScript封裝一個(gè)通用的時(shí)間格式化方法
在日常開發(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)輸入無效時(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ò)誤處理:無效輸入會(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 是否大寫(默認(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)鍵邏輯解析
步驟 | 代碼 | 說明 |
---|---|---|
輸入轉(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. 常見問題解決
問題 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");
問題 2:輸入解析失敗
- 現(xiàn)象:傳入字符串如
"3:05 PM"
導(dǎo)致錯(cuò)誤。 - 解決:使用更安全的解析庫(如
date-fns
或moment.js
)替代new Date()
。
問題 3:瀏覽器兼容性
現(xiàn)象:舊瀏覽器不支持 .padStart()
。
解決:添加 Polyfill 或改用以下代碼:
const padZero = (num: number) => (num < 10 ? `0${num}` : num.toString()); const minutes = padZero(date.getMinutes());
7. 總結(jié)
通過上述方法,我們實(shí)現(xiàn)了一個(gè)靈活且可靠的 TypeScript 時(shí)間格式化工具。它支持多種輸入類型,具備良好的擴(kuò)展性和錯(cuò)誤處理能力,能夠滿足日常開發(fā)中的大部分需求。
到此這篇關(guān)于TypeScript封裝一個(gè)通用的時(shí)間格式化方法的文章就介紹到這了,更多相關(guān)TypeScript時(shí)間格式化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)數(shù)據(jù)脫敏的三種解決方式
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)數(shù)據(jù)脫敏的三種解決方式,包括電話、姓名、郵箱、身份證等,有需要的小伙伴可以參考一下2024-11-11頁面圖片浮動(dòng)左右滑動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)案例
本篇文章主要是對(duì)頁面圖片浮動(dòng)左右滑動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)案例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02微信小程序全局配置之tabBar實(shí)戰(zhàn)案例
tabBar相對(duì)而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08javascript trim 去空格函數(shù)實(shí)現(xiàn)代碼
去除字符串左右兩端的空格,在vbscript里面可以輕松地使用 trim、ltrim 或 rtrim,但在js中卻沒有這3個(gè)內(nèi)置方法,需要手工編寫。下面的實(shí)現(xiàn)方法是用到了正則表達(dá)式,效率不錯(cuò),并把這三個(gè)方法加入String對(duì)象的內(nèi)置方法中去。2008-10-10JavaScript動(dòng)態(tài)數(shù)量的文件上傳控件
本文給大家分享一段js代碼關(guān)于動(dòng)態(tài)數(shù)量的文件上傳控件,代碼簡(jiǎn)單易懂,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看2016-11-11學(xué)習(xí)JavaScript中的閉包c(diǎn)losure應(yīng)該注意什么
這篇文章主要介紹了學(xué)習(xí)JavaScript中的閉包c(diǎn)losure應(yīng)該注意什么?在?JavaScript?中,?每當(dāng)創(chuàng)建一個(gè)函數(shù),?閉包就會(huì)在函數(shù)創(chuàng)建的同時(shí)被創(chuàng)建出來,但是學(xué)習(xí)的時(shí)候我們應(yīng)該注意哪些問題呢,帶著疑問一起進(jìn)入下面文章學(xué)習(xí)具體內(nèi)容吧2022-06-06利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用詳解
單例是在程序設(shè)計(jì)非常基礎(chǔ)的東西,這篇文章主要給大家介紹了關(guān)于利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12