主题
前端时间格式化工具教程
在前端开发中，我们经常需要对日期和时间进行格式化，例如显示用户友好的时间、日志时间、日历、倒计时等。为了提高开发效率和代码可读性，社区提供了很多时间格式化工具。
1. 原生 JavaScript
JavaScript 原生提供了 Date 对象，可以通过方法获取年、月、日、小时、分钟、秒等信息，然后组合成想要的格式：
js
const date = new Date();
const formatted = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
console.log(formatted); // 2025-09-15 10:30:45优点：无需额外依赖 缺点：手写格式化逻辑麻烦，跨浏览器处理可能不一致
2. dayjs
dayjs 是一个轻量级的时间库，API 类似 moment.js，但体积小（只有 2kb 左右）。
js
import dayjs from 'dayjs';
const now = dayjs();
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 2025-09-15 10:30:45特点：
- 轻量小巧，性能优良
- 支持插件扩展（如相对时间、时区、UTC 等）
- API 简洁，学习成本低
3. moment.js
moment.js 是经典的时间处理库，功能强大，支持各种国际化和复杂时间操作：
js
import moment from 'moment';
const now = moment();
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 2025-09-15 10:30:45特点：
- 功能全面，几乎能处理所有日期需求
- 支持本地化语言、时区转换、倒计时等
- 体积较大（约 67kb），且不再积极维护，社区推荐使用 dayjs 作为替代
4. date-fns
date-fns 是一个功能丰富的现代时间处理库，特点是按函数导入，体积小，Tree-Shaking 支持良好：
js
import { format, addDays, parseISO } from 'date-fns';
const now = new Date();
console.log(format(now, 'yyyy-MM-dd HH:mm:ss')); // 2025-09-15 10:30:45
const tomorrow = addDays(now, 1);
console.log(format(tomorrow, 'yyyy-MM-dd')); // 2025-09-16
const parsed = parseISO('2025-09-15T10:30:45Z');
console.log(format(parsed, 'yyyy-MM-dd HH:mm:ss')); // 2025-09-15 10:30:45特点：
- 每个函数独立导入，体积小
- 支持 Tree-Shaking
- API 函数式风格，适合现代前端开发
- 国际化支持丰富
5. 小结
| 工具 | 体积 | 特点 | 适用场景 |
|---|---|---|---|
| 原生 JS | 0kb | 无需依赖，但格式化麻烦 | 小项目或简单格式化 |
| dayjs | 2kb | 小巧、轻量、插件丰富 | 推荐日常使用 |
| moment.js | 67kb | 功能最全、国际化支持 | 大项目或需要复杂时间处理 |
| date-fns | 按需导入 | 函数式、Tree-Shaking 支持好 | 推荐现代前端项目 |
建议：新项目优先使用
dayjs或date-fns，兼顾体积与功能；旧项目或复杂需求可继续使用moment.js。