简介

JavaScript 自带 Date 类，也带了非常多的工具，但是可能真要用的时候，却发现这个功能没有、那个功能也没有。于是就有了 moment.js（英文官网|中文网）。相较 Date 类，moment 对格式化输出、多语言、多时区的支持更加友好，还有很多小工具，十分安利。

安装

官网说的很明白了：

1
2
3
4
5
6
npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower install moment --save # bower (废弃)

引入

为了把默认时区配置为 zh-CN，可以另起一个 utils/moment.js，编写如下内容：

1
2
3
4
5
6
7
8
import moment from 'moment'
moment.locale('zh-cn');
// 可以使用 moment(datetime).toChinese() 转换为展示给用户的时间
moment.prototype.toChinese = function() {
  return this.format('YYYY 年 MM 月 DD 日 HH:mm');
}
window.moment = moment; // 可以在浏览器中测试 moment
export default moment;

之后引入 moment 都从 utils/moment.js 中引入：

1
import moment from "@/utils/moment";

使用

这里仅记录我在开发过程中用到的方法。

读入

读取当前时间

moment 和 Date 类似：

1
2
3
4
5
6
7
8
9
Date()
// Fri May 07 2021 16:47:52 GMT+0800 (中国标准时间)
moment()
// Moment {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: Locale, _d: Fri May 07 2021 16:47:50 GMT+0800 (中国标准时间), …}

Date.now();
// 1620377346488
moment.now();
// 1620377349595

读取 ISO 格式时间

Django 后端给的时间是以 ISO 8601 格式给的，类似于 2021-05-07T08:43:17+00:00 或 2021-05-07T08:43:17Z（零时区可以使用 Z 表示）。

Date 是可以直接读取识别的，moment 也是一样。

1
2
3
4
Date('2021-05-07T08:43:17+00:00')
// "Fri May 07 2021 16:49:41 GMT+0800 (中国标准时间)"
moment('2021-05-07T08:43:17+00:00')
// Moment {_isAMomentObject: true, _i: "2021-05-07T08:43:17+00:00", _f: "YYYY-MM-DDTHH:mm:ssZ", _tzm: 0, _isUTC: false, …}

输出

输出为 ISO 格式

Date 可以用 Date.prototype.toISOString() 格式化为 UTC 时区。想要格式化为当地时区，还得靠 moment.prototype.format()。

1
2
3
4
5
new Date().toISOString()
// "2021-05-07T08:55:44.282Z"

moment().format()
// "2021-05-07T16:56:08+08:00"

格式化输出

可以在 moment().format() 的参数中自定义格式。具体的格式可以见 文档。

1
2
moment().format('YYYY-MM-DD HH:mm:ss')
// "2021-05-07 17:56:58"

输出为 x 年前 / x 分钟前

使用 moment.prototype.fromNow()：

1
2
moment('2000-01-01T00:00Z').fromNow()
// 21 年前

其他使用方法

将时间长度转为 HH:mm:ss

比如想要把 1000s 转为 00:16:40。

moment 并不记录时间段，但是由于它的时间戳是从 1970.1.1 00:00 开始经过的毫秒数，所以可以以毫秒形式输入 1000*1000 然后 format 成 HH:mm:ss。

不过这种方法不支持一天以上的时间 2333

1
2
3
4
5
6
moment.utc(1000000).format('HH:mm:ss')
// "00:16:40"
moment.utc(10000000).format('HH:mm:ss')
// "02:46:40"
moment.utc(100000000).format('HH:mm:ss')
// "03:46:40"

如果需要支持的话，还是自己提前算一下天数吧。或者判断一下，如果大于 86400000 就显示 大于一天。