前端開發 - 淺談時間戳

前言

時間戳這個東西，其實一直以來我都知道有這個東西大概能幹嘛，反正就是跟時間有關的東西啦，但一直都沒有去深入的系統學習，因為實際在開發時，有關時間的一切在項目中都沒有想太多，也沒有做過多的思考和處理。直到最近在實習時，因應需求加上 mentor 的提點，才明白到實際開發中時間處理中時間戳的重要性，所以趕緊來寫寫這邊，好好的學明白時間戳的相關知識點。

正文

作為一個前端，有可能你會碰到在頁面上要顯示各種時間，例如對於一個博客網站，要顯示發布時間，對於一個餐廳訂位系統，可能要顯示訂位時間，複雜一點的話，比如對於像是淘寶這類的拍賣網站，或許要對不同訂單顯示各種時間，反正身為一個前端，不管做什麼，都可能常常碰到要處理『時間』這個東西。

而且這些都還只是顯示時間而已，還有一部份是要考慮與後端的交互，或甚至更複雜一點，對於國際化業務，多時區是不避免的問題。

總而言之，會發現其實處理好時間並不是一件簡單的事情，所以通過這篇分享一下對於時間戳這個東西一點小小的心得。

先從 timestamp 開始談起

要談時間，最好直接從時間戳(timestamp)談起，或是更精確一點說，是 Unix 時間戳。

什麼是時間戳？我們在瀏覽器控制台，或是隨便 IDE 輸入下面這行，打印出來的東西就是所謂的時間戳：

console.log(new Date().getTime());

// 1630569486511

這一串看似是亂碼的東西其實就是所謂的時間戳，是一個 number 類型。時間戳的定義其實指的是：

從 UTC+0 時區的 1970 年 1 月 1 號 0 時 0 分 0 秒開始，總共過了多少毫秒

參考 ECMAScript 對時間戳的定義是這樣寫的：

20.4.1.1 Time Values and Time Range

Time measurement in ECMAScript is analogous to time measurement in POSIX, in particular sharing definition in terms of the proleptic Gregorian calendar, an epoch of midnight at the beginning of 01 January, 1970 UTC, and an accounting of every day as comprising exactly 86,400 seconds (each of which is 1000 milliseconds long).

在 Unix 系統中的時間就是這樣表示的，而許多語言得到的 timestamp 也都是類似的表示方法，但有些可能只能精確到「秒」，有些可以精確到「毫秒」。如果你發現程序中有些地方需要除以 1000 或是乘以 1000，就很有可能是在做秒跟毫秒等單位之間的轉換。

上面我們有提到「UTC +0」這東西，這其實就是 +0 時區的意思。

舉例來說，北京標準時區是 +8，或如果要講得更標準一點，就是 GMT +8 或是 UTC +8，這兩者的區別可以參考 到底是 GMT+8 還是 UTC+8 ?，現在的標準基本上都是 UTC 了，所以這篇文章接下來都只會用 UTC。

儲存時間的標準格式

有了一些基本概念之後，可以來談該如何儲存時間。其中一種儲存方式就是存上面所說的 timestamp，但缺點顯而易見，就是無法用肉眼直接看出時間是什麼，一定要經過轉換。

而另外一種儲存時間的標準叫做 ISO 8601，這個標準被應用於許多地方。

直接看 RFC 3999 對 ISO 8601 時間標準的說法如下：

This document defines a date and time format for use in Internet protocols that is a profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar.

那這到底是個什麼樣的格式呢？其實就是像 2020-12-26T12:38:00Z 這種格式，用字符串表現一個帶有時區的時間。

更詳細的規則可以參考下圖：

RFC 的規則會定義的比較完整，但總而言之就是如上面說的那種形式。然後最後面如果是 Z 就代表 UTC +0 時區，如果要其他時區可以這樣寫：2020-12-26T12:38:00+08:00，代表 +8 時區的 12 月 26 號 12 點 38 分 0 秒。

在 JavaScript 裡面則是基於 ISO 8601 的延伸格式，在 ECMAScript spec 中的 Date Time String Format 有提到：

理解了表示時間的標準格式以後，有個重要的觀念，在處理時間的時候要時刻提醒自己，就是時間的相對性。

舉例來說，1593163158 這個 timestamp 代表的是：
「UTC +0 時區的 2020-06-26 09:19:00」，同時也代表著
「UTC +8 時區的 2020-06-26 17:19:00」，這兩個時間雖然看起來不一樣，但是因為時區的不同，所以共用同一個時間戳。

所以當你拿到一個 timestamp 以後，你無法從 timesta