JavaScript Date Formatting for Time Display

💡 原文英文,约200词,阅读约需1分钟。
📝

内容提要

该文介绍为 Date.prototype 添加 format 方法,通过占位符格式化日期时间,支持 %Y、%m、%d、%H、%M、%S、%a、%A、%b、%B、%c、%j、%u、%U、%w、%q、%x、%X 等,并使用正则替换返回结果。

🔎

延伸解读

实现方式与设计选择

该实现通过 Object.defineProperty 将 format 方法添加到 Date.prototype,并设置 enumerable 为 false,避免在 for...in 循环中枚举该方法。方法内部使用正则表达式逐个替换占位符,每次替换只处理第一个匹配项,因此若格式字符串中同一占位符出现多次,只有第一个会被替换。

占位符覆盖范围

支持的占位符包括 %Y、%m、%d、%H、%M、%S 等常见日期时间字段,以及 %a、%A、%b、%B 等本地化星期和月份名称,还有 %j、%u、%U、%w、%q 等周数和季度信息。%c、%x、%X 则直接调用 toLocaleString、toLocaleDateString、toLocaleTimeString 返回本地化格式。

潜在问题与注意事项

代码中 month 和 monthShortName 数组的索引与 getMonth() 返回值存在偏移:getMonth() 返回 0-11,但数组第一个元素是 December/Dec,导致一月对应 December。此外,%u 和 %U 的计算基于 getDayNumber(),但该函数未在代码中定义,直接使用会抛出错误。

❓

Q&A

如何为 JavaScript 的 Date 对象添加自定义的 format 方法?

可以通过扩展 Date.prototype 来实现。使用 Object.defineProperty 定义 format 方法,并设置 configurable、enumerable、writable 属性。在方法内部,根据传入的格式字符串,替换占位符为对应的日期时间值。

Date.prototype.format 支持哪些格式化占位符?

支持 %Y(四位年份)、%y(两位年份)、%m(月份)、%d(日期)、%H(24小时制小时)、%I(12小时制小时)、%M(分钟)、%S(秒)、%a(简写星期)、%A(完整星期)、%b(简写月份)、%B(完整月份)、%c(本地日期时间)、%j(年内第几天)、%u(星期数,周一为开始)、%U(星期数,周日为开始)、%w(星期数字)、%q(季度)、%x(本地日期)、%X(本地时间)。

如何使用这个 format 方法格式化一个日期?

首先确保 Date.prototype.format 已定义,然后创建 Date 对象,调用其 format 方法并传入格式字符串,例如 new Date().format('%Y-%m-%d %H:%M:%S') 将返回类似 '2023-04-05 14:30:00' 的字符串。

format 方法内部是如何实现占位符替换的?

方法内部定义了一个 regs 对象,将每个占位符映射到对应的日期时间值。然后遍历 regs,对于每个占位符,使用正则表达式检测格式字符串中是否包含该占位符,如果包含,则用对应的值替换。

%j 和 %u 占位符分别代表什么?

%j 代表年内的第几天(001-366),%u 代表一年中的星期数(00-53),其中星期一作为星期的开始。

这个 format 方法是否支持本地化的日期时间格式?

是的,通过 %c、%x、%X 占位符可以分别获取本地化的日期时间字符串、本地日期字符串和本地时间字符串,它们分别调用 toLocaleString、toLocaleDateString 和 toLocaleTimeString 方法。

🏷️

标签

➡️

继续阅读