一種用來處理特定的日期時間會用到的特殊物件，可以用來印出時間，修改時間或是設定時間。

要注意的一點是，JavaScript當中，使用Date就會一次把日期跟跟時間創造出來，不能只單獨創造出今天日期。

最簡單的使用方式就是直接new Date()就能直接創造出當前的時間。

1
2
const time = new Date();
console.log(time); // 印出當前時間

隨時放入參數的不同可以印出各種不同狀態的時間。
new Date()是一種，另外還有三種創建時可以創建時的方式:

1
2
3
const time = new Date(milliseconds); //第二種
const time = new Date(dateString); //第三種
const time = new Date(year, month, day, hours, minutes, seconds, milliseconds); //第四種

獲取時間中某個值

有一些Date內建的方法，可以幫助獲取時間的某個值，可以分成以下幾種。

現在時間是 2022 年 9 月 25 日(星期日），使用此時此刻來做舉例，先從取全部開始。

1
2
3
const time = new Date();

console.log(time); // 2022-09-25T02:40:23.378Z

getFullYear():
可以獲取年份，四位數的那種。

1
2
3
4
const time = new Date();
const year = time.getFullYear();

console.log(year); // 2022

getMonth():
可以獲取月份，範圍從 1~11(沒有 12)。
實際是 9 月，但是顯示抓取會是 8 月，這點要特別注意。

1
2
3
4
const time = new Date();
const month = time.getMonth();

console.log(month); // 8

getDay():
可以獲取目前是為一週裡面的第幾天，從星期日開始，所以 0 是星期日，直到 6 是星期六。

1
2
3
4
const time = new Date();
const day = time.getDay();

console.log(day); //0

getDate():
可以獲取目前是一月裡面的第幾天，從 1 到 31。

1
2
3
4
const time = new Date();
const date = time.getDate();

console.log(date); //25

比較不直覺的有getMonth()跟getDay()，它們回傳出來的值不能直接是真正的月份跟星期，還需要再透過其他方式來轉換，不過仔細想想也蠻合理，因為月份跟星期在不同地區可能都有不同的規劃，像是說台灣會叫做「星期」其他地方不一定這樣叫，所以Date在這一塊只給一個回傳值，會從 0 開始應該是為了搭配陣列的方式，所以拿到這個回傳值，再搭配自己設定好名字的陣列，就可以取得真正的月份跟星期的值，比如說 1 月=>array[0]=1 月。

還有一些要取得更小單位的時間值，像是幾時幾分幾秒，都有相對應的方法，跟上面使用方法都大同小異，如下：

  • getHours()
  • getMinutes()
  • getSeconds()
  • getMilliseconds()

設定時間

除了獲取時間訊息的「get」之外，有也相對應的「set」，專門用來設定某種時間的格式，例如getDate()是獲取回傳的是第幾天，setDate()就是設定目前時間是第幾天，常用的語法如下：

  • setFullYear(year, [month], [date])
  • setMonth(month, [date])
  • setDate(date)
  • setHours(hour, [min], [sec], [ms])
  • setMinutes(min, [sec], [ms])
  • setSeconds(sec, [ms])
  • setMilliseconds(ms)
  • setTime(milliseconds)

設定之外的東西就會維持原來的設定，舉個例子，一樣先用new Date()創造出當前的時間，再用set修改：

1
2
3
const time = new Date();
time.setFullYear(2000);
console.log(time); //從2022變成2000

其他方式就大同小異，想改什麼就直接改。

本地化

本地化的意思，是根據本地的文化或是語言來顯示印出的東西。
必要性可以從完全沒經過本地化的案例來看，一樣使用new Date()就能直接創造出當前的時間：

1
2
const time = new Date();
console.log(time); // 2022-09-25T03:17:31.197Z

直接出來的東西是 2022-09-25T03:17:31.197Z，而使用本地化的方式像是console.log(date.toLocaleString()) 就會是：2022/9/25 上午11:18:54。

看起來會更好辨認，日期，時間，貨幣都可以使用這種本地化的方式，但今天主要聚焦在Date這一塊。

1
2
3
4
5
const date = new Date();

console.log(date.toLocaleString()); // 2022/9/25 上午11:22:28
console.log(date.toLocaleDateString()); // 2022/9/25
console.log(date.toLocaleTimeString()); //上午11:22:28

Autocorrection

當不小心把時間使用set的方式設定超過範圍，Date就會自動進行一個Autocorrection的動作，也就是自動校準，這非常實用。

也不會需要主動去使用，因為這是一個Date的特性。

比如說：

1
2
let time = new Date(2022, 0, 50); // 原本 2022 01 50
console.log(time); // ?

一個月不可能有那麼多天，就會把剩餘超過的Autocorrection到下一個月，所以最後出來的結果會是2022-02-18。

總結

在JavaScript中要處理到時間跟日期就會碰到Date，像是可能網頁上需要做一個時鐘，或是倒數計時器，使用方法上看起來都蠻直覺，但還有很多小地方需要注意，今天其實還有蠻多Date部分還沒講到，像是Date.now()、 Date.parse，或是一堆還沒講到方法，有興趣可以再去看 MDN 的文檔，連結有放最下面。

最後有一個蠻有趣的現象，就是可以試試看new Date() + 1跟new Date() - 1這兩種方式個別印出來的結果，我個人是一頭霧水，知道原因的高手可以在下方留言告訴我，那我們明天見。

1
2
console.log(new Date() + 1); // ??
console.log(new Date() - 1); // ??

reference

[1] MDN - Date
[2] Date and time
[3] JavaScript Date Objects
[4] 日期與時間