整理 js 日期物件的詳細功能,使用 js 日期物件獲取具體日期、昨天、今天、明天、每月天數、時間戳等,以及常用的日期時間處理方法

蔣偉平 發表於 2022-12-04

在 javascript 中內建了一個 Date 物件,可用於實現一些日期和時間的操作。

本文整理 js 日期物件的詳細功能,使用 js 日期物件獲取具體日期、昨天、今天、明天、每月天數、時間戳等,以及常用的日期時間處理方法。

在前端可以透過new Date()生成Date物件,如果沒有傳引數時,即獲取本地當前日期和時間。不過這時候顯示的內容並不是我們常見的日期格式,而是一個當前時區時間的描述文字,以下程式碼顯示的效果如圖所示:

  const date = new Date();
  console.log(date);

整理 js 日期物件的詳細功能,使用 js 日期物件獲取具體日期、昨天、今天、明天、每月天數、時間戳等,以及常用的日期時間處理方法

 

 

 

如果希望顯示的內容格式化為常見的日期格式,最簡單的辦法是呼叫 toLocaleString() 方法,如下所示:

  const date = new Date();
  console.log(date.toLocaleString());

整理 js 日期物件的詳細功能,使用 js 日期物件獲取具體日期、昨天、今天、明天、每月天數、時間戳等,以及常用的日期時間處理方法

 

 

new Date()可接受三種型別的引數

第一種是隻傳入一個number型別的引數,一般是時間戳的毫秒數,返回引數數字所處的時間,如下所示:

  const date = new Date(946684800000);
  console.log(date.toLocaleString());

第二種也只傳入一個引數,引數型別是string,不過需要是正確的格式,如 "2010-10-10 10:10:10",返回對應的時間:

  const date = new Date("2010-10-10 10:10:10");
  console.log(date.toLocaleString());
第三種是可以傳入多個引數,總共可傳7個 number 型別的引數,分別是年,月(0~11),日,小時,分鐘,秒鐘,毫秒。這種方式的每一個引數值沒有規定範圍,Date物件會自動幫我們算出對應的時間。 比如我們傳入的月是12,那麼生成的日期會自動修正為第二年的1月。如下所示:
  const date = new Date(2022,12,1,10,10,10,999);
  console.log(date.toLocaleString());
 
Date物件還提供了很多方法,根據需要實現的功能,在下面列出一些常用的方法。
一、獲取時間戳
時間戳是指格林威治時間1970年01月01日00時00分00秒(北京時間1970年01月01日08時00分00秒)起到現在的總毫秒數。獲取時間戳的方法挺多,常見的有如下幾種:
最常用的 getTime 方法
  const date = new Date();
  console.log(date.getTime());
還有一種 Date.now() 方法,這是ECMAScript 5.1版本給Date物件增加的靜態方法。Date.now的速度比getTime快一倍以上,應該是獲取時間戳最快的方法。
console.log(Date.now());
valueOf方法是返回物件的原始值,在Date物件上也是返回時間戳,一般很少有人使用這個方法獲取時間戳
  const date = new Date();
  console.log(date.valueOf());
最簡單粗暴的方法,是直接把建立的Date物件轉換為數字,+new Date(),不過效能更差一點
  const date = new Date();
  console.log(+date);

 

二、獲取常用時間資料

Date物件可以分別獲取到本地年、月、日、小時、分鐘、秒鐘、毫秒等資料,方法如下:
    date.getFullYear():獲取年
    date.getMonth():獲取月
    date.getDate():獲取日
    date.getDay():獲取一週的某一天(0~6)
    date.getHours():獲取小時
    date.getMinutes():獲取分鐘
    date.getSeconds():獲取秒
    date.getMilliseconds():獲取毫秒
使用這些方法,可以靈活的顯示日期時間格式,以下是一個格式化當前日期時間的函式:
  function formatDate(){
    // 建立日期物件
    const date = new Date();
    // 獲取各日期/時間資料
    let year = date.getFullYear();
    let month = date.getMonth();
    let DD = date.getDate();
    let hour = date.getHours();
    let minute = date.getMinutes();
    let second = date.getSeconds();
    let day = date.getDay();
    // 拼接日期時間為字串
    let time = year + '年' + month + '月' + DD + '日 ' + hour + ':' + minute + ':' + second + ' 星期' + ['日','一','二','三','四','五','六',][day];
    return time
  }
  console.log(formatDate())

