JavaScript 日期基础

在Web开发中，处理日期和时间是一项常见任务。无论是显示当前时间、计算两个日期之间的差异，还是创建日历应用，JavaScript的Date对象都提供了强大的功能来满足这些需求。本文将详细介绍JavaScript中日期和时间的基础知识，帮助初学者掌握这一重要概念。

Date对象简介

JavaScript中的Date对象是处理日期和时间的核心。它允许我们创建、操作和格式化日期时间，提供了一系列方法来获取和设置年、月、日、时、分、秒等信息。

备注

JavaScript的Date对象内部是以1970年1月1日UTC（协调世界时）午夜开始的毫秒数来存储日期的，这个时间点通常被称为"UNIX纪元"或"时间戳零点"。

创建日期对象

有多种方式可以创建一个Date对象：

1. 创建当前日期和时间

// 创建表示当前日期和时间的Date对象
const now = new Date();
console.log(now);

// 输出示例（输出会根据运行时间和时区不同）:
// Sun Mar 26 2023 15:30:45 GMT+0800 (中国标准时间)

2. 从时间戳创建

// 从时间戳（毫秒数）创建
const timestamp = 1679813445000; // 2023年3月26日的某个时间点
const dateFromTimestamp = new Date(timestamp);
console.log(dateFromTimestamp);

// 获取当前时间戳
console.log(Date.now()); // 当前时间的毫秒数

3. 指定日期和时间创建

// 方法1: 年,月,日,时,分,秒,毫秒 (月份从0开始，0代表一月)
const specificDate1 = new Date(2023, 2, 26, 15, 30, 0, 0); // 2023年3月26日 15:30:00
console.log(specificDate1);

// 方法2: 日期字符串
const specificDate2 = new Date('2023-03-26T15:30:00');
console.log(specificDate2);

// 方法3: 日期字符串 (多种格式)
const specificDate3 = new Date('March 26, 2023 15:30:00');
console.log(specificDate3);

注意

使用Date构造函数时，月份参数是从0开始的（0表示一月，11表示十二月）。这是JavaScript中的一个常见陷阱，很容易导致错误。

获取日期和时间信息

一旦创建了Date对象，我们可以使用多种方法来获取它的各个组成部分：

const today = new Date();

// 获取年、月、日
console.log('年份:', today.getFullYear());       // 如: 2023
console.log('月份:', today.getMonth() + 1);      // 月份从0开始，所以加1
console.log('日期:', today.getDate());           // 如: 26

// 获取时、分、秒、毫秒
console.log('小时:', today.getHours());          // 0-23
console.log('分钟:', today.getMinutes());        // 0-59
console.log('秒数:', today.getSeconds());        // 0-59
console.log('毫秒:', today.getMilliseconds());   // 0-999

// 获取星期
console.log('星期:', today.getDay());            // 0(周日)到6(周六)

// 获取时间戳
console.log('时间戳:', today.getTime());         // 毫秒数

修改日期和时间

我们可以使用对应的set方法来修改Date对象的各个部分：

const date = new Date('2023-03-26T15:30:00');
console.log('原始日期:', date);

// 修改年份、月份、日期
date.setFullYear(2024);
date.setMonth(7);  // 8月 (记住是从0开始)
date.setDate(15);

// 修改时、分、秒
date.setHours(10);
date.setMinutes(45);
date.setSeconds(30);

console.log('修改后的日期:', date);
// 输出: Mon Aug 15 2024 10:45:30 GMT+0800 (中国标准时间)

日期格式化

JavaScript的Date对象提供了一些基本的格式化方法，但功能有限：

const event = new Date('2023-03-26T15:30:00');

// 基本格式化方法
console.log(event.toString());        // Sun Mar 26 2023 15:30:00 GMT+0800 (中国标准时间)
console.log(event.toDateString());    // Sun Mar 26 2023
console.log(event.toTimeString());    // 15:30:00 GMT+0800 (中国标准时间)
console.log(event.toISOString());     // 2023-03-26T07:30:00.000Z (UTC时间)
console.log(event.toLocaleString());  // 2023/3/26 下午3:30:00
console.log(event.toLocaleDateString()); // 2023/3/26
console.log(event.toLocaleTimeString()); // 下午3:30:00

使用Intl.DateTimeFormat进行本地化格式化

为了更强大的格式化功能，我们可以使用Intl.DateTimeFormat：

const event = new Date('2023-03-26T15:30:00');

// 使用不同的地区设置格式化日期
const formatter1 = new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(formatter1.format(event));
// 输出: 2023年3月26日星期日 15时30分

// 使用英文格式
const formatter2 = new Intl.DateTimeFormat('en-US', {
  dateStyle: 'full',
  timeStyle: 'medium'
});

console.log(formatter2.format(event));
// 输出: Sunday, March 26, 2023 at 3:30:00 PM

日期计算

计算两个日期之间的天数

