在许多开发场景中，后端接口返回的数据常常是以毫秒为单位的时间戳或持续时长。而在前端展示时，我们通常需要将这些毫秒数转换成更易读的时长格式，通常采用“时:分:秒”的形式（例如 00:05:20）。为了实现这一功能，可以编写一个封装函数来进行毫秒到时分秒格式的转换。
本文将介绍如何封装一个简洁的 JavaScript 函数，用于将毫秒数转换为时长格式，并优化该函数的性能和易用性。
假设后台返回的是毫秒数（例如：320000 毫秒），我们需要将其转换为时长格式并以 HH:mm:ss（小时:分钟:秒）的形式显示。例如：
320000 毫秒应转换为 00:05:20。
首先，我们先来看一个基础的函数实现。该函数接收一个毫秒数，并将其转换为时、分、秒格式。
const getMilliSecond = (milliseconds) => {
// 将毫秒转换为秒
let totalSeconds = parseInt(milliseconds / 1000);
// 计算小时数
let hours = parseInt(totalSeconds / 3600); // 每小时 3600 秒
totalSeconds = totalSeconds % 3600; // 计算剩余秒数
// 计算分钟数
let minutes = parseInt(totalSeconds / 60); // 每分钟 60 秒
let seconds = totalSeconds % 60; // 剩余秒数
// 格式化小时、分钟、秒数
let result = '';
// 补零处理
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
将毫秒转换为秒数：
parseInt(milliseconds / 1000)：将毫秒转换为秒，parseInt 用于去除小数部分。
计算小时、分钟和秒数：
/) 和取余 (%) 运算符将总秒数转换为小时、分钟和秒数。格式化输出：
HH:mm:ss。更精确的参数处理
当前函数处理了小时、分钟和秒数的基本逻辑，但它在输入非常小（例如几秒钟）或非常大的毫秒数时可能会出现一些不必要的行为。为了确保它对极限情况的处理更加鲁棒，我们可以增强函数的稳定性：
提高代码的可读性和简洁性
我们可以使用 ES6 的 String.prototype.padStart() 方法来简化补零的过程，避免手动拼接字符串，进一步提高代码的简洁性。
const getMilliSecond = (milliseconds) => {
// 先判断输入是否合法
if (isNaN(milliseconds) || milliseconds < 0) {
return "00:00:00"; // 如果输入无效，则返回默认时间
}
// 将毫秒转换为秒
let totalSeconds = Math.floor(milliseconds / 1000);
// 计算小时、分钟、秒
let hours = Math.floor(totalSeconds / 3600);
let minutes = Math.floor((totalSeconds % 3600) / 60);
let seconds = totalSeconds % 60;
// 使用 padStart 简化补零操作
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
Math.floor() ：替换 parseInt，确保四舍五入问题不再出现。
padStart() ：用 padStart(2, '0') 方法来简化补零的代码，避免手动拼接。
输入验证：添加了输入校验，确保只有非负数的有效数字能够参与计算。若输入无效（如负数或非数字），则返回 "00:00:00"。
对于非常大的毫秒数，尽管该函数已经进行了一些基础优化，但对于需要处理大量数据或长时间运行的应用（例如计时器或统计时长的应用），我们仍然需要考虑性能：
该毫秒转换函数适用于多个场景：
通过上述封装的函数，我们可以方便地将毫秒数转换为易于展示的时长格式，支持时、分、秒显示，并考虑了输入校验和性能优化。无论是短时任务还是长时间运行的计时功能，都可以通过这种方式来呈现直观的时间信息。
到此这篇关于JavaScript实现将毫秒数转换为易读时长格式的文章就介绍到这了,更多相关JavaScript毫秒数格式转换内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！