目录
1、目标2、基本的毫秒转换函数3、代码解析4、优化与增强5、改进后的函数6、改进说明7、性能优化8、应用场景9、总结在许多开发场景中，后端接口返回的数据常常是以毫秒为单位的时间戳或持续时长。而在前端展示时，我们通常需要将这些毫秒数转换成更易读的时长格式，通常采用“时:分:秒”的形式（例如 00:05:20）。为了实现这一功能，可以编写一个封装函数来进行毫秒到时分秒格式的转换。
本文将介绍如何封装一个简洁的 JavaScript 函数，用于将毫秒数转换为时长格式，并优化该函数的性能和易用性。
1、目标
假设后台返回的是毫秒数（例如：320000 毫秒），我们需要将其转换为时长格式并以 HH:mm:ss（小时:分钟:秒）的形式显示。例如：
320000毫秒应转换为00:05:20。
2、基本的毫秒转换函数
首先，我们先来看一个基础的函数实现。该函数接收一个毫秒数，并将其转换为时、分、秒格式。
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:203、代码解析
将毫秒转换为秒数：
parseInt(milliseconds / 1000)：将毫秒转换为秒，parseInt用于去除小数部分。
计算小时、分钟和秒数：
使用整除 (/) 和取余 (%) 运算符将总秒数转换为小时、分钟和秒数。例如，1 小时 = 3600 秒，1 分钟 = 60 秒。格式化输出：
通过条件判断来判断小时、分钟、秒数是否小于 10，如果小于 10，则在前面补充零。最终输出格式为HH:mm:ss。4、优化与增强
更精确的参数处理
当前函数处理了小时、分钟和秒数的基本逻辑，但它在输入非常小（例如几秒钟）或非常大的毫秒数时可能会出现一些不必要的行为。为了确保它对极限情况的处理更加鲁棒，我们可以增强函数的稳定性：
避免负数：如果传入的毫秒数为负值，应该返回一个默认的“00:00:00”。避免无效的输入：可以对非数字类型的输入进行校验。提高代码的可读性和简洁性
我们可以使用 ES6 的String.prototype.padStart()方法来简化补零的过程，避免手动拼接字符串，进一步提高代码的简洁性。
5、改进后的函数
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:20console.log(getMilliSecond(5000)); // 00:00:05console.log(getMilliSecond(-1000)); // 00:00:00console.log(getMilliSecond(0)); // 00:00:00console.log(getMilliSecond(3600000)); // 01:00:006、改进说明
Math.floor() ：替换parseInt，确保四舍五入问题不再出现。
padStart() ：用padStart(2, '0')方法来简化补零的代码，避免手动拼接。
输入验证：添加了输入校验，确保只有非负数的有效数字能够参与计算。若输入无效（如负数或非数字），则返回 "00:00:00"。
7、性能优化
对于非常大的毫秒数，尽管该函数已经进行了一些基础优化，但对于需要处理大量数据或长时间运行的应用（例如计时器或统计时长的应用），我们仍然需要考虑性能：
避免不必要的计算：如果传入的毫秒数非常大，可能涉及多个小时