整理 js 日期物件的詳細功能,使用 js 日期物件獲取具體日期、昨天、今天、明天、每月天數、時間戳等,以及常用的日期時間處理方法

 

 三、設定日期時間

除了在建立Date物件時,透過引數獲取到對應時間的Date物件,也可以設定Date物件的時間。
    date.setFullYear():設定年,setFullYear()可以傳3個引數,其中第2個和第3個是可選的,分別是要設定的年,月,日;
    date.setFullYear():設定月,預期值是 0~11,-1 將設定為上一年的最後一個月、12 將設定為明年的第一個月。setMonth()可以傳2個引數,其中第2個是可選的,分別是要設定的月,日;
    date.setDate():設定日,預期值是 1~31;0 會設定為上個月的最後一天、-1 將設定為上個月的最後一天的前一天、如果一個月有 31 天:32 將導致下個月的第一天;
    date.setHours():設定小時(0~23),setHours()可以傳4個引數,其中第2、3、4個是可選的,分別是要設定的時,分,秒,毫秒;
    date.setMinutes():設定分鐘(0~59),setMinutes()可以傳3個引數,其中第2個和第3個是可選的,分別是要設定的分,秒,毫秒
    date.setSeconds():設定秒(0~59),setSeconds()可以傳2個引數,其中第2個是可選的,分別是要設定的秒,毫秒
    date.setMilliseconds():設定毫秒(0~59)
使用設定日期方法,可以實現一些獲取指定日期時間的功能。
 
如果要獲取2020年的當前時間,就可以使用 setFullYear() 方法輕鬆實現,如下所示:
  const date = new Date();
  date.setFullYear(2020)
  console.log(date.toLocaleString());

 

又如獲取今年二月的最後一天(即當月的天數):
  const date = new Date();
  date.setMonth(2,0);
  console.log(date.getDate());

 

再或者獲取昨天和明天的日期:
  const date = new Date();
  date.setDate(date.getDate() + 1);
  console.log('明天是',date.toLocaleString());
  date.setDate(date.getDate() - 2);
  console.log('昨天是',date.toLocaleString());

 

在實際工作中,會經常需要獲取到特定的日期。可以封裝一個函式,用於獲取當前日期的前n天或後n天
  function getSpecificDate(day){
    //計算出要加/減的毫秒數
    var num = 1000*60*60*24*day;
    var newDate = new Date(Date.now()+num);
    return newDate;
  }

  console.log('明天是',getSpecificDate(1).toLocaleString());
  console.log('後天是',getSpecificDate(2).toLocaleString());
  console.log('昨天是',getSpecificDate(-1).toLocaleString());

整理 js 日期物件的詳細功能,使用 js 日期物件獲取具體日期、昨天、今天、明天、每月天數、時間戳等,以及常用的日期時間處理方法

 

 還有一種很方便的,給Date的原型方法中加入format方法,這樣在Date物件上可以直接使用format方法格式化所需要的日期。如下所示:

  Date.prototype.format = function(format){
    var o =  {
    "M+" : this.getMonth()+1, //month
    "d+" : this.getDate(), //day
    "h+" : this.getHours(), //hour
    "m+" : this.getMinutes(), //minute
    "s+" : this.getSeconds(), //second
    "q+" : Math.floor((this.getMonth()+3)/3), //quarter
    "S" : this.getMilliseconds() //millisecond
    };
    if(/(y+)/.test(format)){
      format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    }
    for(var k in o)  {
      if(new RegExp("("+ k +")").test(format)){
      format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
      }
    }
    return format;
  };
  console.log(new Date().format('yyyy-MM-dd hh:mm:ss'))

 

注: 在國內一般的專案都只需要獲取本地時間就足夠了,如果涉及到國外的專案,就可能需要獲取世界標準時間。獲取世界標準時間的方法就是在獲取本地時間的方法中加上UTC,如 getUTCDate