dayjs我们别联系了,我怕Intl.DateTimeFormat误会~~~

326 阅读6分钟

开个玩笑哈,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的区别

  1. Intl.DateTimeFormat是JavaScript的内置对象,不需要额外的下载依赖。而dayjs等时间处理库需要通过npm等方式引入到项目中。
  2. Intl.DateTimeFormat只能格式成固定的日期格式,例如中文 只能为2023年10月12日或者2023/10/12,不能随意的更换分隔符。dayjs 则可以通过YYYY-MM-DD等方法随意更换。
  3. dayjs 提供了更多的功能和灵活性,包括日期和时间的解析、格式化、计算、比较、本地化等。它具有更多的 API 方法和插件,可以根据需求进行自定义和扩展。而 Intl.DateTimeFormat 主要用于日期和时间的格式化,提供了一些基本的格式选项,但不具备解析和其他日期操作的功能。

综上所述,Intl.DateTimeFormat 适用于简单的日期和时间格式化需求,并且无需额外的依赖。而 dayjs 则适用于更复杂的日期和时间操作,并提供了更多的功能和灵活性。选择使用哪一个取决于您的具体需求和项目的要求。

MDN地址

developer.mozilla.org/zh-CN/docs/…

结尾

Intl.DateTimeFormat 感觉是一个比较冷门的api,我也是听同事说起才查了查这个api的用法。虽然它不如 dayjs 功能强大,但是优势在于不需要引入外部依赖就可以格式化日期时间,足以满足大部分的业务场景。依赖嘛引入的当然是越少越好了(^_^)。

Intl 除了DateTimeFormat 以外还有其他的格式化功能,有时间我会一一写出来。

拜拜ヾ(•ω•`)o