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 分')
等等。