在許多開發(fā)場景中，后端接口返回的數(shù)據(jù)常常是以毫秒為單位的時間戳或持續(xù)時長。而在前端展示時，我們通常需要將這些毫秒數(shù)轉(zhuǎn)換成更易讀的時長格式，通常采用“時:分:秒”的形式（例如 00:05:20）。為了實現(xiàn)這一功能，可以編寫一個封裝函數(shù)來進(jìn)行毫秒到時分秒格式的轉(zhuǎn)換。

本文將介紹如何封裝一個簡潔的 JavaScript 函數(shù)，用于將毫秒數(shù)轉(zhuǎn)換為時長格式，并優(yōu)化該函數(shù)的性能和易用性。

1、目標(biāo)

假設(shè)后臺返回的是毫秒數(shù)（例如：320000 毫秒），我們需要將其轉(zhuǎn)換為時長格式并以 HH:mm:ss（小時:分鐘:秒）的形式顯示。例如：

320000 毫秒應(yīng)轉(zhuǎn)換為 00:05:20。

2、基本的毫秒轉(zhuǎn)換函數(shù)

首先，我們先來看一個基礎(chǔ)的函數(shù)實現(xiàn)。該函數(shù)接收一個毫秒數(shù)，并將其轉(zhuǎn)換為時、分、秒格式。

const getMilliSecond = (milliseconds) => {
    // 將毫秒轉(zhuǎn)換為秒
    let totalSeconds = parseInt(milliseconds / 1000);
 
    // 計算小時數(shù)
    let hours = parseInt(totalSeconds / 3600); // 每小時 3600 秒
    totalSeconds = totalSeconds % 3600; // 計算剩余秒數(shù)
 
    // 計算分鐘數(shù)
    let minutes = parseInt(totalSeconds / 60); // 每分鐘 60 秒
    let seconds = totalSeconds % 60; // 剩余秒數(shù)
 
    // 格式化小時、分鐘、秒數(shù)
    let result = '';
    
    // 補(bǔ)零處理
    if (hours < 10) {
        result += '0' + hours + ':';
    } else {
        result += hours + ':';
    }
 
    if (minutes < 10) {
        result += '0' + minutes + ':';
    } else {
        result += minutes + ':';
    }
 
    if (seconds < 10) {
        result += '0' + seconds;
    } else {
        result += seconds;
    }
 
    return result;
};
 
// 測試
let time = getMilliSecond(320000);
console.log(time); // 輸出: 00:05:20

3、代碼解析

將毫秒轉(zhuǎn)換為秒數(shù)：

parseInt(milliseconds / 1000)：將毫秒轉(zhuǎn)換為秒，parseInt 用于去除小數(shù)部分。

計算小時、分鐘和秒數(shù)：

• 使用整除 (/) 和取余 (%) 運算符將總秒數(shù)轉(zhuǎn)換為小時、分鐘和秒數(shù)。
• 例如，1 小時 = 3600 秒，1 分鐘 = 60 秒。

格式化輸出：

• 通過條件判斷來判斷小時、分鐘、秒數(shù)是否小于 10，如果小于 10，則在前面補(bǔ)充零。
• 最終輸出格式為 HH:mm:ss。

4、優(yōu)化與增強(qiáng)

更精確的參數(shù)處理

當(dāng)前函數(shù)處理了小時、分鐘和秒數(shù)的基本邏輯，但它在輸入非常小（例如幾秒鐘）或非常大的毫秒數(shù)時可能會出現(xiàn)一些不必要的行為。為了確保它對極限情況的處理更加魯棒，我們可以增強(qiáng)函數(shù)的穩(wěn)定性：

• 避免負(fù)數(shù)：如果傳入的毫秒數(shù)為負(fù)值，應(yīng)該返回一個默認(rèn)的“00:00:00”。
• 避免無效的輸入：可以對非數(shù)字類型的輸入進(jìn)行校驗。

提高代碼的可讀性和簡潔性

我們可以使用 ES6 的 String.prototype.padStart() 方法來簡化補(bǔ)零的過程，避免手動拼接字符串，進(jìn)一步提高代碼的簡潔性。

5、改進(jìn)后的函數(shù)

const getMilliSecond = (milliseconds) => {
    // 先判斷輸入是否合法
    if (isNaN(milliseconds) || milliseconds < 0) {
        return "00:00:00"; // 如果輸入無效，則返回默認(rèn)時間
    }
 
    // 將毫秒轉(zhuǎn)換為秒
    let totalSeconds = Math.floor(milliseconds / 1000);
 
    // 計算小時、分鐘、秒
    let hours = Math.floor(totalSeconds / 3600);
    let minutes = Math.floor((totalSeconds % 3600) / 60);
    let seconds = totalSeconds % 60;
 
    // 使用 padStart 簡化補(bǔ)零操作
    return [
        hours.toString().padStart(2, '0'),
        minutes.toString().padStart(2, '0'),
        seconds.toString().padStart(2, '0')
    ].join(':');
};
 
// 測試
console.log(getMilliSecond(320000)); // 00:05:20
console.log(getMilliSecond(5000));   // 00:00:05
console.log(getMilliSecond(-1000));  // 00:00:00
console.log(getMilliSecond(0));      // 00:00:00
console.log(getMilliSecond(3600000)); // 01:00:00

6、改進(jìn)說明

Math.floor() ：替換 parseInt，確保四舍五入問題不再出現(xiàn)。

padStart() ：用 padStart(2, '0') 方法來簡化補(bǔ)零的代碼，避免手動拼接。

輸入驗證：添加了輸入校驗，確保只有非負(fù)數(shù)的有效數(shù)字能夠參與計算。若輸入無效（如負(fù)數(shù)或非數(shù)字），則返回 "00:00:00"。

7、性能優(yōu)化

對于非常大的毫秒數(shù)，盡管該函數(shù)已經(jīng)進(jìn)行了一些基礎(chǔ)優(yōu)化，但對于需要處理大量數(shù)據(jù)或長時間運行的應(yīng)用（例如計時器或統(tǒng)計時長的應(yīng)用），我們?nèi)匀恍枰紤]性能：

• 避免不必要的計算：如果傳入的毫秒數(shù)非常大，可能涉及多個小時以上，仍然可以使用簡單的算數(shù)運算，不需要過多的邏輯判斷。
• 緩存結(jié)果：如果在應(yīng)用中頻繁調(diào)用該函數(shù)，可以考慮緩存轉(zhuǎn)換結(jié)果，避免重復(fù)計算。

8、應(yīng)用場景

該毫秒轉(zhuǎn)換函數(shù)適用于多個場景：

• 計時器：如在線競賽、倒計時器。
• 視頻時長：如播放視頻時顯示已播放時長。
• 任務(wù)時長統(tǒng)計：用于展示后臺任務(wù)的執(zhí)行時長。

9、總結(jié)

通過上述封裝的函數(shù)，我們可以方便地將毫秒數(shù)轉(zhuǎn)換為易于展示的時長格式，支持時、分、秒顯示，并考慮了輸入校驗和性能優(yōu)化。無論是短時任務(wù)還是長時間運行的計時功能，都可以通過這種方式來呈現(xiàn)直觀的時間信息。

到此這篇關(guān)于JavaScript實現(xiàn)將毫秒數(shù)轉(zhuǎn)換為易讀時長格式的文章就介紹到這了,更多相關(guān)JavaScript毫秒數(shù)格式轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論