# 前端时间格式化工具教程

URL: https://caijiao.org/posts/1
Source: docs/posts/1.md
Description: 前端时间格式化工具教程，介绍 dayjs、moment.js 和 date-fns 的使用方法、对比及最佳实践，帮助前端开发者快速处理日期时间。

在前端开发中，我们经常需要对日期和时间进行格式化，例如显示用户友好的时间、日志时间、日历、倒计时等。为了提高开发效率和代码可读性，社区提供了很多时间格式化工具。

## 1. 原生 JavaScript

[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](https://day.js.org/) 是一个轻量级的时间库，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](https://momentjs.com/) 是经典的时间处理库，功能强大，支持各种国际化和复杂时间操作：

```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](https://date-fns.org/) 是一个功能丰富的现代时间处理库，特点是按函数导入，体积小，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](/dayjs/)     | 2kb  | 小巧、轻量、插件丰富           | 推荐日常使用       |
| moment.js | 67kb | 功能最全、国际化支持           | 大项目或需要复杂时间处理 |
| [date-fns](/date-fns/)  | 按需导入 | 函数式、Tree-Shaking 支持好 | 推荐现代前端项目     |

> **建议**：新项目优先使用 `dayjs` 或 `date-fns`，兼顾体积与功能；旧项目或复杂需求可继续使用 `moment.js`。

## 6. 参考链接

* [dayjs 官方文档](https://day.js.org/)
* [moment.js 官方文档](https://momentjs.com/)
* [date-fns 官方文档](https://date-fns.org/)