Moment.js:時間處理、驗證、格式化的好幫手

你知道 JavaScript 要怎麼把時間格式化成標準格式或其他格式嗎?這篇文章先帶你用 Date 物件走一次,後半段再推薦你 Moment.js 這個優質套件!

最近參加了 The F2E - 前端修練精神時光屋 的活動,一開始活動丟了一個暖身題,讓大家去爬它的 API,並顯示使用者是否報名成功、報名時間等等;而普遍大家都遇到一個問題,就是怎麼把 Unix 格式的 timestamp 轉成 Human-redable 的格式。

JavaScript Date 物件

首先拿到的時間格式是這樣的:1526254705000,這是標準用來處理時間的 Unix timestamp 格式,又稱 POSIX time、Unix Epoch time 等等(其實 JavaScript 比 Unix timestamp 多乘了 1000,因為 JS 是用毫秒來表示。以下皆以 timestamp 來表示 JavaScript 中這個格式),如果要處理這個東西的話,可以用 Date 物件去初始化:

var time = new Date(1526254705000);

此時 time 就會是我們的 Date 物件。如果想要轉成人類可讀的格式,可以透過 toString() 這個方法:

var time = new Date(1526254705000);
console.log(time.toString());

輸出則是:

Mon May 14 2018 07:38:25 GMT+0800 (台北標準時間)

然而這樣子的格式雖然看得懂是看得懂,但好像有點醜啊。如果要在 Vanilla JS 裡輸出美一點的格式,像是 YYYY-MM-DD HH:mm:ss,大概要透過 getDate 等方法去把各個值取出來再整理了,例如:

var time = new Date(1526254705000);
var YYYY = time.getFullYear();
var MM = time.getMonth() + 1;
var DD = time.getDate();
var HH = time.getHours();
var mm = time.getMinutes();
var ss = time.getSeconds();
console.log(YYYY + '-' + MM + '-' + DD + ' ' + HH + ':' + mm+':' + ss);

並輸出:

2018-5-14 7:38:25

不僅麻煩,又不會自動補 0。其中 getMonth() 方法是回傳 0~11 的月份,更難理解。

Moment.js

所以這時候就要靠這支 Moment.js 了。Moment.js 可以解析時間,然後再格式化成各種時間。

可以透過 cdn 載入這支 js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

首先解析時間透過 Moment 去初始化:

var time = moment(1526254705000);

這時候再用 format 方法格式化成想要的樣子:

var time = moment(1526254705000).format('YYYY-MM-DD HH:mm:ss');

就能看到輸出:

2018-05-14 07:38:25

是不是好看多了呢?如果要輸出不同格式的話,可以再 format 方法裡面寫不同格式即可,例如 .format('hh:mm:ss') 就可以輸出 12 小時制的時、分、秒,甚至是 .format('mm 時 ss 分') 等等。

最後補一下暖身題的 原始 API我寫的範例,有興趣的話就到 Facebook 搜尋這個社團並報名這個活動吧!