菜鸟教程
文章 文章 posts

前端时间格式化工具教程

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

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。

6. 参考链接