JavaScript中的Moment.js與Day.js時間處理庫用法詳解

更新時間：2025年07月24日 11:19:53 作者：青燈文案

Moment.js是一個在JavaScript開發(fā)中廣泛使用的日期處理庫,它的出現(xiàn)極大地方便了開發(fā)者在處理日期和時間上的需求,這篇文章主要介紹了JavaScript中的Moment.js與Day.js時間處理庫用法的相關(guān)資料,需要的朋友可以參考下

1、Moment.js

Moment.js 是一個歷史悠久的時間處理庫，提供了全面的日期格式化、解析、計算和國際化支持。

優(yōu)點：

支持日期計算、格式化、時區(qū)處理等幾乎所有場景。
是通過鏈式調(diào)用實現(xiàn)復雜操作。
完善的國際化和本地化支持
社區(qū)成熟，文檔完善，生態(tài)豐富。

缺點：

體積較大：約 67KB，gzip 后約 20KB+，可能影響應用加載速度。
可變對象設計，容易產(chǎn)生引用問題，例如在同一個方法多次調(diào)用 moment 方法，會產(chǎn)生數(shù)據(jù)異常。
性能相對較差。
官方停止維護，進入維護模式。
Tree-shaking 支持不佳。

2、常見用法

// 引入 Moment.js
import moment from 'moment';

// 1. 獲取當前時間
const now = moment();

// 2. 格式化日期
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 2023-05-10 14:30:00

// 3. 日期計算
const tomorrow = now.add(1, 'days');
const lastWeek = now.subtract(1, 'weeks');

// 4. 相對時間
console.log(moment('2023-01-01').fromNow()); // 4個月前

// 5. 解析字符串為日期
const date = moment('2023-05-10', 'YYYY-MM-DD');

// 6. 時區(qū)處理（需額外加載 moment-timezone）
const laTime = moment.tz('2023-05-10 12:00', 'America/Los_Angeles');

3、Day.js

Day.js 是一個輕量級的時間處理庫，設計靈感來自 Moment.js，但體積更小，約 2KB ，性能更高。它的 API 與 Moment.js 兼容，適合現(xiàn)代前端項目，新項目推薦使用。

優(yōu)點：

核心體積僅 2KB，適合對包大小敏感的項目。
不可變對象設計，避免了引用問題，所有操作返回新實例，避免副作用。
API 兼容 Moment，幾乎完全繼承 Moment 的 API，遷移成本低。
支持 Tree-shaking ，按需加載。
性能優(yōu)秀，現(xiàn)代化設計，活躍維護，持續(xù)更新。
按需加載插件，避免引入無用代碼。

缺點：

功能相對 Moment 較少，需要使用插件引用。
國際化需要額外支持。
社區(qū)相對較新。

4、常見用法

// 引入 Day.js
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc'; // 按需加載插件

// 使用插件
dayjs.extend(utc);

// 1. 獲取當前時間
const now = dayjs();

// 2. 格式化日期
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 2023-05-10 14:30:00

// 3. 日期計算
const tomorrow = now.add(1, 'day');
const lastWeek = now.subtract(1, 'week');

// 4. 相對時間（需加載 relativeTime 插件）
console.log(dayjs('2023-01-01').fromNow()); // 4個月前

// 5. 解析字符串為日期
const date = dayjs('2023-05-10', 'YYYY-MM-DD');

// 6. 時區(qū)處理（需加載 utc 和 timezone 插件）
const laTime = dayjs.utc('2023-05-10 12:00').tz('America/Los_Angeles');

5、JS 原生 API

如果項目對體積要求極高且僅需簡單功能，可使用原生 API。

優(yōu)點：無需額外依賴，瀏覽器原生支持，性能最好，占用內(nèi)存少，所有JS環(huán)境都支持。

缺點：

API 設計不夠直觀，月份從 0 開始計算。
時區(qū)處理復雜，并且容易出錯，日期計算和格式化功能有限。
可變對象，容易產(chǎn)生副作用。

6、常見方法

// 1. 格式化日期
const now = new Date();
console.log(`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`);

// 2. 日期計算
const tomorrow = new Date(now);
tomorrow.setDate(now.getDate() + 1);

// 3. 相對時間（簡單實現(xiàn)）
const getRelativeTime = (date) => {
  const diff = (new Date() - date) / 1000;
  if (diff < 60) return `${Math.floor(diff)}秒前`;
  if (diff < 3600) return `${Math.floor(diff / 60)}分鐘前`;
  return `${Math.floor(diff / 3600)}小時前`;
};

7、對比與選擇建議

特性	原生API	Moment.js	Day.js
體積	原生	~20KB+（gzip 后）	~2KB（gzip 后）
兼容性	跨瀏覽器有兼容問題	支持 IE8+	現(xiàn)代瀏覽器（IE 需 polyfill）
API 設計	可變數(shù)據(jù)（可能有副作用）	可變數(shù)據(jù)（可能有副作用）	不可變數(shù)據(jù)（更安全）
生態(tài)	使用比較復雜	插件豐富，社區(qū)成熟	插件逐漸完善
適用場景	對日期要求不高的場景	復雜項目、需兼容舊瀏覽器	對體積敏感的項目