JavaScript如何将毫秒数格式化为补前导零的3位固定长度字符串

问题原因 #

toFixed(3)是用于控制数字的小数保留位数，你获取的milliseconds是整数类型，比如数值2调用toFixed(3)会得到"2.000"，和你需要的前导零效果不符，所以不会生效。

解决方案 #

1. 现代浏览器推荐方案（ES6 padStart）

直接将毫秒数转为字符串后调用padStart方法即可实现前导零补位，该方法第一个参数为目标长度，第二个参数为填充字符：

var updateTime = function () {
  var tempTime = elapsedTime;
  var milliseconds = tempTime % 1000;
  // 毫秒补3位前导零
  var formattedMs = milliseconds.toString().padStart(3, '0');
  tempTime = Math.floor(tempTime / 1000);
  var seconds = tempTime % 60;
  tempTime = Math.floor(tempTime / 60);
  var minutes = tempTime % 60;
  tempTime = Math.floor(tempTime / 60);
  var hours = tempTime % 60;
  // 时分秒也可以按需补2位前导零，展示效果更统一
  time = hours.toString().padStart(2, '0') + ":" + 
         minutes.toString().padStart(2, '0') + ":" + 
         seconds.toString().padStart(2, '0') + "." + 
         formattedMs;
  console.log(formattedMs)
  document.getElementById('time').innerText = time
};

2. 兼容旧浏览器方案

如果需要兼容不支持ES6的旧浏览器，可以手动实现补零逻辑：

// 通用补零工具函数，num为待处理数字，len为目标长度
function padZero(num, len) {
  var str = num + '';
  while (str.length < len) {
    str = '0' + str;
  }
  return str;
}

var updateTime = function () {
  var tempTime = elapsedTime;
  var milliseconds = tempTime % 1000;
  var formattedMs = padZero(milliseconds, 3);
  // 剩余逻辑和上面的实现一致即可
  // ...
};

内容的提问来源于stack exchange，提问作者Ruan Matt