iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0

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

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

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

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

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

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日(星期日),使用此時此刻來做舉例,先從取全部開始。

const time = new Date();

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

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

const time = new Date();
const year = time.getFullYear();

console.log(year); // 2022

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

const time = new Date();
const month = time.getMonth();

console.log(month); // 8

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

const time = new Date();
const day = time.getDay();

console.log(day); //0

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

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修改:

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

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

本地化

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

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這一塊。

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的特性。

比如說:

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() + 1new Date() - 1這兩種方式個別印出來的結果,我個人是一頭霧水,知道原因的高手可以在下方留言告訴我,那我們明天見。

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

reference

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


上一篇
JS之路 Day09 - What is Map ?
下一篇
JS之路 Day11 - Callback Funtion(回呼函式)
系列文
JavaScript 之路,往前邁進吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
superyngo
iT邦新手 5 級 ‧ 2023-06-12 09:05:05

+1 是string
-1 是number

Vic iT邦新手 3 級 ‧ 2023-07-23 23:18:57 檢舉

對的,給你一個讚

我要留言

立即登入留言