开个玩笑哈,dayjs还是非常强大的。如果业务需要该用还是得用,但是如果是简单的日期处理Intl.DateTimeFormat足矣
了解下Intl.DateTimeFormat,看看满不满足你的业务需求。
Intl.DateTimeFormat是什么
Intl.DateTimeFormat 对象可以根据指定的语言环境(也称为区域设置或地区)来格式化日期和时间。不同的语言环境在日期和时间的表示方式、月份和星期的命名、日期顺序等方面可能存在差异。通过指定特定的语言环境,Intl.DateTimeFormat 可以根据该语言环境的约定来格式化日期和时间,以便符合该语言环境的习惯和规范。
例如,如果将语言环境设置为 'fr-FR',Intl.DateTimeFormat 将使用法语的日期和时间格式进行格式化。同样,如果将语言环境设置为 'zh-CN',Intl.DateTimeFormat 将使用中文的日期和时间格式进行格式化。
通过根据不同的语言环境进行格式化,可以确保日期和时间在不同的语言环境下得到正确的显示和解释,以适应不同地区和文化的需求。
下面的例子语言环境皆为zh-CN
基本使用
Intl.DateTimeFormat 是一个构造函数,所以我们要通过new的方式去创建一个实例。
const formatter = new Intl.DateTimeFormat('zh-CN', options)
options的配置项如下:
year: 年份的显示格式,可以是'numeric'、'2-digit'。month: 月份的显示格式,可以是'numeric'、'2-digit'、'long'、'short'、'narrow'。day: 日期的显示格式,可以是'numeric'、'2-digit'。hour: 小时的显示格式,可以是'numeric'、'2-digit'。minute: 分钟的显示格式,可以是'numeric'、'2-digit'。second: 秒钟的显示格式,可以是'numeric'、'2-digit'。
以年份举例,numeric 显示的2023。 2-digit 显示的是23。
const date = new Date(); // 创建一个 Date 对象,表示当前日期和时间
// 创建 DateTimeFormat 对象,并指定格式化选项和语言环境
const options = {
year: 'numeric', // 年份的显示格式为数字形式,例如:2022
month: 'long', // 月份的显示格式为完整的中文月份名称,例如:十二月
day: 'numeric', // 日期的显示格式为数字形式,例如:31
hour: 'numeric', // 小时的显示格式为数字形式,例如:12
minute: 'numeric', // 分钟的显示格式为数字形式,例如:34
second: 'numeric', // 秒钟的显示格式为数字形式,例如:56
};
const formatter = new Intl.DateTimeFormat('zh-CN', options); // 创建一个 DateTimeFormat 对象,指定语言环境为中国(zh-CN),以及格式化选项
// 格式化日期和时间
const formattedDate = formatter.format(date); // 调用 format 方法,将 Date 对象传递给 DateTimeFormat 对象进行格式化
console.log(formattedDate); // 2023年11月9日 19:29:02
// month为long的时候最后的结果是 2023年11月9日 19:29:02
// month为numeric等其他值是 2023/11/9 19:35:11
当然也可以只选择某一个配置项
onst date = new Date(); // 创建一个 Date 对象,表示当前日期和时间
// 创建 DateTimeFormat 对象,并指定格式化选项和语言环境
const options = {
month: 'long', // 月份的显示格式为完整的中文月份名称,例如:一月
// month: 'numeric' // 1月
// month: '2-digit' // 01月
// month: 'short' // 1月
// month: 'narrow' // 1
};
const formatter = new Intl.DateTimeFormat('zh-CN', options); // 创建一个 DateTimeFormat 对象,指定语言环境为中国(zh-CN),以及格式化选项
// 格式化日期和时间
const formattedDate = formatter.format(date); // 调用 format 方法,将 Date 对象传递给 DateTimeFormat 对象进行格式化
console.log(formattedDate); // 一月
// 这里仅用月份举例,别的配置大家可以自行尝试
如果觉得配置项过多,可以使用dateStyle和timeStyle来格式化时间
dateStyle 的配置项:
'full':完整的日期格式,包括星期几、年份、月份和日期(例如:"2022年1月31日星期一")。'long':长格式的日期,包括年份、月份和日期(例如:"2022年1月31日")。'medium':中等长度的日期格式,包括年份、月份和日期(例如:"2022年1月31日")。'short':短格式的日期,仅包括月份和日期(例如:"2023/11/9")。
timeStyle 的配置项:
'full':完整的时间格式(例如:"中国标准时间 19:54:17")。'long':长格式的时间(例如:"GMT+8 19:54:51")。'medium':中等长度的时间格式(例如:"19:55:26")。'short':短格式的时间(例如:"19:55")。
const date = new Date(); // 创建一个 Date 对象,表示当前日期和时间
// 创建 DateTimeFormat 对象,并指定格式化选项和语言环境
const options = {
dateStyle: 'long', // 日期的显示格式,例如:2022年1月31日
timeStyle: 'short', // 时间的显示格式为短格式,例如:19:55
};
const formatter = new Intl.DateTimeFormat('zh-CN', options); // 创建一个 DateTimeFormat 对象,指定语言环境为中文(zh-CN),以及格式化选项
// 格式化日期和时间
const formattedDateTime = formatter.format(date); // 调用 format 方法,将 Date 对象传递给 DateTimeFormat 对象进行格式化
console.log(formattedDateTime); // 输出格式化后的日期和时间 2023年11月9日 19:57
获取当前日期是星期几
const date = new Date(); // 创建一个 Date 对象,表示当前日期和时间
// 创建 DateTimeFormat 对象,并指定格式化选项和语言环境
const options = {
weekday: 'long', // 星期的显示格式为完整的星期几名称,例如:星期一
};
const formatter = new Intl.DateTimeFormat('zh-CN', options); // 创建一个 DateTimeFormat 对象,指定语言环境为美式英语(en-US),以及格式化选项
// 格式化日期,只获取星期几
const formattedDate = formatter.format(date); // 调用 format 方法,将 Date 对象传递给 DateTimeFormat 对象进行格式化
console.log(formattedDate); // 输出格式化后的星期几
Intl.DateTimeFormat和dayjs的区别
Intl.DateTimeFormat是JavaScript的内置对象,不需要额外的下载依赖。而dayjs等时间处理库需要通过npm等方式引入到项目中。Intl.DateTimeFormat只能格式成固定的日期格式,例如中文 只能为2023年10月12日或者2023/10/12,不能随意的更换分隔符。dayjs则可以通过YYYY-MM-DD等方法随意更换。dayjs提供了更多的功能和灵活性,包括日期和时间的解析、格式化、计算、比较、本地化等。它具有更多的 API 方法和插件,可以根据需求进行自定义和扩展。而Intl.DateTimeFormat主要用于日期和时间的格式化,提供了一些基本的格式选项,但不具备解析和其他日期操作的功能。
综上所述,Intl.DateTimeFormat 适用于简单的日期和时间格式化需求,并且无需额外的依赖。而 dayjs 则适用于更复杂的日期和时间操作,并提供了更多的功能和灵活性。选择使用哪一个取决于您的具体需求和项目的要求。
MDN地址
developer.mozilla.org/zh-CN/docs/…
结尾
Intl.DateTimeFormat 感觉是一个比较冷门的api,我也是听同事说起才查了查这个api的用法。虽然它不如 dayjs 功能强大,但是优势在于不需要引入外部依赖就可以格式化日期时间,足以满足大部分的业务场景。依赖嘛引入的当然是越少越好了(^_^)。
Intl 除了DateTimeFormat 以外还有其他的格式化功能,有时间我会一一写出来。
拜拜ヾ(•ω•`)o