Vanilla JavaScript：從日期中添加或減去天數（以及更多）

在最近的教學中，我們學習如何取得和設定任何 Date 物件的月、日、年和時間的值。獲取和設定這些日期值的能力在許多情況下都會派上用場。例如，您可以將特殊事件的日期儲存在變數中。您也可以使用這些方法來顯示目前日期和時間或對一段時間進行加減操作。

在本教程中，我們的重點將是學習如何從指定日期添加或減去一段時間，例如年、月、日、小時和分鐘。

如何為日期新增年、月和日

您可能還記得我們的其他教學課程中，JavaScript 具有setFullYear() 和getFullYear() 等方法，您可以使用它們來設定和取得特定日期的目前全年。您可以使用 setMonth() 和 getMonth() 等方法來設定和取得特定日期的當前月份。同樣，您可以使用 setDate() 和 getDate() 方法來設定和取得月份中的日期。

讓我們寫一個函數，為日期新增年份。它將接受您想要新增的日期和年數作為其參數並傳回新日期。

function addYearsToDate(date, years) {
   let new_date = new Date(date);
   new_date.setFullYear(new_date.getFullYear() + years);

   return new_date;
}

let today = new Date();
let five_years_later = addYearsToDate(today, 5);

// Outputs: Date Wed Jun 07 2023 19:04:56 GMT+0530 (India Standard Time)
console.log(today);

// Outputs: Date Wed Jun 07 2028 19:04:56 GMT+0530 (India Standard Time)
console.log(five_years_later);

這裡需要注意的重要一點是使用 Date() 建構函式建立一個新的 Date 對象，該物件被指派給變數 new_date。只需將 new_date 的值設為給定的 date 就會導致它們都指向同一個 Date 物件。

我們將使用相同的邏輯建立 addMonthsToDate() 函數，該函數接受日期和要新增的月數作為參數並傳回新日期。

 function addMonthsToDate(date, months) {
   let new_date = new Date(date);
   new_date.setMonth(new_date.getMonth() + months);

   return new_date;
}

let today = new Date();
let five_months_later = addMonthsToDate(today, 5);
let fifty_months_later = addMonthsToDate(today, 50);

// Outputs: Date Wed Jun 07 2023 19:15:04 GMT+0530 (India Standard Time)
console.log(today);

// Outputs: Date Tue Nov 07 2023 19:15:04 GMT+0530 (India Standard Time)
console.log(five_months_later);

// Outputs: Date Sat Aug 07 2027 19:15:04 GMT+0530 (India Standard Time)
console.log(fifty_months_later); 

正如我在其他教程中提到的，setMonth() 方法遇到的任何溢出都會導致給定日期添加適當的年數。這就是我們將日期加上 50 個月後所發生的情況。它使我們的約會日期增加了 4 年 2 個月。

現在，讓我們寫一個函數，將給定的天數加到我們指定的日期並傳回一個新日期：

function addDaysToDate(date, days) {
   let new_date = new Date(date);
   new_date.setDate(new_date.getDate() + days);

   return new_date;
}

let today = new Date();
let five_days_later = addDaysToDate(today, 5);
let thousand_days_later = addDaysToDate(today, 1000);

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)
console.log(today);

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)
console.log(five_days_later);

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)
console.log(thousand_days_later);

在我們的日期中添加任何時間段

我們定義了三個新函數，讓我們在 JavaScript 中為給定日期新增年、月或日。您可能想要在日期中添加一些其他時間段或持續時間，例如小時、分鐘或秒。為它們再寫三個函數是沒有意義的。

以下函數可用來將任意時間段新增至指定日期：

function addPeriodToDate(date, {years = 0, months = 0, days = 0, hours = 0, minutes = 0, seconds = 0}) {
   let new_date = new Date(date);
   
   new_date.setFullYear(new_date.getFullYear() + years);
   new_date.setMonth(new_date.getMonth() + months);
   new_date.setDate(new_date.getDate() + days);
   new_date.setHours(new_date.getHours() + hours);
   new_date.setMinutes(new_date.getMinutes() + minutes);
   new_date.setSeconds(new_date.getSeconds() + seconds);

   return new_date;
}


let today = new Date();
// Outputs: Date Wed Jun 07 2023 20:18:24 GMT+0530 (India Standard Time)
console.log(today);

let period = {years: 1, months: 2, days: 3};
let new_date = addPeriodToDate(today, period);
// Outputs: Date Sat Aug 10 2024 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {years: 4, months: 22};
new_date = addPeriodToDate(today, period);
// Outputs: Date Sat Apr 07 2029 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {days: 4, seconds: 22};
new_date = addPeriodToDate(today, period);
// Outputs: Date Sun Jun 11 2023 20:18:46 GMT+0530 (India Standard Time)
console.log(new_date);

如您所見，上述函數會為您處理任何溢出問題。也無需為所有時間單位提供值，因為預設情況下它們設定為 0。這意味著我們可以簡單地傳遞我們想要添加的天數和秒數，同時跳過所有其他值。

從我們的日期中減去任何時間段

我們不需要寫任何單獨的函數來從日期中減去任意時間段。您可以使用上一節的函數來減去年、月、日、小時、分鐘或秒。您需要做的就是提供該期間的負值。以下是一些範例：

period = {years: -1, months: -2, days: -3};
new_date = addPeriodToDate(today, period);

// Outputs: Date Mon Apr 04 2022 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {years: -4, months: -22};
new_date = addPeriodToDate(today, period);

// Outputs: Date Mon Aug 07 2017 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {days: -4, seconds: -22};
new_date = addPeriodToDate(today, period);

// Outputs: Date Sat Jun 03 2023 20:18:02 GMT+0530 (India Standard Time)
console.log(new_date); 

最終想法

在本教學中，我們學習了兩種不同的方法來解決 JavaScript 中日期加減年、月、日等問題。如果您只想添加或減去年份，您可以考慮創建一個像 addYearsToDate() 這樣的函數，專門簡單地執行此操作。另一種方法是建立一個更通用的 addPeriodToDate() 函數，它可以處理不同的時間單位。

以上是Vanilla JavaScript：從日期中添加或減去天數（以及更多）的詳細內容。更多資訊請關注PHP中文網其他相關文章！