30DaysChallenge 是自主性每兩天寫一篇技術相關的部落格

Moment.js

相信這個套件大家都很熟悉! Date()甚麼的可以拋得遠遠啦!

雖然平常處理資料的時候很少用到時間，頂多是拿來排序

但如果想要自己做一個天氣、地圖、旅遊、金融相關的專案

時間就會是一個很重要的資料

Unix TimeStamp

UNIX 時間，或稱 POSIX 時間是 UNIX 或類 UNIX 系統使用的時間表示方式：從 UTC1970 年 1 月 1 日 0 時 0 分 0 秒起至現在的總秒數，不考慮閏秒[1]。 –from wiki

在進入如何使用之前，先了解一下Unix TimeStamp

簡單來說，unix 的時間是就是從 1970/1/1 0:0:0 +0 開始一秒一秒算起，

且不論你人在哪個時區，顯示出來的 unix timestamp 都會是一樣的。

瀏覽器打開 dev tools 用這個語法就可以簡單找到 unix timestamp

new Date() / 1000 //1628343662 這是我剛剛打出來的時間，以秒為單位

Date()

為何會提到 unix timestamp 呢?

剛剛找到合適的 API 時，發現時間的資料很…不一樣

"dt": 1628340495,
"sys": {
  "type": 1,
  "id": 9021,
  "country": "RU",
  "sunrise": 1628300863,
  "sunset": 1628356792
},
"timezone": 10800,

簡單來說，

dt : 時間日期 (unix timestamp)
county : 國家 (上述例子為俄羅斯)
timezone : 時區 (unix timestamp, +3 時區)

那如何進行轉換呢?

以下進行來跟 Date() 過個幾招

// 錯誤的，裡面要帶毫秒
new Date(1628340495)
Tue Jan 20 1970 04:19:00 GMT+0800 (台北標準時間)

// 正確，要使用毫秒，現在知道轉換過來的本地時間了
new Date(1628340495 * 1000)
Sat Aug 07 2021 20:48:15 GMT+0800 (台北標準時間)

那如何印出 +3 時區的時間呢?

有興趣的朋友可以自行於 dev tools 試試看，這邊就不演示碰壁的過程了 XD

Moment.js

官方網站

這邊我們會利用手邊現有的資料，搭配 moment 快速 GET!

now (unix timestamp)
timezone (unix timestamp)

開始之前，再牢記一次

unix timestamp不管到哪裡都是唯一值，都代表同一個時間點

直接進入程式碼

const userTime = moment.unix(current.data.dt).format()

const utcTime = moment.unix(current.data.dt).utc().format()

const localTime = moment
  .unix(current.data.dt)
  .utcOffset(current.data.timezone / 60)
  .format()

2021-08-07T20:48:15+08:00   //userTime

2021-08-07T12:48:15Z        //utcTime

2021-08-07T15:48:15+03:00   //localTime

~ format()轉換成預設顯示的日期格式

userTime: moment.unix()填入 unix timestamp 再使用.format() 會得到當前使用者的地區的時間
utcTime: 加入utc()轉換為+0 時區
localeTime: 重點來了!! 套件的方便，就不用人肉計算到腦記憶體爆炸，使用 utcOffset( min )填入分鐘，透過預先得知的 timezone 資料將時間除 60 秒得到分鐘，套件就會幫你計算時區了。(正負有差，不要算錯惹)

moment 真的非常方便! 除了平常想要顯示特定的日期格式，轉換時區也是無障無礙。