JavaScript Vanila: Tambah atau tolak hari dari tarikh (dan banyak lagi)-WordTekan-php.cn

Vanilla JavaScript：从日期中添加或减去天数（以及更多）

Dalam tutorial baru-baru ini, kami belajar cara mendapatkan dan menetapkan nilai bulan, hari, tahun dan masa untuk sebarang objek Tarikh. Keupayaan untuk mendapatkan dan menetapkan nilai tarikh ini berguna dalam banyak situasi. Sebagai contoh, anda boleh menyimpan tarikh acara khas dalam pembolehubah. Anda juga boleh menggunakan kaedah ini untuk memaparkan tarikh dan masa semasa atau untuk menambah atau menolak daripada tempoh masa. 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);

Salin selepas log masuk

这里需要注意的重要一点是使用 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);

Salin selepas log masuk

正如我在其他教程中提到的，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);

Salin selepas log masuk

在我们的日期中添加任何时间段

我们定义了三个新函数，允许我们在 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);

Salin selepas log masuk

如您所见，上述函数会为您处理任何溢出问题。也无需为所有时间单位提供值，因为默认情况下它们设置为 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);

Salin selepas log masuk

最终想法

在本教程中，我们学习了两种不同的方法来解决 JavaScript 中日期加减年、月、日等问题。如果您只想添加或减去年份，您可以考虑创建一个像 addYearsToDate() 这样的函数，专门简单地执行此操作。另一种方法是创建一个更通用的 addPeriodToDate()

Dalam tutorial ini, tumpuan kami adalah untuk mempelajari cara menambah atau menolak tempoh masa, seperti tahun, bulan, hari, jam dan minit, dari tarikh yang ditentukan. 🎜

Cara menambah tahun, bulan dan hari pada tarikh

🎜Anda mungkin ingat daripada tutorial kami yang lain bahawa JavaScript mempunyai kaedah seperti setFullYear() dan getFullYear() yang boleh anda gunakan untuk menetapkan dan mendapatkan tahun penuh semasa untuk sesuatu tarikh. Anda boleh menggunakan kaedah seperti setMonth() dan getMonth() untuk menetapkan dan mendapatkan bulan semasa untuk tarikh tertentu. Begitu juga, anda boleh menggunakan kaedah setDate() dan getDate() untuk menetapkan dan mendapatkan hari dalam bulan tersebut. 🎜 🎜Mari kita tulis fungsi yang menambah tahun pada tarikh. Ia akan menerima tarikh dan tahun yang anda mahu tambah sebagai parameternya dan mengembalikan tarikh baharu. 🎜 rrreee 🎜Perkara penting yang perlu diperhatikan di sini ialah menggunakan pembina Date() mencipta objek Date baharu yang diberikan kepada pembolehubah new_date. Hanya menetapkan nilai new_date kepada date yang diberikan akan menyebabkan kedua-duanya menghala ke objek Date yang sama. 🎜 🎜Kami akan menggunakan logik yang sama untuk mencipta fungsi addMonthsToDate() yang menerima tarikh dan bilangan bulan untuk ditambah sebagai parameter dan mengembalikan tarikh baharu. 🎜 rrreee 🎜Seperti yang saya nyatakan dalam tutorial lain, sebarang limpahan yang dihadapi oleh kaedah setMonth() akan menyebabkan bilangan tahun yang sesuai ditambah pada tarikh yang diberikan. Inilah yang berlaku apabila kita menambah 50 bulan pada tarikh tersebut. Ia menambah 4 tahun dan 2 bulan untuk tarikh temu janji kami. 🎜 🎜Sekarang, mari tulis fungsi yang menambah bilangan hari yang diberikan pada tarikh yang ditentukan dan mengembalikan tarikh baharu: 🎜 rrreee

Menambah sebarang tempoh masa pada tarikh kami

🎜Kami telah menentukan tiga fungsi baharu yang membolehkan kami menambah tahun, bulan atau hari pada tarikh tertentu dalam JavaScript. Anda mungkin ingin menambah beberapa tempoh masa atau tempoh lain pada tarikh tersebut, seperti jam, minit atau saat. Tidak ada gunanya menulis tiga lagi fungsi untuk mereka. 🎜 🎜Fungsi berikut boleh digunakan untuk menambah sebarang tempoh masa pada tarikh yang ditentukan: 🎜 rrreee 🎜Seperti yang anda lihat, fungsi di atas mengendalikan sebarang isu limpahan untuk anda. Anda juga tidak perlu memberikan nilai untuk semua unit masa kerana ia ditetapkan kepada 0 secara lalai. Ini bermakna kita hanya boleh melepasi bilangan hari dan saat yang ingin kita tambah sambil melangkau semua nilai lain. 🎜

Menolak sebarang tempoh dari tarikh kita

🎜Kami tidak perlu menulis sebarang fungsi berasingan untuk menolak tempoh masa sewenang-wenangnya daripada tarikh. Anda boleh menggunakan fungsi dalam bahagian sebelumnya untuk menolak tahun, bulan, hari, jam, minit atau saat. Apa yang anda perlu lakukan ialah memberikan nilai negatif untuk tempoh tersebut. Berikut adalah beberapa contoh: 🎜 rrreee

Fikiran Akhir

🎜Dalam tutorial ini, kami mempelajari dua cara berbeza untuk menyelesaikan masalah menambah dan menolak tahun, bulan, hari, dll. dengan tarikh dalam JavaScript. Jika anda hanya mahu menambah atau menolak tahun, anda mungkin mempertimbangkan untuk mencipta fungsi seperti addYearsToDate() yang hanya melakukan ini. Pendekatan lain ialah mencipta fungsi addPeriodToDate() yang lebih umum yang boleh mengendalikan unit masa yang berbeza. 🎜

Atas ialah kandungan terperinci JavaScript Vanila: Tambah atau tolak hari dari tarikh (dan banyak lagi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!