function daysBetween(date1, date2) {
  // 将日期转换为毫秒并计算差异
  const diffTime = Math.abs(date2 - date1);
  // 将毫秒转换为天数
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  return diffDays;
}

const startDate = new Date('2023-01-01');
const endDate = new Date('2023-03-26');
console.log(`两个日期之间相差 ${daysBetween(startDate, endDate)} 天`);
// 输出: 两个日期之间相差 85 天

添加天数到日期

function addDays(date, days) {
  const result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}

const today = new Date();
const nextWeek = addDays(today, 7);
console.log('一周后:', nextWeek.toDateString());

实际应用案例

案例1：倒计时计时器

function createCountdown(targetDate) {
  function updateCountdown() {
    const now = new Date();
    const diff = targetDate - now; // 毫秒差
    
    if (diff <= 0) {
      console.log('倒计时结束!');
      clearInterval(timer);
      return;
    }
    
    // 计算天、时、分、秒
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    
    console.log(`还剩 ${days}天 ${hours}时 ${minutes}分 ${seconds}秒`);
  }
  
  updateCountdown(); // 立即执行一次
  const timer = setInterval(updateCountdown, 1000); // 每秒更新一次
  
  return {
    stop: () => clearInterval(timer)
  };
}

// 使用示例:
const newYear = new Date('2024-01-01T00:00:00');
const countdown = createCountdown(newYear);

// 要停止倒计时:
// countdown.stop();

案例2：日历构建函数

以下是一个简单函数，可以生成指定月份的日历数据：

function generateCalendarData(year, month) {
  // 创建指定年月的第一天
  const firstDay = new Date(year, month - 1, 1); // 注意月份是0-11
  // 获取该月的天数
  const lastDay = new Date(year, month, 0).getDate();
  // 获取第一天是星期几 (0-6)
  const firstDayOfWeek = firstDay.getDay();
  
  // 创建日历数据
  const calendarData = [];
  let week = Array(7).fill(null); // 初始化一周，用null填充
  
  // 填充第一周前面的空白
  for (let i = 0; i < firstDayOfWeek; i++) {
    week[i] = null;
  }
  
  // 填充日期
  let currentDay = 1;
  for (let i = firstDayOfWeek; i < 7; i++) {
    week[i] = currentDay++;
  }
  calendarData.push([...week]);
  
  // 填充剩余周
  while (currentDay <= lastDay) {
    week = Array(7).fill(null);
    for (let i = 0; i < 7 && currentDay <= lastDay; i++) {
      week[i] = currentDay++;
    }
    calendarData.push([...week]);
  }
  
  return calendarData;
}

// 使用示例：生成2023年3月的日历
const calendarData = generateCalendarData(2023, 3);
console.log('2023年3月日历:');
console.log(['日', '一', '二', '三', '四', '五', '六'].join('\t'));

calendarData.forEach(week => {
  const weekStr = week.map(day => day === null ? '' : day).join('\t');
  console.log(weekStr);
});

常见陷阱与注意事项

1. 月份从0开始计数：在JavaScript中，月份是从0（一月）到11（十二月）。

const january = new Date(2023, 0, 15); // 2023年1月15日
const december = new Date(2023, 11, 25); // 2023年12月25日

2. 日期解析的浏览器差异：不同浏览器可能以不同方式解析日期字符串。

// 推荐使用标准ISO格式，确保跨浏览器一致性
const safeDate = new Date('2023-03-26T15:30:00');

// 避免使用这种格式，可能在不同浏览器有不同结果
const unsafeDate = new Date('03/26/2023');

3. 时区问题：JavaScript的Date对象会根据用户的本地时区显示。

const date = new Date('2023-03-26T15:30:00Z'); // Z表示UTC时间
console.log(date.toString()); // 会根据用户时区显示
console.log(date.toUTCString()); // 显示UTC时间

总结

JavaScript的Date对象提供了强大的日期和时间处理功能，从创建和格式化到比较和计算。虽然有一些陷阱需要注意（如月份从0开始计数），但掌握了这些基础知识后，你将能够在Web应用程序中有效地处理各种日期和时间相关的任务。

下一步学习

• 探索更高级的日期操作
• 学习使用第三方库如Moment.js、date-fns或Luxon，它们提供了更强大的日期时间处理功能
• 解决复杂的时区问题
• 创建更复杂的日历和日期选择器应用

练习题

1. 创建一个函数，显示今天距离今年结束还有多少天。
2. 编写一个函数，接受一个日期并返回该日期是该年的第几周。
3. 实现一个简单的约会提醒功能，可以设置未来的日期和提醒信息。
4. 创建一个函数，计算用户的确切年龄（年、月、日）。

提示

在处理日期计算时，考虑使用现代的第三方库可以让你的代码更简洁、更可靠，并处理更多边缘情况。但理解原生Date对象的基础知识仍然非常重要！