菜蟲學習筆記：Javascript 時間格式

發表於 | 更新於 | In | 0 comments |
文章字數 : 1.1k | 所需閱讀時間 ≈ 4 分鐘

記錄一個看似簡單，但其實有點小複雜的東西(?)
─ Javascript的時間格式

JavaScript 沒有日期資料型態，但是它有提供 Date() 物件，使用內件的日期物件與方法、可以取得與操作日期時間。

使用方法

在建立 Date 物件的時候，有4種用法：
1.new Date()：直接取得系統現在時間
2.new Date(value)：自世界標準時間（UTC） 1970 年 1 月 1 日 00:00:00 取得毫秒數，且這個字串應該要能被 Date.parse() 方法解析。

  • Date.now()
  • new Date().getTime()
  • 此兩種也為從世界標準時間（UTC） 1970 年 1 月 1 日 00:00:00 取得毫秒數，但Date.now()效能較佳。

3.new Date(dateString)：用法為→new Date(‘2020-05-01’)，參考下方日期格式
4.new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]])

方法

  • Date.now()
    回傳對應於當下時間的數值 - 1970/01/01 00:00:00 (UTC) 到當下的毫秒數。
  • Date.parse()
    解析字串所表示的時間，回傳由 1970/01/01 00:00:00 (UTC) 到該時間的毫秒數值。
    ※ 由於瀏覽器之間的不同與差異，強烈不建議使用 Date.parse 。

實例

舉出三種目前可能會應用到的例子

1.取得目前系統時間

1
var today = new Date();

2.取得特定的時間

1
2
var days = new Date('May 1, 2020 00:00:00');
var days = new Date('May 1, 2020 00:00:00').getTime();

getTime()：返回一個從世界標準時間（UTC） 1970 年 1 月 1 日 00:00:00，距離該日期所累積的毫秒數，且能將一個日期時間賦值給另一個Date對象。
Ex：下圖為，從目前時間(Mon Apr 27 2020 22:01:46)至距離1970年1月1日所累積的毫秒數，可以清楚的發現，累積的毫秒數字會越來越多。

這裡分成幾種格式：

從圖片內可以看到，這幾種格式在Chrome都能顯示出來，但是！但是！但是！在IE或是Firefox等其他瀏覽器就會有顯示不出來的可能。
所以，有一種格式叫：ISO 8601 Extended Format，格式如下：

1
2
YYYY-MM-DDTHH:mm:ss.sssZ
2020-05-01T12:30:30.000Z // 實際範例

這種標準的日期格式，也可以允許只有日期的部分，而且還不一定要寫完整的日期格式，只有年份也可以當成合法有效的日期格式。

例如，以下日期格式都是有效且跨瀏覽器、跨平台的日期字串格式：

1
2
3
new Date('2020');
new Date('2020-05');
new Date('2020-05-01');

至於時間的部分，日期的部分不能省略，而日期與時間的部分會固定用一個 T 來分隔。時間的部分，從「秒」開始也是可以省略的，不一定要完整的時間格式，且時間格式最後的 Z 代表的是 Time zone 的意思，這個字元也是可以省略的。

以下時間格式也都是合法的，例如：

1
2
3
THH:mm
THH:mm:ss
THH:mm:ss.sss

如果把日期與時間組合在一起，就有非常多種可能的變化了，這些都是能執行的日期格式字串：

1
2
3
4
new Date('2020T12:30');
new Date('2020-05T12:30:00');
new Date('2020-05-01T12:30:00');
new Date('2020-05T12:30:00.000');

3.將毫秒轉換為時間格式

若要將取得的毫秒轉換成相對應的時間格式，使用的方式如下：

1
2
3
4
5
6
7
8
9
var date = new Date();
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds(); 
console.log(Y+M+D+h+m+s); 
// 輸出結果：2020-04-27 22:6:16

這邊分鐘和秒數轉換結果1~9前面不會補0，所以這邊要再加一些程式碼：

1
2
3
 function pad(n) {
    return (n < 10 ? '0' : '') + n;
};

結果如下：

  • parseInt() 能將輸入的字串轉成整數。

  • setInterval() 是固定延遲了某段時間後，才去執行對應的程式碼，然後「不斷循環」。

延伸閱讀：談談 JavaScript 的 setTimeout 與 setInterval

Date 物件提供的方法(Methods)

方法 用途
getFullYear() 取得年份 (yyyy)
getMonth() 取得月份 (MM)
getDate() 取得日期 (DD)
getHours() 取得小時 (HH)
getMinutes() 取得分鐘 (MM)
getSeconds() 取得秒數 (SS)
getMilliseconds() 取得毫秒數 (SSS)
getDay() 取得星期幾
getTime() 從 1970-01-01 00:00:00 UTC 累計的毫秒數

參考：Date - Javascript | MDN