J 筆記 - Date 時間的運算

J 筆記 - Date 時間的運算

早上一進公司除了看到要來面試的下一屆學弟，還有機器服務又壞掉之外，被強大的好朋友問了一個考驗我的問題～剛好要用到 JS 計算時間，所以有了這篇的誕生…

先來看一下 MDN 的解釋

JavaScript Date objects represent a single moment in time in a platform-independent format. Date objects contain a Number that represents milliseconds since 1 January 1970 UTC.

語法：

1
2
3
4
new Date();
new Date(value);
new Date(dateString);
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);

好了，我想你大概懂的（誤

Date 物件 - 多個參數指定年、月、日、時、分、秒、毫秒

用法：

1
2
var birthday = new Date(1996, 01, 15);
// 1996-02-14T16:00:00.000Z

有沒有發現一件事情，明明指定的時間是 (1996, 01, 15) 但是最後印出來的時間卻跑出了我的生日（欸？

其實 JS 不管怎麼輸入，都會是這樣子的（大誤）

JavaScript 表達月份 (month) 是從 0 到 11，0 是一月；11 是十二月。且Date 物件參數的日期，預設的時區 (time zone) 是本地時區 (local time)，也就是你瀏覽器作業系統設定的時區。

日期時間比較 (Compare Dates)

可以用 >, <, <=, >=, <== 或 >== 運算子來比較兩個 Date 物件的時間前後關係：

1
2
3
4
5
6
7
8
var today = new Date();
var someday = new Date(2022, 3, 3);

if (someday > today) {
  alert('Today is before 2022/3/3.');
} else {
  alert('Today is after 2022/3/3.');
}

但如果你要比較兩個日期是否相等 - 運算子 ==, !=, === 或 !==，你沒辦法直接比較，而是要先將 Date 物件用 date.getTime() 轉換為數值型態才能比較：

1
2
3
4
5
var d1 = new Date(2020, 3, 3);
var d2 = new Date(2020, 3, 3);

var same = d1.getTime() === d2.getTime();    // true
var notSame = d1.getTime() !== d2.getTime(); // true

大概簡述是這樣子，如果真正要用到什麼其他的方法，說實在的還是去查文件是比較快的選擇，所以我的同學到底問了我什麼呢？

JavaScript：將指定日期加上 X 天

首先，需要先新增一個時間並指定變數

1
var dateTime = new Date();

加天數

1
2
dateTime = dateTime.setDate(dateTime.getDate()+1);
dateTime = new Date(dateTime);

有人可能會想到用 getDate() 這樣子抓天數後 或許會超過 31 或者是 小於等於 0，不過因為前面有 setDate() 所以會幫你轉換：

1
2
3
4
5
6
7
8
9
10
11
> var dateTime = new Date();
undefined
> dateTime = dateTime.setDate(dateTime.getDate()+1);
1583292207881
> dateTime = new Date(dateTime);
2020-03-04T03:23:27.881Z

> dateTime = dateTime.setDate(dateTime.getDate()-4);
1582946607881
> dateTime = new Date(dateTime);
2020-02-29T03:23:27.881Z

後來看到桑莫大神寫的

由於「this」即是指定的時間物件，因此就使用 this 取得「日」再加 -3 天，最後將這個更新後的日期設定給這個時間物件即可。

1
2
3
4
Date.prototype.addDays = function(days) {
  this.setDate(this.getDate() + days);
  return this;
}

加減天數

1
2
3
4
var today = new Date();

today // 2020-03-03T03:38:34.674Z
today.addDays(-3) // 2020-02-29T03:38:34.674Z

日期的轉換

  • Date.prototype.toLocaleString() - 日期與時間

    1
    2
    > today.toLocaleString()
    '2020-3-3 11:38:34'

  • Date.prototype.toLocaleDateString() - 日期

    1
    2
    > today.toLocaleDateString()  
    '2020-3-3'

  • Date.prototype.toLocaleTimeString() - 時間

    1
    2
    > today.toLocaleTimeString()
    '11:38:34'

    取得其他國家的日期 & 時間

dateObj.toLocaleString([locales[, options]])

1
2
3
4
5
6
7
8
> today.toLocaleString('zh-TW'); //台灣
'2020-3-3 11:38:34'
> today.toLocaleString('en-GB'); //英國
'3/3/2020, 11:38:34 AM'
> today.toLocaleString('ko-KR'); //韓國
'2020-3-3 11:38:34'
> today.toLocaleString('en-AU'); //澳洲
'3/3/2020, 11:38:34 AM'

options 就查一查惹ouo

參考資料