JavaScript日期时间处理教程：格式化、时区转换与倒计时实现

日期时间处理是 JavaScript 开发里非常常见、也很容易踩坑的部分。文章发布时间、订单倒计时、活动截止时间、日志展示、跨时区预约、后台筛选条件，都离不开时间处理。

JavaScript 内置的 Date 能完成很多基础工作，但它的 API 不够直观，时区和格式化也容易让人混淆。本文从 Date 基础讲起，再介绍格式化、时间戳、时区转换和倒计时实现。

Date 基础

创建当前时间可以直接使用 new Date()。它表示当前环境下的日期时间对象。

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

Date 对象内部本质上保存的是一个时间点，而不是某个固定格式的字符串。显示成什么样，取决于格式化方式和运行环境时区。

时间戳

时间戳通常表示从 1970 年 1 月 1 日 00:00:00 UTC 到某个时间点的毫秒数。JavaScript 里常用毫秒时间戳。

const timestamp = Date.now();
const date = new Date(timestamp);

要注意很多后端接口返回的是秒级时间戳，需要乘以 1000 才能传给 JavaScript 的 Date。

基础格式化

最直接的格式化方式，是使用 getFullYear、getMonth、getDate 等方法手动拼接。

function pad(value) {
  return String(value).padStart(2, '0');
}

function formatDate(date) {
  const year = date.getFullYear();
  const month = pad(date.getMonth() + 1);
  const day = pad(date.getDate());
  const hour = pad(date.getHours());
  const minute = pad(date.getMinutes());

  return `${year}-${month}-${day} ${hour}:${minute}`;
}

getMonth() 返回值从 0 开始，所以实际月份要加 1。这是 Date API 里最常见的坑之一。

Intl 格式化

如果需要本地化展示，可以使用 Intl.DateTimeFormat。它能根据语言和地区格式化日期。

const formatter = new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit'
});

console.log(formatter.format(new Date()));

相比手写格式化，Intl 更适合多语言、多地区展示。后台系统和国际化页面尤其常用。

时区概念

时间处理里最容易混淆的是时间点和时区。一个时间点在 UTC、北京时间、纽约时间下显示不同，但它们代表的是同一瞬间。

前后端传递时间时，推荐使用 ISO 字符串或时间戳，展示时再按用户所在时区或业务指定时区格式化。

指定时区显示

Intl.DateTimeFormat 可以通过 timeZone 指定显示时区。

const formatter = new Intl.DateTimeFormat('zh-CN', {
  timeZone: 'Asia/Shanghai',
  dateStyle: 'medium',
  timeStyle: 'short'
});

console.log(formatter.format(new Date()));

这适合跨境业务、预约系统、服务器日志展示等场景。不要靠手动加减小时数处理复杂时区，因为夏令时等规则会让问题变得更复杂。

解析日期字符串

解析日期字符串时，要注意格式差异。ISO 格式通常更稳定，比如带有 Z 的字符串表示 UTC 时间。

const date = new Date('2026-05-04T15:00:00+08:00');

不要依赖模糊格式，比如 2026/05/04 在不同环境中可能有差异。接口传值最好统一格式。

倒计时实现

倒计时的核心是：目标时间戳减去当前时间戳，得到剩余毫秒数，再换算成天、小时、分钟和秒。

function getCountdown(targetTime) {
  const diff = Math.max(0, targetTime - Date.now());

  const seconds = Math.floor(diff / 1000) % 60;
  const minutes = Math.floor(diff / 1000 / 60) % 60;
  const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
  const days = Math.floor(diff / 1000 / 60 / 60 / 24);

  return { days, hours, minutes, seconds };
}

用 Math.max(0, diff) 可以避免倒计时结束后出现负数。

定时刷新

倒计时通常用 setInterval 每秒刷新一次。页面销毁或组件卸载时，要清除定时器。

const timer = setInterval(() => {
  const result = getCountdown(targetTime);
  console.log(result);
}, 1000);

clearInterval(timer);

实际框架项目里，清理定时器非常重要。否则页面切换后定时器仍然运行，可能造成内存泄漏或重复更新。

日期计算

简单日期加减可以基于时间戳计算。例如计算 7 天后：

const sevenDaysLater = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);

但如果涉及自然月、月底、工作日、节假日、夏令时等复杂规则，建议使用成熟日期库或由后端统一计算。

常见错误

第一种错误是忘记 getMonth() 要加 1。第二种错误是秒级时间戳直接传给 Date，导致时间跑到 1970 年。第三种错误是手动加 8 小时处理时区。第四种错误是倒计时结束后出现负数。

还有一种常见问题是前后端没有统一时间格式，导致本地正常、线上跨时区异常。时间字段最好在接口文档里明确单位、格式和时区。

实践建议

处理时间时，先区分三个问题：存储的是哪个时间点，传输格式是什么，展示给哪个时区的用户。接口传输优先使用时间戳或 ISO 字符串；展示时用 Intl.DateTimeFormat 或统一格式化函数；倒计时用时间戳差值计算。

如果只是普通页面显示日期，原生 Date 和 Intl 已经够用。如果涉及复杂日历、时区、工作日和国际化规则，就不要硬写，选择可靠日期库或后端统一处理会更稳。