JS Day 41: Date() 型別

Date 物件

建立 Date 物件的 4 種方法

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

1. new Date()

var current = new Date();
// Thu Aug 06 2020 20:02:42 GMT+0800 (Taipei Standard Time)

var current = Date();
// "Thu Aug 06 2020 20:02:42 GMT+0800 (Taipei Standard Time)"

回傳當下日期時間、時間。如果少了 new 則是會回傳一個當下時間的字串。

2. new Date(value)

# 取得現在時間（毫秒）
const dateNow = Date.now(); // 1596715024359
const getTime = new Date().getTime(); // 1596715024359
const getValue = new Date().valueOf(); // 1596715024359

new Date(dateNow); // Thu Aug 06 2020 19:57:04 GMT+0800 (Taipei Standard Time)
new Date(getTime); // Thu Aug 06 2020 19:57:04 GMT+0800 (Taipei Standard Time)
new Date(getValue);

new Date(1596715024359);
// Thu Aug 06 2020 19:57:04 GMT+0800 (Taipei Standard Time)
// 只要傳入參數是 timestamp，new Date() 會轉換成我們可以字串，我們可閱讀的格式

Date.now() 回傳對應於當下時間的數值 - 1970/01/01 00:00:00 (UTC) 到當下的毫秒數。

new Date().getTime() 取得格林威治標準時間 1970/01/01 00:00:00 (UTC) 到現在的時間(毫秒)。

new Date().valueOf() 取得 Date 的原始值。

3. new Date(dataString)

var today = new Date('August 06, 2020 20:42:15');
// Thu Aug 06 2020 20:42:15 GMT+0800 (Taipei Standard Time)
var today = new Date('2020-08-06T20:42:15');
// Thu Aug 06 2020 20:42:15 GMT+0800 (Taipei Standard Time)

var today = new Date(2020, 08, 06);
// Sun Sep 06 2020 00:00:00 GMT+0800 (Taipei Standard Time)
// 雖然 dateString 是 2002, 08, 06 (星期四)，但回傳的卻是 星期日 九月六日 🤔
// 啊，原來忘記用 quotation 包住。誤會一場。

var today = new Date('2020, 08, 06');
// Thu Aug 06 2020 00:00:00 GMT+0800 (Taipei Standard Time)

瀏覽器間解析日期字串的方式有所差異，MDN 不建議用此方法建立日期物件。

new Date('2020-08-06');
// Thu Aug 06 2020 08:00:00 GMT+0800 (Taipei Standard Time)

上方範例回傳08:00:00 ，Chrome 瀏覽器會解讀成 格林威治標準時間(GMT) 的日期格式，而本地時間是 GMT+8 所以時間顯示會再加上 8 小時。

下方範例回傳 00:00:00 ，顯示為本地時間，上下兩者相差了 8 小時。如果瀏覽器位於不同時區打開，顯示的本地時間不一定相同。

new Date('2020-8-06');
// Thu Aug 06 2020 00:00:00 GMT+0800 (Taipei Standard Time)

new Date('2020/08/06');
// Thu Aug 06 2020 00:00:00 GMT+0800 (Taipei Standard Time)

new Date('2020/8/06');
// Thu Aug 06 2020 00:00:00 GMT+0800 (Taipei Standard Time)

new Date('06 August, 2020');
// Thu Aug 06 2020 00:00:00 GMT+0800 (Taipei Standard Time)

4. new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);

這邊的參數傳入不是字串，不需要用 quotation ，但是傳入的數字有其規範。

year

表示年份的整數。當數值落在 0 到 99 之間，表示 1900 到 1999 之間的年份。參考下面的範例.

month

表示月份的整數。由 0 開始（一月）到 11 （十二月）。

day

選用。表示月份中第幾天的整數值。

hour

選用。表示小時數的整數值。

minute

選用。表示分鐘數的整數值。

second

選用。表示秒數的整數值。

millisecond

選用。表示毫秒數的整數值。

– 擷取自 MDN web doc

var today = new Date(2020, 08, 06);
// Sun Sep 06 2020 00:00:00 GMT+0800 (Taipei Standard Time)

// month 的起始值是 0(一月)，08 則是九月，所以整個回傳的日期是 九月六日，二零二零年。

// new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
// 把上面這個方法看成下方這樣對我來說比較好理解
// new Date(year, month, day, hour, minutes, seconds, milliseconds)

new Date(98);
// Thu Jan 01 1970 08:00:00 GMT+0800 (Taipei Standard Time)
new Date(2020); 
// Thu Jan 01 1970 08:00:02 GMT+0800 (Taipei Standard Time)

這部分有點不解！傳入一個參數回傳都是從 1970 開始。

new Date(2020, 07); // month 是從 0 開始, 07 等於八月
// Sat Aug 01 2020 00:00:00 GMT+0800 (Taipei Standard Time)
// 參數只有年、月，所以日期會被設為 1

new Date(2020, 07, 06);
// Thu Aug 06 2020 00:00:00 GMT+0800 (Taipei Standard Time)

規則：

• 如果沒有傳入任務參數到建構子，會依系統設定建立出代表當下時間的 Date 物件。
• 如果傳入至少兩個參數，缺少日期的話會設為 1，其它參數則會被設定為 0。

日期字串格式規範

ECMA-262 Edition 5.1 對 Date Time String Format 做出個規範：

// ISO 8601 Extended Format
YYYY-MM-DDTHH:mm:ss.SSSZ

// 即使只有年份也可以
new Date('2020');
// Wed Jan 01 2020 08:00:00 GMT+0800 (Taipei Standard Time)
new Date('2020-08');
// Sat Aug 01 2020 08:00:00 GMT+0800 (Taipei Standard Time)
new Date('2020-08-06');
// Thu Aug 06 2020 08:00:00 GMT+0800 (Taipei Standard Time)

如果要傳入時間(時：分)，日期(DD) 的部分則不能省略，秒(ss) 則可以省略。。

YYYY-MM-DDTHH:mm:ss.SSSZ 日期跟時間中間會用英文字母 T 來做分隔。

YYYY-MM-DDTHH:mm:ss.SSSZ 最後面的 Z 代表時區，它可以被省略。

new Date('2020-08-06T20:55');
// Thu Aug 06 2020 20:55:00 GMT+0800 (Taipei Standard Time)
new Date('2020-08-06T20:55:33');
// Thu Aug 06 2020 20:55:33 GMT+0800 (Taipei Standard Time)

Reference:
Date - MDN web docs
前端工程研究：關於 JavaScript 中 Date 型別的常見地雷與建議作法 — The Will Will Web