momentjs如何格式化时间差值

在实际应用中，我们经常需要计算两个时间的差值，用来确定消逝的时间，如下：

var m1 = moment('2017-12-18 10:00:20'),
    m2 = moment('2017-12-18 10:10:00'),
    du = moment.duration(m2 - m1, 'ms');
//  输出结果为“10 分钟”
console.log(du.locale('zh-cn').humanize())

在要求精确的环境中，比如要精确到秒，并且能提供秒递增的动画功能，此时“humanize()”就显得力不从心，但duration又没有提供moment的“format”方法，怎么办呢？

初步的想法是将moment.duration对象转换为moment对象，然后再利用“format”方法进行转换，但是结果却多了8小时，如下：

var m1 = moment('2017-12-18 10:00:20'),
    m2 = moment('2017-12-18 10:10:00'),
    du = moment(m2 - m1).format('HH时mm分ss秒');
//  输出结果为08时09分40秒
console.log(du);

8小时，很容易就让我们想到是时区的问题，可以通过如下方式进行验证：

du = moment(m2 - m1).format('HH时mm分ss秒 ZZ');
//  输出结果为08时09分40秒 +0800
console.log(du)

粗暴的方式是直接减去8小时的数据，优雅的方式是引入Moment Timezone，如下：

//  Africa/Abidjan为+00:00时区
//  输出结果00时09分40秒
du = moment.tz(m2 - m1, "Africa/Abidjan").format('HH时mm分ss秒')

当然，还有其他的方式，比如采用数据提取方式，如下：

var du = moment.duration(m2 - m1, 'ms'),
    hours = du.get('hours'),
    mins = du.get('minutes'),
    ss = du.get('seconds');
//  依旧可以达到同样的效果
console.log(hours + '时' + mins + '分' + ss + '秒');

为什么moment对象支持加减法操作

我们知道，javascript是不支持操作重载的，那moment是怎么实现的？其实所有的操作都依赖于valueOf()方法，所以支持加减法操作很简单，只需要提供valueOf方法即可，如下：

function Time(time) {
    this.time = time;
}
Time.prototype.valueOf = function() {
    return this.time;
}
var t1 = new Time(1000),
    t2 = new Time(2000);
//  输出-1000
alert(t1 - t2);

参考文档

1. 时区划分参考