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

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

1、目標(biāo)

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

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

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

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

const getMilliSecond = (milliseconds) => {
    // 將毫秒轉(zhuǎn)換為秒
    let totalSeconds = parseInt(milliseconds / 1000);
 
    // 計(jì)算小時(shí)數(shù)
    let hours = parseInt(totalSeconds / 3600); // 每小時(shí) 3600 秒
    totalSeconds = totalSeconds % 3600; // 計(jì)算剩余秒數(shù)
 
    // 計(jì)算分鐘數(shù)
    let minutes = parseInt(totalSeconds / 60); // 每分鐘 60 秒
    let seconds = totalSeconds % 60; // 剩余秒數(shù)
 
    // 格式化小時(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;
};
 
// 測(cè)試
let time = getMilliSecond(320000);
console.log(time); // 輸出: 00:05:20

3、代碼解析

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

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

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

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

格式化輸出：

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

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

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

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

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

提高代碼的可讀性和簡(jiǎn)潔性

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

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

const getMilliSecond = (milliseconds) => {
    // 先判斷輸入是否合法
    if (isNaN(milliseconds) || milliseconds < 0) {
        return "00:00:00"; // 如果輸入無(wú)效，則返回默認(rèn)時(shí)間
    }
 
    // 將毫秒轉(zhuǎn)換為秒
    let totalSeconds = Math.floor(milliseconds / 1000);
 
    // 計(jì)算小時(shí)、分鐘、秒
    let hours = Math.floor(totalSeconds / 3600);
    let minutes = Math.floor((totalSeconds % 3600) / 60);
    let seconds = totalSeconds % 60;
 
    // 使用 padStart 簡(jiǎn)化補(bǔ)零操作
    return [
        hours.toString().padStart(2, '0'),
        minutes.toString().padStart(2, '0'),
        seconds.toString().padStart(2, '0')
    ].join(':');
};
 
// 測(cè)試
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)說(shuō)明

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

padStart() ：用 padStart(2, '0') 方法來(lái)簡(jiǎn)化補(bǔ)零的代碼，避免手動(dòng)拼接。

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

7、性能優(yōu)化

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

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

8、應(yīng)用場(chǎng)景

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

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

9、總結(jié)

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

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

最新評(píng)論