在JavaScript开发中，处理日期和时间是一个常见且重要的任务。无论是显示用户友好的日期格式、生成日志时间戳，还是处理API返回的日期数据，我们都需要将时间类型（通常是Date对象）格式化为特定的字符串格式。本指南将详细介绍JavaScript中格式化时间的各种方法，从原生API到流行的第三方库，并提供实用的代码示例。
1. 理解JavaScript中的Date对象
JavaScript中的Date对象用于处理日期和时间。它基于自1970年1月1日（UTC）以来的毫秒数（时间戳）来存储日期信息。创建Date对象有多种方式：
// 当前时间
const now = new Date();
// 指定日期时间
const specificDate = new Date(2023, 10, 15, 14, 30, 45); // 月份从0开始（0=1月）
// 从时间戳创建
const fromTimestamp = new Date(1699999999000);
// 从ISO字符串创建
const fromISOString = new Date('2023-11-15T14:30:45Z');
Date对象提供了多种方法来获取日期和时间的各个部分，如getFullYear()、getMonth()、getDate()、getHours()等。但这些方法返回的是数字，我们需要将它们组合成格式化的字符串。
2. 使用原生JavaScript方法格式化日期
2.1 基本字符串拼接
最简单的方法是手动拼接各个部分。这种方法灵活但繁琐，需要处理前导零和本地化问题。
function formatDateBasic(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 使用示例
const now = new Date();
console.log(formatDateBasic(now)); // 输出: "2023-11-15 14:30:45"
优点：简单直接，无需依赖外部库。 缺点：代码冗长，难以维护，不支持本地化。
2.2 使用Intl.DateTimeFormat
Intl.DateTimeFormat是ECMAScript Internationalization API的一部分，提供了更强大的本地化日期格式化功能。
function formatDateIntl(date, locale = 'zh-CN', options = {}) {
const defaultOptions = {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false // 使用24小时制
};
const mergedOptions = { ...defaultOptions, ...options };
const formatter = new Intl.DateTimeFormat(locale, mergedOptions);
return formatter.format(date);
}
// 使用示例
const now = new Date();
// 中文格式
console.log(formatDateIntl(now, 'zh-CN'));
// 输出: "2023/11/15 14:30:45"
// 英文格式
console.log(formatDateIntl(now, 'en-US'));
// 输出: "11/15/2023, 14:30:45"
// 自定义选项
console.log(formatDateIntl(now, 'zh-CN', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
}));
// 输出: "2023年11月15日星期三"
优点：支持本地化，代码简洁。 缺点：格式控制不如自定义函数灵活，某些浏览器支持度可能不同。
2.3 使用Date.prototype.toISOString()
toISOString()方法返回ISO 8601格式的字符串（UTC时间），适用于API通信或日志记录。
const now = new Date();
console.log(now.toISOString()); // 输出: "2023-11-15T14:30:45.123Z"
注意：返回的是UTC时间，不是本地时间。如果需要本地时间，需要额外处理。
3. 使用第三方库格式化日期
对于复杂的日期格式化需求，第三方库提供了更强大和便捷的功能。
3.1 date-fns
date-fns是一个轻量级的日期处理库，采用模块化设计，只引入需要的功能。
npm install date-fns
import { format } from 'date-fns';
const now = new Date();
// 基本格式化
console.log(format(now, 'yyyy-MM-dd HH:mm:ss')); // 输出: "2023-11-15 14:30:45"
// 包含星期
console.log(format(now, 'yyyy-MM-dd EEEE HH:mm:ss')); // 输出: "2023-11-15 星期三 14:30:45"
// 本地化格式
console.log(format(now, 'PPPP', { locale: zhCN })); // 输出: "2023年11月15日星期三"
常用格式化令牌：
yyyy：四位年份MM：两位月份（01-12）dd：两位日期（01-31）HH：24小时制小时（00-23）mm：分钟（00-59）ss：秒（00-59）EEEE：完整星期名称MMM：缩写月份名称
3.2 dayjs
dayjs是一个轻量级的日期处理库，API设计与Moment.js相似但更小。
npm install dayjs
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 引入中文本地化
const now = dayjs();
// 基本格式化
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 输出: "2023-11-15 14:30:45"
// 本地化格式
dayjs.locale('zh-cn');
console.log(now.format('YYYY年MM月DD日 HH:mm:ss')); // 输出: "2023年11月15日 14:30:45"
// 相对时间
console.log(now.subtract(2, 'day').fromNow()); // 输出: "2天前"
3.3 Moment.js（已进入维护模式）
虽然Moment.js曾经是最流行的日期库，但官方已宣布进入维护模式，建议使用现代替代品。不过，许多现有项目仍在使用它。
npm install moment
import moment from 'moment';
import 'moment/locale/zh-cn';
const now = moment();
// 基本格式化
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 输出: "2023-11-15 14:30:45"
// 本地化
moment.locale('zh-cn');
console.log(now.format('YYYY年MM月DD日 HH:mm:ss')); // 输出: "2023年11月15日 14:30:45"
4. 实用场景与代码示例
4.1 格式化为用户友好的日期
// 使用date-fns
import { format, formatDistanceToNow } from 'date-fns';
import { zhCN } from 'date-fns/locale';
function formatFriendlyDate(date) {
const now = new Date();
const diff = now - date;
// 如果是今天
if (diff < 86400000) { // 24小时
return format(date, 'HH:mm');
}
// 如果是本周
if (diff < 604800000) { // 7天
return format(date, 'EEEE HH:mm', { locale: zhCN });
}
// 如果是今年
if (date.getFullYear() === now.getFullYear()) {
return format(date, 'MM月dd日 HH:mm', { locale: zhCN });
}
// 其他情况
return format(date, 'yyyy年MM月dd日 HH:mm', { locale: zhCN });
}
// 使用示例
const today = new Date();
const yesterday = new Date(today.getTime() - 86400000);
const lastWeek = new Date(today.getTime() - 604800000);
const lastYear = new Date(today.getFullYear() - 1, 0, 1);
console.log(formatFriendlyDate(today)); // 输出: "14:30"
console.log(formatFriendlyDate(yesterday)); // 输出: "昨天 14:30"
console.log(formatFriendlyDate(lastWeek)); // 输出: "星期三 14:30"
console.log(formatFriendlyDate(lastYear)); // 输出: "2022年01月01日 00:00"
4.2 处理API返回的日期字符串
API通常返回ISO格式的日期字符串，需要转换为本地时间并格式化。
// 使用dayjs处理API日期
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
function formatApiDate(apiDateString) {
// dayjs会自动解析ISO字符串
const date = dayjs(apiDateString);
// 转换为本地时间并格式化
return date.locale('zh-cn').format('YYYY年MM月DD日 HH:mm:ss');
}
// 使用示例
const apiResponse = {
createdAt: '2023-11-15T06:30:45Z' // UTC时间
};
console.log(formatApiDate(apiResponse.createdAt));
// 输出: "2023年11月15日 14:30:45" (假设本地时区为UTC+8)
4.3 生成时间戳和日志格式
// 生成标准日志时间戳
function getLogTimestamp() {
const now = new Date();
return now.toISOString(); // ISO格式，适合日志
}
// 生成文件名时间戳
function getFileTimestamp() {
const now = new Date();
return `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`;
}
// 使用示例
console.log(getLogTimestamp()); // 输出: "2023-11-15T14:30:45.123Z"
console.log(getFileTimestamp()); // 输出: "20231115_143045"
4.4 处理时区转换
时区处理是日期格式化中的常见挑战。以下示例展示如何使用date-fns-tz处理时区：
npm install date-fns date-fns-tz
import { format, utcToZonedTime } from 'date-fns-tz';
import { zhCN } from 'date-fns/locale';
function formatInTimeZone(date, timeZone = 'Asia/Shanghai') {
// 将UTC时间转换为指定时区的时间
const zonedDate = utcToZonedTime(date, timeZone);
// 格式化为指定时区的时间
return format(zonedDate, 'yyyy-MM-dd HH:mm:ss', {
timeZone,
locale: zhCN
});
}
// 使用示例
const utcDate = new Date('2023-11-15T06:30:45Z'); // UTC时间
console.log(formatInTimeZone(utcDate, 'Asia/Shanghai')); // 输出: "2023-11-15 14:30:45"
console.log(formatInTimeZone(utcDate, 'America/New_York')); // 输出: "2023-11-15 01:30:45"
5. 性能考虑与最佳实践
5.1 性能比较
对于大量日期格式化操作（如表格渲染），性能很重要：
// 测试不同方法的性能
function performanceTest() {
const dates = Array.from({ length: 10000 }, () => new Date());
console.time('原生方法');
dates.forEach(date => {
// 使用原生方法
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
`${year}-${month}-${day}`;
});
console.timeEnd('原生方法');
console.time('date-fns');
dates.forEach(date => {
format(date, 'yyyy-MM-dd');
});
console.timeEnd('date-fns');
console.time('dayjs');
dates.forEach(date => {
dayjs(date).format('YYYY-MM-DD');
});
console.timeEnd('dayjs');
}
// 原生方法通常最快，但代码可读性差
// date-fns和dayjs在性能上相近，但提供了更好的API
5.2 最佳实践
选择合适的工具：
- 简单需求：使用原生方法或
Intl.DateTimeFormat - 复杂需求：使用
date-fns或dayjs - 避免使用Moment.js（已过时）
- 简单需求：使用原生方法或
处理时区：
- 始终在服务器端使用UTC时间存储
- 在客户端根据用户时区显示
- 使用专门的时区库处理复杂时区
性能优化：
- 避免在循环中重复创建
Date对象 - 对于大量数据，考虑使用Web Workers
- 缓存格式化结果
- 避免在循环中重复创建
本地化：
- 使用
IntlAPI或库的本地化功能 - 考虑不同地区的日期格式差异
- 使用
错误处理：
- 始终验证日期输入
- 处理无效日期字符串
// 安全的日期格式化函数
function safeFormatDate(dateString) {
const date = new Date(dateString);
// 检查是否为有效日期
if (isNaN(date.getTime())) {
return '无效日期';
}
// 使用date-fns格式化
return format(date, 'yyyy-MM-dd HH:mm:ss');
}
// 使用示例
console.log(safeFormatDate('2023-11-15')); // 输出: "2023-11-15 00:00:00"
console.log(safeFormatDate('invalid-date')); // 输出: "无效日期"
6. 总结
JavaScript中格式化时间有多种方法，从简单的原生方法到强大的第三方库。选择哪种方法取决于项目需求：
- 简单需求：使用原生方法或
Intl.DateTimeFormat - 中等需求：使用
date-fns或dayjs - 复杂需求：结合时区处理和本地化
记住，日期处理中的常见陷阱包括：
- 月份从0开始（0=1月）
- 时区问题（UTC vs 本地时间）
- 浏览器兼容性
- 性能考虑
通过本指南，您应该能够根据具体需求选择合适的日期格式化方法，并编写出清晰、高效、可维护的代码。