Zi 字媒體
2017-07-25T20:27:27+00:00
你知道 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：
首先解析時間透過 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 搜尋這個社團並報名這個活動吧！
寫了
5860316篇文章，獲得
23313次喜歡