JavaScript中的Moment.js与Day.js时间处理库用法详解

 更新时间:2025年07月24日 11:19:53   作者:青灯文案  
Moment.js是一个在JavaScript开发中广泛使用的日期处理库,它的出现极大地方便了开发者在处理日期和时间上的需求,这篇文章主要介绍了JavaScript中的Moment.js与Day.js时间处理库用法的相关资料,需要的朋友可以参考下

在前端开发中,处理日期和时间是常见需求,但原生 JavaScript 的 Date 对象功能有限且 API 不够友好。Moment.jsDay.js 是两个流行的时间处理库,它们提供了简洁易用的 API 来简化日期操作。

1、Moment.js

Moment.js 是一个历史悠久的时间处理库,提供了全面的日期格式化、解析、计算和国际化支持。

优点:

  • 支持日期计算、格式化、时区处理等几乎所有场景。
  • 是通过链式调用实现复杂操作。
  • 完善的国际化和本地化支持
  • 社区成熟,文档完善,生态丰富。

缺点:

  • 体积较大:约 67KBgzip 后约 20KB+,可能影响应用加载速度。
  • 可变对象设计,容易产生引用问题,例如在同一个方法多次调用 moment 方法,会产生数据异常。
  • 性能相对较差。
  • 官方停止维护,进入维护模式。
  • 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. 时区处理(需额外加载 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 兼容,适合现代前端项目,新项目推荐使用。

优点:

  • 核心体积仅 2KB,适合对包大小敏感的项目。
  • 不可变对象设计,避免了引用问题,所有操作返回新实例,避免副作用。
  • API 兼容 Moment,几乎完全继承 Moment 的 API,迁移成本低。
  • 支持 Tree-shaking ,按需加载。
  • 性能优秀,现代化设计,活跃维护,持续更新。
  • 按需加载插件,避免引入无用代码。

缺点:

  • 功能相对 Moment 较少,需要使用插件引用。
  • 国际化需要额外支持。
  • 社区相对较新。

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. 时区处理(需加载 utc 和 timezone 插件)
const laTime = dayjs.utc('2023-05-10 12:00').tz('America/Los_Angeles');

5、JS 原生 API

如果项目对体积要求极高且仅需简单功能,可使用原生 API。

优点:无需额外依赖,浏览器原生支持,性能最好,占用内存少,所有JS环境都支持。

缺点:

  • API 设计不够直观,月份从 0 开始计算。
  • 时区处理复杂,并且容易出错,日期计算和格式化功能有限。
  • 可变对象,容易产生副作用。

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. 相对时间(简单实现)
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、对比与选择建议

特性原生APIMoment.jsDay.js
体积原生~20KB+(gzip 后)~2KB(gzip 后)
兼容性跨浏览器有兼容问题支持 IE8+现代浏览器(IE 需 polyfill)
API 设计可变数据(可能有副作用)可变数据(可能有副作用)不可变数据(更安全)
生态使用比较复杂插件丰富,社区成熟插件逐渐完善
适用场景对日期要求不高的场景复杂项目、需兼容旧浏览器对体积敏感的项目

选择建议:

  • 新项目:优先使用 Day.js ,体积小且性能高。
  • 遗留项目:若已使用 Moment.js 且功能稳定,可继续使用;若需优化体积,可考虑迁移到 Day.js
  • 国际化需求:两者均支持,但 Day.js 的国际化文件需单独引入。

总结:

  • Moment.js 适合功能全面、兼容性要求高的项目。
  • Day.js 适合追求极致性能和体积的现代项目。
  • 原生 API 适合简单场景,避免引入额外依赖。

到此这篇关于JavaScript中的Moment.js与Day.js时间处理库用法的文章就介绍到这了,更多相关JS Moment.js与Day.js时间处理库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js模拟实现烟花特效

    js模拟实现烟花特效

    这篇文章主要为大家详细介绍了js模拟实现烟花特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • TypeScript中let和var的区别介绍

    TypeScript中let和var的区别介绍

    这篇文章主要介绍了TypeScript let与var的区别,主要从作用域等这几个方面做详细介绍,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • onsubmit阻止form表单提交与onclick的相关操作

    onsubmit阻止form表单提交与onclick的相关操作

    return false会阻止表单提交,基本上关于onsubmit=return false有以下几点要注意的地方,学习后台编程的朋友一定要知道。
    2010-09-09
  • js中toString()与valueOf()的使用

    js中toString()与valueOf()的使用

    tostring 和 valueOf 函数是解决值的显示和运算的问题,本文主要介绍了js中toString()与valueOf()的使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • 原生JS控制多个滚动条同步跟随滚动效果

    原生JS控制多个滚动条同步跟随滚动效果

    本文要探讨的是,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动
    2017-12-12
  • 如何写JS数组sort的比较函数

    如何写JS数组sort的比较函数

    我们知道,数组的sort方法可以对数组元素进行排序,默认是按ASCII字母表顺序排序。如果要根据其他的顺序排序就需要为sort方法提供一个比较函数作为参数。这里讲的就是如何写这个比较函数。
    2010-07-07
  • 一个JavaScript操作元素定位元素的实例

    一个JavaScript操作元素定位元素的实例

    操作元素定位元素,大家会想到使用js来实现,下面有个不错的示例,大家可以看看
    2014-10-10
  • 实现图片首尾平滑轮播(JS原生方法—节流)

    实现图片首尾平滑轮播(JS原生方法—节流)

    下面小编就为大家带来一篇实现图片首尾平滑轮播(JS原生方法—节流)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

    JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

    这篇文章主要介绍了JS如何实现网站中PC端和手机端自动识别并跳转对应的代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JS实现手写 forEach算法示例

    JS实现手写 forEach算法示例

    这篇文章主要介绍了JS实现手写 forEach算法,结合实例形式分析了JS实现手写 forEach算法实现原理与相关操作技巧,需要的朋友可以参考下
    2020-04-04

最新评论