在前端開(kāi)發(fā)中，處理日期和時(shí)間是常見(jiàn)需求，但原生 JavaScript 的 Date 對(duì)象功能有限且 API 不夠友好。Moment.js 和 Day.js 是兩個(gè)流行的時(shí)間處理庫(kù)，它們提供了簡(jiǎn)潔易用的 API 來(lái)簡(jiǎn)化日期操作。

1、Moment.js

Moment.js 是一個(gè)歷史悠久的時(shí)間處理庫(kù)，提供了全面的日期格式化、解析、計(jì)算和國(guó)際化支持。

優(yōu)點(diǎn)：

• 支持日期計(jì)算、格式化、時(shí)區(qū)處理等幾乎所有場(chǎng)景。
• 是通過(guò)鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)復(fù)雜操作。
• 完善的國(guó)際化和本地化支持
• 社區(qū)成熟，文檔完善，生態(tài)豐富。

缺點(diǎn)：

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

2、常見(jiàn)用法

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

// 1. 獲取當(dāng)前時(shí)間
const now = moment();

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

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

// 4. 相對(duì)時(shí)間
console.log(moment('2023-01-01').fromNow()); // 4個(gè)月前

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

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

3、Day.js

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

4、常見(jiàn)用法

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

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

// 1. 獲取當(dāng)前時(shí)間
const now = dayjs();

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

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

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

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

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

5、JS 原生 API

如果項(xiàng)目對(duì)體積要求極高且僅需簡(jiǎn)單功能，可使用原生 API。

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

缺點(diǎn)：

• API 設(shè)計(jì)不夠直觀，月份從 0 開(kāi)始計(jì)算。
• 時(shí)區(qū)處理復(fù)雜，并且容易出錯(cuò)，日期計(jì)算和格式化功能有限。
• 可變對(duì)象，容易產(chǎn)生副作用。

6、常見(jiàn)方法

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

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

// 3. 相對(duì)時(shí)間（簡(jiǎn)單實(shí)現(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)}小時(shí)前`;
};

7、對(duì)比與選擇建議

選擇建議：

• 新項(xiàng)目：優(yōu)先使用 Day.js ，體積小且性能高。
• 遺留項(xiàng)目：若已使用 Moment.js 且功能穩(wěn)定，可繼續(xù)使用；若需優(yōu)化體積，可考慮遷移到 Day.js。
• 國(guó)際化需求：兩者均支持，但 Day.js 的國(guó)際化文件需單獨(dú)引入。

總結(jié)：

• Moment.js 適合功能全面、兼容性要求高的項(xiàng)目。
• Day.js 適合追求極致性能和體積的現(xiàn)代項(xiàng)目。
• 原生 API 適合簡(jiǎn)單場(chǎng)景，避免引入額外依賴。

到此這篇關(guān)于JavaScript中的Moment.js與Day.js時(shí)間處理庫(kù)用法的文章就介紹到這了,更多相關(guān)JS Moment.js與Day.js時(shí)間處理庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論