如何高效实现HTML段落中时间的时分秒补零格式化？

问题描述 #

我有一个指向HTML段落标签的timer变量，希望修改该段落内容以显示时间，当前使用代码：

timer.innerHTML = hr + ":" + min;

（注：hr和min为存储当前时间的变量）。为避免出现“9:7”这类不符合09:07格式的显示，我添加了若干if语句：

if(hr < 10){
    timer.innerHTML = "0" + hr + ":" + min;
} 
if (min < 10){
    timer.innerHTML = hr + ":" + min;
}

但我还需要对小时、分钟、秒都进行补零处理，不想编写大量if语句，请问是否有更高效的实现方式？

解决方案 #

方法1：ES6+字符串padStart方法 #

这是最简洁的现代方案，padStart可以直接给字符串补前导字符到指定长度：

// 将数字转为字符串后，补零到2位长度
const formattedHr = hr.toString().padStart(2, '0');
const formattedMin = min.toString().padStart(2, '0');
const formattedSec = sec.toString().padStart(2, '0');

timer.innerHTML = `${formattedHr}:${formattedMin}:${formattedSec}`;

如果需要兼容不支持ES6的旧环境，自己封装一个极简补零函数即可：

function padZero(num) {
    return num < 10 ? '0' + num : num.toString();
}

timer.innerHTML = `${padZero(hr)}:${padZero(min)}:${padZero(sec)}`;

方法2：数字运算取后两位 #

不用条件判断，利用数字转字符串的特性，通过(100 + num)后取字符串最后两位，自动实现补零：

function padZero(num) {
    return (100 + num).toString().slice(-2);
}

timer.innerHTML = `${padZero(hr)}:${padZero(min)}:${padZero(sec)}`;

比如9会变成109，取后两位是09；12变成112，取后两位是12，完美适配一位和两位数字的情况。

方法3：原生Intl.DateTimeFormat API（适合基于Date对象的场景） #

如果你的时间是从Date对象获取的，直接用原生国际化API格式化更省心，还能自动处理本地化：

const now = new Date();
// 配置格式：24小时制、时分秒均为两位数字
const timeFormatter = new Intl.DateTimeFormat('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
});
timer.innerHTML = timeFormatter.format(now);

内容的提问来源于stack exchange，提问作者RCK Euler