[Vue開發筆記] 一次踩齊new Date()的坑

# [Vue開發筆記] 一次踩齊new Date()的坑 :::info 語言：大部份TypeScript 框架：vue.js 套件：Element UI 需求：不管使用者在哪，固定顯示某個時區時間 ::: #### 【說明】這次的需求是頁面日期時間統一顯示為東8區（GMT+8）時間，傳到後端的資料也必須是東8區時間，並指定時間格式為 `yyyy-MM-dd HH:mm:ss` ~~，這什麼詭異的需求~~ #### 接下來就是踩雷時間… ## new Date()的時區問題第一個雷是 `new Date()` 取得時間物件的時區問題，需求是必須固定顯示東8區時間，但因為每個user所在的時區不同，而 `new Date()` 是取得client端的本地時間，所以不能只用 `new Date()` 產生出來的時間物件 ~~，必須做點手腳~~。一開始的想法很簡單，只要給定 `new Date()` 一個時區，這樣不就可以抓到指定那個時區的時間了嗎？先不論怎麼給定一個時區，尋找方法後得到的結果卻是 ==原生的JS時間對象無法做到這件事…== 。為什麼做不到？我們直接來看實際的例子。 #### 現在假設本地所在時區為```GMT+0（格林威治標準時間）``` ```javascript= new Date('2020-01-01 00:00:00') // Wed Jan 01 2020 00:00:00 GMT+0000 (格林威治標準時間) new Date('2020-01-01 00:00:00 +0800') // Tue Dec 31 2019 16:00:00 GMT+0000 (格林威治標準時間) ``` 當我直接給定 `new Date()` 一個 `yyyy-MM-dd HH:mm:ss` 這樣的格式時間，時間為2020年1月1日的0時0分0秒，他會直接返回一個我指定時間的時間物件，同樣是 `2020-01-01 00:00:00` ，還顯示時區為GMT+0，沒毛病。但如果我指定這個時間的時區要是東8區（GMT+8），如 `#4` ，照這次的需求來看，我覺得它應該返回的是 ``` Wed Jan 01 2020 00:00:00 GMT+0800 (台北標準時間) // 幻想的結果 ``` 實際上返回的是 ``` Tue Dec 31 2019 16:00:00 GMT+0000 (格林威治標準時間) // 實際的結果 ``` #### WTF!!! 這是怎麼回事？我就要GMT+8的0時0分0秒，不行嗎？不行… 那它返回的是什麼鬼？怎麼跑到2019年12月31日去了？其實不管你給 `new Date()` 的是哪裡的時間，縱使加了時區也一樣，當javaScript產生時間物件的時候都會將這個時間轉成 ==相應的本地時區時間== ，所以 `東8區的2020年1月1日0時0分0秒(GMT+8)` ，以時差換算正是 `格林威治標準時間的2019年12月31日16時0分0秒(GMT+0)` 。 #### 哇！！！真的好貼心喔！這種事情就是合用是貼心，不合用就等著煩心… ### 【解決方法】時差換算 getTimezoneOffset() 這個時候可能要用計算時差的方式取得想要的時間了，要達成這個目的，使用的方法是 [getTimezoneOffset()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset) ，其在 [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) 的定義如下： > The getTimezoneOffset() method returns the time zone difference, in minutes, from current locale (host system settings) to UTC. 中文意思就是，**getTimezoneOffset()** 返回當地時間和UTC時間的時間差，其單位是以分（minutes）計算。 :::warning **UTC時間是什麼？** UTC時間即所謂的「世界協調時間（Coordinated Universal Time）」，是目前世界上最主要的時間標準，以原子時秒長為基礎，在時刻上儘量接近於格林威治標準時間（GMT），也有地區稱之為「協調世界時」。對於大多數用途來說，**UTC時間被認為能與GMT時間互換**，但GMT時間已不再被科學界所確定。所以一般講「**UTC時間**」，可以當作「UTC+0」或「GMT+0」時間來看。 ::: #### 來看看實際的例子，並且再將本地時區拉回到 `GMT+8（東8區/台北標準時間)` ```javascript= new Date('2020-01-01 00:00:00').getTimezoneOffset() // -480 new Date('2020-01-01 00:00:00 +0000').getTimezoneOffset() // -480 new Date('2020-01-01 00:00:00 +0800').getTimezoneOffset() // -480 new Date('2020-01-01 00:00:00 -0300').getTimezoneOffset() // -480 new Date('2020-01-01 00:00:00 +0500').getTimezoneOffset() // -480 ``` 就如同上述所說，javaScript將每一個時間物件都轉成相應的本地時區時間，所以 `new Date()` 產生出來的時間物件，不管指定在哪個時區，沒有意外的都會是目前所在的 `東8區（GMT+8）` ，所以 `getTimezoneOffset()` 方法下輸出的結果皆為 `-480`。根據上面的定義，`getTimezoneOffset()` 輸出的是當地時間和UTC時間的差值，單位是分，所以可以理解為 `當地時間(GMT+8) - 480(分) = UTC時間`（意即東8區時間比UTC時間快8小時）。翻譯出來就是，我們所在的東8區(GMT+8)時間減去8小時，就是UTC時間。8 * 60 = 480(分)，所以 `getTimezoneOffset()` 輸出 `-480`。 ### 所以怎麼讓時間固定顯示為東8區的時間呢？ #### 本範例將本地時間設定為 `GMT+6（孟加拉標準時間）`，與東8區時間時差為2小時。 ```javascript= // 設定顯示的預設時間(一律固定顯示GMT+8時間) const d = new Date() // Mon Apr 27 2020 11:54:53 GMT+0600 (孟加拉標準時間) const offset = d.getTimezoneOffset() / 60 let dt = d.setHours(d.getHours() + (offset + 8)) // 當地時間 + offset = UTC時間，UTC時間再+8，就是東8區(GMT+8)時間 console.log(new Date(dt)) // Mon Apr 27 2020 13:54:53 GMT+0600 (孟加拉標準時間) ``` `#2` 取得本地時區時間為 `Mon Apr 27 2020 11:54:53 GMT+0600 (孟加拉標準時間)` `#6` 取得時差 `-480 / 60 = -8` `#7` 以本地時間計算東8區（GMT+8）時間，得到結果為 `Mon Apr 27 2020 13:54:53 GMT+0600 (孟加拉標準時間)` 這裡我們可以看到得到的結果是 `2020年4月27日的13點54分53秒`，確實是與本地時間相差2小時的東8區時間，但後面還是清楚的寫著這個時間所在的時區依然是 `GMT+6`，也證實原生的JS時間對象確實無法取得其他時區的時間，即使經過加加減減，得到的時間物件還是本地時間。 ::: danger 因此，嚴格來說，這種方式並不是取得某個時區的時間，只是利用本地時間進行的一個時差轉換，對 `new Date()` 來說，得到的時間依然是本地時區時間。 ::: ## Date.toJSON()的陷阱，難道只有我不知？ #### 將指定時區的時間搞定後，~~把後面的時區刪掉，我看不到~~，再來就是要處理傳給後端資料的日期格式，必須是 `yyyy-MM-dd HH:mm:ss`，因此我們必須將得到的時間物件進行格式轉換。網上針對日期轉換的方式不少，使用的方法都是用 `getYear()`, `getMonth()`, `getDate()`, `getHours()`…等方法取得對應的年、月、日、時、分、秒，再組合成自己想要的格式，網上很多，這邊就不重複。後來想想，乾脆直接用 `toJSON()` 將時間物件轉成字串的形式再進一步整理字串就好，當然也是因為 `toJSON()` 轉換出來的字串格式與目標相去不遠。雖然是歪招，但就當作是學習一下 `toJSON()` ，接下來看一下 `toJSON()` 在 [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) 的定義： > The toJSON() method returns a string representation of the Date object. 意思就是把時間物件轉成字串形式，另外，**IE8及之前的版本不支援這個方法**，請自行~~忽略~~注意。 #### 本地時區依然暫時設定在`GMT+6（孟加拉標準時間）` ```javascript= const d = new Date() // Mon Apr 26 2020 15:03:20 GMT+0600 (孟加拉標準時間) d.toJSON() // 2020-04-26T09:03:20.443Z d.replace('T', ' ').slice(0, 19) // 2020-04-26 09:03:20 ``` `toJSON()` 轉出來的字串是一個 `ISO8601` 的日期格式標準，其格式為 `'yyyy'-'MM'-'dd'T'HH':'mm':'ss'.'sss'Z` 接下來再對日期字串做一些處理，就可以順利得到一個格式為 `'yyyy'-'MM'-'dd' 'HH':'mm':'ss'` 的日期，問題順利解決了:tada:。 #### 等等！！！怎麼好像哪裡怪怪的？看上面的範例， `#3` 輸出的日期是 `2020-04-26 15:03:20`， `#5` 經過 `toJSON()` 字串化之後，輸出的日期變成 `2020-04-26 09:03:20`，這是怎麼回事？結果，我在 [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) 裡 Date.prototype.toJSON() 的 [簡體中文](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON) 頁面上找到一個範例，清楚的說明了發生什麼事（ `toJSON()` 的基本範例也說明了這件事，但我覺得這個範例更清楚）。 ```javascript= var date = new Date(); console.log(date); //Thu Nov 09 2017 18:54:04 GMT+0800 (中国标准时间) var jsonDate = (date).toJSON(); console.log(jsonDate); //"2017-11-09T10:51:11.395Z" var backToDate = new Date(jsonDate); console.log(backToDate); //Thu Nov 09 2017 18:54:04 GMT+0800 (中国标准时间) ``` `#1` 產生一個時間物件，時間為 `Thu Nov 09 2017 18:54:04 GMT+0800 (中国标准时间) ` `#4` 將此時間物件轉成字串後，得到是 `2017-11-09T10:51:11.395Z` #### 明明是當下的時間，為什麼會有 `#1` 和 `#4` 的差異。因為 `Date.toJSON()` 轉出來的字串 ==會把本地時間轉成UTC時間==。 `#7` 如果再將轉換出來的字串丟進 `new Date()` 裡，就可以再得到本地時間 或許這就是為什麼沒人用 `toJSON()` 做時間格式轉換的原因…（心虛） #### 那 `toJSON()` 可以用在哪呢？其實寫入db的時候可以考慮。將本地時間經過 `toJSON()` 字串化後存入db中，取出之後再用 `new Date()` 重新轉成當地時間顯示。 ```javascript= // 將時間轉換後存入db const localTime = new Date() // Tue Apr 28 2020 09:45:51 GMT+0600 (孟加拉標準時間) let dateitme = localtime.toJSON() // "2020-04-28T03:45:51.032Z" // 從db取出時間使用 let newLocalTime = new Date(datetime) // Tue Apr 28 2020 09:45:51 GMT+0600 (孟加拉標準時間) // 如果user在 GMT+8 時區，同樣db出來的時間會顯示為本地時區時間 // Tue Apr 28 2020 11:45:51 GMT+0800 (台北標準時間) ``` ### [同場加映] `Date.toJSON()` 轉出來時間格式中的"T"和"Z"是什麼意思？ "T"代表的是一個類似 ==連結的符號==，當日期和時間組合起來時，要在時間之前加一個大寫的"T"。 "Z"代表的其實是 ==零時區==，與UTC時間相同的情況下，可以在後面加一個大寫的"Z"，做為時間0偏移的代號。所以 `toJSON()` 轉出來的時間格式都帶有一個"Z"也表示這個時間就是代表`零時區` / `GMT+0` / `UTC時間`。既然 `ISO 8601` 格式下，"Z"代表UTC時間，那也意味著要表示其他時區可以把Z替換掉，例如表示GMT+8時區可以把"Z"代換為"+0800"，或"+08:00"，甚至可以直接寫"+08"。所以，在了解 `toJSON()` 轉換的日期字串格式後，前面那個 ==怎麼讓時間固定顯示為東8區的時間呢？== 的問題，就可用更為簡便的方法達到，不需要用到 `getTimezoneOffset()` 這個算時差的方法，來看以下的示範。 #### 本地時區依然暫時設定在 `GMT+6`，目標是固定顯示 `GMT+8` 時間 ```javascript= const d = new Date() // Tue Apr 28 2020 13:14:20 GMT+0600 (孟加拉標準時間) d.setHours(d.getHours() + 8) // Tue Apr 28 2020 21:14:20 GMT+0600 (孟加拉標準時間) let dt = d.toJSON().slice(0, 19) // 2020-04-28T15:14:20 ``` `#1` 用 `new Date()` 取得本地時間 `#4` 因為要取得東8區時間，所以先設定"小時"+8 `#7` 將 `+8小時` 後的時間用 `toJSON()` 轉成字串，依據之前介紹過 `toJSON()` 這個方法，這裡 `d.toJSON()` 轉出來的時間字串應該會長成這樣 `2020-04-28T15:14:20.sssZ`，==利用 `slice` 去掉後面的"Z"，這個時間就從原本代表的UTC時間變為本地時間== ，也代表著原本6小時的時差跟著消失，在前面 `+8` 的作用下，這個時間就變成與東8區時間一致了，是不是很神奇呢！ #### 但是因為Safari，我們的喜悅維持不了沒有太久上面那個方法是利用 `ISO 8601` 日期格式後面的"Z"來達到時區轉換的功能，偏偏 `Safari` 又不吃這套，所以上述方法在 `Safari` 以外的瀏覽器是可行的，但在 `Safari` 就… #### 我們直接來看實際的例子，本地時區回到原本我們所在的 `東8區（GMT+8）` 在 `Chrome` 上執行的結果（黑底） ![](https://i.imgur.com/QcpEjrA.jpg) 在 `Safari` 上執行的結果（白底） ![](https://i.imgur.com/iCpqHBV.jpg) #### 看兩個瀏覽器跑出來的結果， `Chrome` 上跟我們預期的一樣，大寫的"Z"代表的是UTC時間，所以轉成本地時間會是 `2020年1月1日 08:00:00`，將"Z"拿掉後，就沒有時差的問題，所以顯示為 `2020年1月1日 00:00:00`。 #### 但 `Safari` 上，似乎將沒有添加大寫"Z"的時間格式也直接視為UTC時間（`$1`, `$2`），如果要指定其他時區的寫法，是把原來"Z"的位置替換為 `+08:00` （`$3` ，此處以東8區為例）, 在時區與秒數間 ==不要加空白== ，而之前提過的其他時區格式，如： `+08`, `+0800` 則都不被 `Safari` 接受。 ## Safari上new Date()接受的日期字串格式 #### 繼續踩雷之旅… 由於這次的需求是輸出 `yyyy-MM-dd HH:mm:ss` 的時間格式，一開始為了完美起見（?!），就將所有取到的日期格式全都轉化成 `yyyy-MM-dd HH:mm:ss` ，結果就踩到了 `Safari` 在 `new Date()` 上鼎鼎有名的雷，也就是在 `Safari` 上， `new Date()` 接受的日期格式問題。 #### `Safari` 不接受時間格式為 `yyyy-MM-dd HH:mm:ss` 的字串，所以將這樣的時間字串用 `new Date()` 轉化為時間物件時會出錯。 ```javascript= new Date('2020-01-01 00:00:00') // Chrome // Wed Jan 01 2020 00:00:00 GMT+0800 (台北標準時間) new Date('2020-01-01 00:00:00') // Safari // Invalid Date <-- 出錯了 ``` 同樣的日期格式在Chrome上顯示結果正確，在Safari上就表示為無效日期，主要是因為 `Safari` 在要求 `new Date()` 做物件化時僅接受 ==RFC2822== 或 ==ISO 8601== 的時間格式。 ==ISO 8601== 我們前述提到過，就是 `toJSON()` 字串化轉出的那個格式 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'.'sss'Z ==RFC2822== 包含星期縮寫、三字母月份縮寫、數字日期、年份、時間和時區，格式範例如下 {Wed|星期縮寫} {Jan|三字母月份} {01|數字日期} {2020|年份} {00:00:00|時間} {GMT+0800|時區} `Safari` 只接受上述兩種時間格式，其他如 `Chrome` 、 `Firefox` 也同樣接受，所以為了兼容各家瀏覽器，在將日期字串物件化時可以使用上面兩種格式，以避免出錯。【參考資料】： - [時區與JS中的Date對象](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/644589/) - [在iOS Safari，JavaScript使用Date.parse或Date()转换日期返回NaN或Invalid Date](https://majing.io/posts/10000005481218) - [[JS] JavaScript Date Time Method 日期時間](https://pjchender.github.io/2017/12/27/js-javascript-date-time-method-%E6%97%A5%E6%9C%9F%E6%99%82%E9%96%93/) - [[Javascript] 世界時間表](https://medium.com/@moojing/javascript-locale-%E8%BD%89%E6%8F%9B%E6%99%82%E5%8D%80%E6%99%82%E9%96%93-1c15fb4f8cc8) ###### tags: `Vue開發筆記` `JavaScript` `Frontend` `vue`