[JS] 關於時間 new Date()

關於時間

在JavaScript中取得時間，可用new Date()，它是一個JS內建的一個Constructor，內容可以帶入參數來取得特定時間，不帶入參數則取得現在時間。

let d = new Date(); 
//取得現在時間 Tue Nov 24 2020 21:35:56 GMT+0800 (台北標準時間)
let d = new Date(milliseconds); 
// 可帶入timeStamp毫秒 (182401980000)
let d = new Date(dateString);
//可帶入時間字串 ("October 13, 1975 11:13:00")
let d = new Date(year, month, day, hours, minutes, seconds, milliseconds); 
// (79,5,24,11,33,0)
console.dir(d); //可用dir來查看date的方法 

//時間物件轉換成 Timestamp
d.getTime()  
d.valueOf() 
// 時間物件轉換成 Timestamp
Number(d)    
// 轉換成數值 TimeStamp
+d           
// 轉換成數值 TimeStamp

Date.now() //可取得當下的timestamp（毫秒）

取得日期時間中某個值 get

• 較需注意day和month回傳的是索引值，起始值0為週日和一月

const d = new Date(); //Tue Nov 24 2020 22:45:39 GMT+0800 (台北標準時間)
const date = d.getDate(); //24
const day = d.getDay();  //2 = Tue (Sunday is 0, Monday is 1, and so on.)
const month = d.getMonth();  //10 = Nov (0 = Jan ~ 11 = Dec)
const year = d.getFullYear();  //2020

const hour = d.getHours() //0-24
const minute = d.getMinutes() //0-59
const second = d.getSeconds() //0-59
const ms = d.getMilliseconds() //0-999

時間物件轉換字串

d.toString()  // Tue Nov 24 2020 22:45:39 GMT+0800 (台北標準時間)
d.toTimeString() // 22:45:39 GMT+0800 (台北標準時間)
d.toDateString() // Tue Nov 24 2020
d.toISOString()  // 轉換成 ISO 8601 格式的字串 2020-11-24T14:45:39.070Z

//依照JavaScript程式所執行的環境(瀏覽器)進行本地化
d.toLocaleString()     // 2020/11/24 下午22:45:39
d.toLocaleDateString()  // 2020/11/24
d.toLocaleTimeString() // 下午22:45:39

好用的 toLocaleString() 轉字串

toLocaleString()的參數中可以帶入語言和自定義模式

語言參數：
英文 ‘en-US’ // 12/1/2020, 11:57:04 PM
繁中 ‘zh-Hant’ // 2020/12/1 下午11:57:04
簡中 ‘zh-Hans’
日文 ‘ja-JP’ // 2020/12/1 23:57:04

自定義參數：
year: ‘numeric’, ‘2-digit’ 數字或是兩位數
month: ‘numeric’, ‘2-digit’, ‘narrow’, ‘short’, ‘long’. 數字,文字 是否縮寫
day: ‘numeric’, ‘2-digit’ 數字或是兩位數
weekday: ‘narrow’, ‘short’, ‘long’ 星期 文字是否縮寫等
hour: ‘numeric’, ‘2-digit’ 數字或是兩位數
minute: ‘numeric’, ‘2-digit’ 數字或是兩位數
second: ‘numeric’, ‘2-digit’ 數字或是兩位數

let myDate = new Date();
let options = { year: '2-digit', day: 'numeric',  weekday: 'long', month: 'short' };
// Wednesday, Dec 2, 20 沒有定義的時間部分則不會出現
myDate.toLocaleString('en-US', options);

• 另外 .toLocaleString() 也可以用在轉換數字格式，數字千位數加上逗號或是貨幣，百分比等。可參考下面這篇

• 使用 .toLocaleString() 輕鬆實現多國語言價格數字格式化

設定時間 set

JavaScript中的日期格式字串在不同瀏覽器的設定可能不同，可以查看下面這個格式相容表

• 時間日期字串格式相容表

• 通用的格式
  年/月/日
  2020/02/12
  2020/2/12
  2020/02/12 12:10
  2020/02/12 12:10:56

月/日/年
01/02/2020
1/2/2020
1/2/2020 12:10

• ISO 8601 格式
  YYYY-MM-DDTHH:mm:ss.sssZ
  2020-11-24T14:45:39.070Z

• T 用來分隔 年月日 和 時分秒毫秒

• Z 為UTC標準時間，其他時區的時間可以用+或-，再加上HH:mm作為時區的表達式

設定時間的方法

let myDate = new Date();
myDate.setFullYear(2010); //4位數字
myDate.setMonth(1); //索引值 0-11
myDate.setDate(7); //1-31 

myDate.setHours(11); 
myDate.setMinutes(20);
myDate.setSeconds(60);
myDate.setMilliseconds(150);

可設定時間增減，比較前後

const today = new Date(); //Wed Nov 25 2020 00:01:45 GMT+0800 (台北標準時間)
let myDate = new Date();
myDate.setDate( today.getDate() - 20); 
// 可設定 20天前 Thu Nov 05 2020 00:01:45 GMT+0800

if ( myDate > today ){
  console.log('今天在2020.11.05之前');
} else {
  console.log('今天在2020.11.05之後');
}

TimeZone 不同時區

• UTC 世界協調時間（Coordinated Universal Time）
• GTM 格林威治標準時間（Greenwich Mean Time）

GMT 和 UTC 在一般使用的情況下沒有差別，台灣的時區是 UTC+8 或是 GMT+8 都可以。

偏移(offset)

某地區與 UTC 偏移的時間，例如 +08:00，表示該地區的時間比 UTC 快了 8 小時。
.getTimezoneOffset() 以台灣為例，取得的值為-480，除以 60 正負相反後則為 +8。

const today = new Date(); 
today.getTimezoneOffset() // -480 GMT+0800 (台北標準時間)

處理時區的函式庫

• Moment Timezone
• moment.js - 關於時間的一切

月曆時鐘

之前在做JS30時鐘時，順便加上了月曆和數字鐘的功能

參考資料

• JavaScript Date（日期） 对象
• JavaScript Date 時間和日期
• 日期與時間
• 從零開始的學習 JS 生活-第二十一日
• [JS] JavaScript Date Time Method 日期時間
• 前端工程研究：關於 JavaScript 中 Date 型別的常見地雷與建議作法