Moment.js的日期处理与FORMAT函数的自定义日期和时间格式

在前端开发中，日期和时间的处理一直是一项复杂且容易出错的任务。不过，有了Moment.js这个强大的JavaScript库，这些难题变得迎刃而解。Moment.js提供了丰富的API，使得日期和时间的解析、验证、操作及显示都变得简单而直观。本文将重点介绍Moment.js在日期处理方面的功能，特别是如何通过FORMAT函数自定义日期和时间的显示格式，以满足多样化的前端展示需求。

Moment.js简介

Moment.js是一个轻量级的JavaScript日期库，它设计用来解析、验证、操作和显示日期和时间。通过简洁的语法，开发者可以轻松地处理各种复杂的日期时间计算，极大地提高了开发效率。 

安装Moment.js

要使用Moment.js，首先需要将其引入到你的项目中。你可以通过npm或yarn等包管理器进行安装，或者直接在HTML文件中通过CDN链接引入

npm install moment # 或者 yarn add moment

 在HTML文件中引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

 使用Moment.js处理日期和时间

获取当前时间

要获取当前时间并格式化为指定的格式，可以使用.format()方法。

const now = moment();  
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 输出当前时间，格式为“年-月-日 时:分:秒”

自定义日期和时间格式

Moment.js的.format()方法支持多种自定义格式，通过传递一个格式字符串，可以灵活地控制日期和时间的显示方式。以下是一些常用的格式字符及其含义：

格式规范	说明
(:)	时间分隔符。 在某些区域设置中，可能用其他字符表示时间分隔符。 在设置时间值的格式时，时间分隔符用于分隔小时、分钟和秒。 在格式化输出中用作时间分隔符的实际字符取决于您应用程序的当前区域性值。
(/)	日期分隔符。 在某些区域设置中，可能用其他字符表示日期分隔符。 在设置日期值的格式时，日期分隔符用于分隔年、月和日。 在格式化输出中用作日期分隔符的实际字符取决于您应用程序的当前区域性。
(%)	用于指示应以单个字母格式读取后面的字符，而不考虑任何尾随字母。 此外，还用于指示以用户定义的格式读取单个字母格式。 有关其他详细信息，请参阅以下内容。
d	将天显示为不带前导零的数字（例如，1）。 如果这是用户定义的数字格式中的唯一字符，则使用 %d。
dd	将天显示为带一个前导零的数字（例如，01）。
ddd	将天显示为缩写（例如，Sun）。
dddd	将天显示为全名（例如，Sunday）。
M	将月显示为不带前导零的数字（例如，一月表示为 1）。 如果这是用户定义的数字格式中的唯一字符，则使用 %M。
MM	将月显示为带一个前导零的数字（例如，01/12/01）。
MMM	将月显示为缩写（例如，Jan）。
MMMM	将月显示为完整的月份名称（例如，January）。
gg	显示时期/时代字符串（例如，A.D.）。
h	使用 12 小时制时钟将小时显示为不带前导零的数字（例如，1:15:15 PM）。 如果这是用户定义的数字格式中的唯一字符，则使用 %h。
hh	使用 12 小时制时钟将小时显示为带前导零的数字（例如，01:15:15 PM）。
H	使用 24 小时制时钟将小时显示为不带前导零的数字（例如，1:15:15）。 如果这是用户定义的数字格式中的唯一字符，则使用 %H。
HH	使用 24 小时制时钟将小时显示为带前导零的数字（例如，01:15:15）。
m	将分钟显示为不带前导零的数字（例如，12:1:15）。 如果这是用户定义的数字格式中的唯一字符，则使用 %m。
mm	将分钟显示为带前导零的数字（例如，12:01:15）。
s	将秒显示为不带前导零的数字（例如，12:15:5）。 如果这是用户定义的数字格式中的唯一字符，则使用 %s。
ss	将秒显示为带前导零的数字（例如，12:15:05）。
f	显示秒的小数部分。 例如，ff 显示百分之一秒，而 ffff 显示万分之一秒。 在用户定义的格式中最多可以使用 7 个 f 符号。 如果这是用户定义的数字格式中的唯一字符，则使用 %f。
t	使用 12 小时制时钟，对于中午之前的任何小时都显示大写字母 A；对于中午与 11:59 P.M 之间的任何小时都显示大写字母 P。 如果这是用户定义的数字格式中的唯一字符，则使用 %t。
tt	对于使用 12 小时制时钟的区域设置，对中午之前的任何小时都显示大写字母 AM；对于中午与 11:59 P.M 之间的任何小时都显示 PM。 对于使用 24 小时制时钟的区域设置，不显示任何内容。
y	将年显示为不带前导零的数字 (0-9)。 如果这是用户定义的数字格式中的唯一字符，则使用 %y。
yy	以带一个前导零的两位数字格式显示年（如果适用）。
yyy	以四位数字格式显示年。
yyyy	以四位数字格式显示年。
z	显示不带前导零的时区偏移量（例如，-8）。 如果这是用户定义的数字格式中的唯一字符，则使用 %z。
zz	显示带一个前导零的时区偏移量（例如，-08）
zzz	显示完整的时区偏移量（例如，-08:00）

示例代码

以下是一些使用Moment.js进行日期和时间格式化的示例代码：

// 获取当前时间，并格式化为“年-月-日 时:分:秒”  
const nowFormat = moment().format('YYYY-MM-DD HH:mm:ss');  
console.log(nowFormat); // 输出类似“2023-07-15 17:09:45”  
  
// 自定义格式：显示完整的日期和时间，包括上下午标识  
const customFormat = moment().format('MMMM Do YYYY, h:mm:ss a');  
console.log(customFormat); // 输出类似“July 15th 2023, 5:09:45 pm”  
  
// 只显示日期部分  
const dateFormat = moment().format('YYYY/MM/DD');  
console.log(dateFormat); // 输出类似“2023/07/15”  
  
// 只显示时间部分，24小时制  
const timeFormat = moment().format('HH:mm:ss');  
console.log(timeFormat); // 输出类似“17:09:45”

注意事项

1. 格式字符串区分大小写：在定义格式字符串时，要注意大小写的不同会导致不同的输出格式。例如，MMMM会输出完整的月份名称，而Mmmm则不是有效的格式字符。

2. 区域设置：Moment.js的格式化输出会根据当前用户的区域设置（locale）来确定一些特定字符（如日期和时间分隔符）的显示方式。如果需要特定的区域设置，可以使用Moment.js的.locale()方法进行设置。

3. 时刻注意时区：在处理日期和时间时，时区是一个重要的考虑因素。Moment.js提供了对时区的支持，但在进行格式化时，要确保所使用的时区与你的应用需求一致。可以通过.utc()、.local()或.tz()等方法来管理时区。

4. Moment.js的替代品：虽然Moment.js非常强大且流行，但它已经被官方宣布为“遗留项目”（legacy project），并推荐开发者使用如date-fns、Luxon或原生JavaScript的Intl.DateTimeFormat等更现代的替代品。因此，在新项目中，你可能需要考虑这些选项。

结论

Moment.js是一个功能强大且易于使用的JavaScript日期处理库，通过其提供的.format()方法和自定义格式字符串，可以轻松地实现各种日期和时间的显示需求。然而，随着JavaScript生态系统的不断发展，也有必要关注更现代的替代品。无论如何，Moment.js为前端开发者处理日期和时间问题提供了极大的便利，值得学习和掌握。