3C科技 娛樂遊戲 美食旅遊 時尚美妝 親子育兒 生活休閒 金融理財 健康運動 寰宇綜合

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 搜尋這個社團並報名這個活動吧!

本文由noobtw提供 原文連結

寫了 5860316篇文章,獲得 23313次喜歡
精彩推薦