如何在Moment.js中格式化Duration？倒计时时分秒补零问题

解决这个问题不用碰Moment.js的内部私有属性，有两种简单可行的方式：

方法一：自定义补零函数 #

写一个极简的工具函数，给小于10的数字自动补前导零，直接包裹需要格式化的hours()、minutes()、seconds()返回值即可：

const padZero = (num) => num < 10 ? `0${num}` : `${num}`;

修改你的组件代码，把补零函数应用到时分秒上：

import React, { useState, useEffect } from 'react';
import moment from 'moment';

const Clock = () => {
  const [clock, setClock] = useState(moment());
  const theEnd = moment('2050-01-01 00:00:00');
  const timeBetween = moment.duration(theEnd.diff(clock));

  const padZero = (num) => num < 10 ? `0${num}` : `${num}`;

  useEffect(() => {
    const timer = setInterval(() => setClock(moment()), 1000);
    // 清理定时器避免内存泄漏
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="clock-container">
      <p className='time'>{`${timeBetween.years()} years, ${timeBetween.months()} months, ${timeBetween.days()} days`}</p>
      <p className='time'>{`${padZero(timeBetween.hours())} hours : ${padZero(timeBetween.minutes())} minutes : ${padZero(timeBetween.seconds())} seconds`}</p>
    </div>
  );
};

export default Clock;

这种方式完全保留了timeBetween原生方法的正确性，不会出现月份少算的问题，而且逻辑清晰，自定义程度高。

方法二：利用UTC时间格式化 #

把Duration转换成毫秒数，通过moment.utc()包裹后直接用format()方法生成标准的两位时分秒字符串：

const formattedTime = moment.utc(timeBetween.asMilliseconds()).format('HH:mm:ss');

如果需要拆分显示每个部分的单位，可以这样处理：

<p className='time'>{
  formattedTime.split(':').map((val, idx) => `${val} ${['hours', 'minutes', 'seconds'][idx]}`).join(' : ')
}</p>

注意事项 #

不要直接访问moment(timeBetween)._data，这是Moment.js的内部私有属性：

• 它的月份是0-11的索引值，所以会导致月份少算一个月
• 私有属性的结构可能随版本更新变化，依赖它会让代码不稳定

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