你还在拼接new Date()来格式化时间吗?快来试试toLocaleDateString

tommyrunner
639 阅读5分钟 
new Date().toLocaleDateString() // '2023/6/9'

兼容性

2.png

这里可以看到 toLocaleDateString 的兼容性还是可以的。

  • 虽然API浏览器兼容性还可以，但不同浏览器内核输出的值可能有几率不一致。
new Date().toLocaleTimeString("zh-cn", {
    hour: "numeric",
    minute: "numeric",
})
  • 在 chrome浏览器中
// '11:49'
  • 在微信嵌入浏览器中
// '上午 11:49'
  • 不要问我为什么知道，暂时的解决方案使用正则去掉中文。
  • 虽然有亿些弊端，但还是挺香的，往下看吧。

参数

toLocaleDateString(locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;

LocalesArgument

参数一，是一个字符串，代表的是不同语言环境和区域，也可以代表设置不同的输出格式。

  • zh-CN: 中国大陆的简体中文
  • zh-CN-u-ca-chinese: zh-CN（中国大陆），并使用 -u-ca-chinese 后缀来指定日历系统为中国农历。
  • zh-TW: 台湾地区的繁体中文
  • en-US: 美国地区的英语
  • en-GB: 英国地区的英语
  • de-DE: 德国地区的德语
  • ja-JP: 日本地区的日语
  • ko-KR: 韩国地区的韩语
  • ...
new Date().toLocaleDateString('zh-CN') // '2023/6/9'
new Date().toLocaleDateString('af') // '2023-06-09' 代表是yyyy-MM-dd
new Date().toLocaleDateString('az') // '2023-06-09' 代表是yyyy-M-d
new Date().toLocaleDateString('zh-CN-u-ca-chinese') // '2023年四月22' 不足之处就是默认获取的农历日期格式不统一，当然可以通过参数二配置。

具体格式也可以通过第二个参数配合自定义输出。

DateTimeFormatOptions

这是lib.es5中的类型

interface DateTimeFormatOptions {
        localeMatcher?: "best fit" | "lookup" | undefined;
        weekday?: "long" | "short" | "narrow" | undefined;
        era?: "long" | "short" | "narrow" | undefined;
        year?: "numeric" | "2-digit" | undefined;
        month?: "numeric" | "2-digit" | "long" | "short" | "narrow" | undefined;
        day?: "numeric" | "2-digit" | undefined;
        hour?: "numeric" | "2-digit" | undefined;
        minute?: "numeric" | "2-digit" | undefined;
        second?: "numeric" | "2-digit" | undefined;
        timeZoneName?: "short" | "long" | "shortOffset" | "longOffset" | "shortGeneric" | "longGeneric" | undefined;
        formatMatcher?: "best fit" | "basic" | undefined;
        hour12?: boolean | undefined;
        timeZone?: string | undefined;
    }

  • localeMatcher：可选项，决定如何匹配区域设置信息。当未指定此选项时，会默认为 'best fit'。

    • 'lookup'：表示使用最接近区域设置的地区来进行格式化。
    • 'best fit'：基于一系列标准算法，选择最合适的区域设置进行格式化。

  • weekday：可选项，表示周几的显示方式。

    • 'long'：完整的星期名称（例如：星期一）
    • 'short'：缩写形式的星期名称（例如：周一）
    • 'narrow'：短格式（单个字符）的星期名称（例如：一）

  • era：可选项，表示年代的显示方式。

    • 'long'：完整的年代名称，比如公元后或者西元前
    • 'short'：缩写形式的年代名称，比如 AD 或者 BC
    • 'narrow'：短格式（单个字符）的年代名称

  • year：可选项，表示年份的显示方式。该选项仅在 'numeric' 或 '2-digit' 被指定时才有意义。

    • 'numeric'：阿拉伯数字表示年份（例如：2021）
    • '2-digit'：两位数字表示年份（例如：21）

  • month：可选项，表示月份的显示方式。

    • 'numeric'：阿拉伯数字表示月份（例如：9）
    • '2-digit'：两位数字表示月份（例如：09）
    • 'long'：完整的月份名称（例如：九月）
    • 'short'：缩写形式的月份名称（例如：九月）
    • 'narrow'：短格式（单个字符）的月份名称（例如：九）

  • day：可选项，表示日期的显示方式，其值与 year 参数类似。

  • hour：可选项，表示小时数的显示方式，其值也与 year 和 day 类似。

  • minute：可选项，与 hour 类似，表示分钟数的显示方式。

  • second：可选项，与前面几个参数类似，表示秒数的显示方式。

  • timeZoneName：可选项，具有多种值代表不同的含义。

    • 'short'：只显示时区缩写名称（例如：GMT）
    • 'long'：完整的时区名称（例如：Greenwich Mean Time）
    • 'shortOffset'：只显示时区缩写名称和偏移时间（例如：GMT+8）
    • 'longOffset'：完整的时区名称和偏移时间（例如：GMT+08:00）
    • 'shortGeneric'：只显示时区缩写名称，但编码为代表性的位置（例如：China）
    • 'longGeneric'：完整的时区名称，但编码为代表性的位置（例如：Beijing Time）

  • formatMatcher：可选项，决定如何查找最匹配的日期与时间格式化字符串。默认值为 'best fit'。

    • 'best fit'：基于标准算法进行字符串格式化。
    • 'basic'：以一种较简单的方式进行字符串格式化。

  • hour12：可选项，表示是否使用12小时制。默认值为 true。

  • timeZone：可选项，这个值可带入一个时区名称来特别指定哪个时区的本地时间和日期将被格式化成其他时区的名称。如果未提供此参数，则使用宿主环境中ECMAScript代码正在运行的系统上的当前时区。

想必这么多参数有点懵，下面举几个常用栗子。

常用栗子

全时间格式

new Date().toLocaleDateString('zh-CN',{
    weekday:"long",
    year: "numeric",
    month: 'numeric',
    day: 'numeric',
    hour:"numeric",
    minute:"numeric",
    second:"numeric",
}) // '2023年6月9日星期五 11:35:00'

中文隔断日期+周期

new Date().toLocaleDateString('zh-CN',{
    weekday:"long",
    year: "numeric",
    month: 'numeric',
    day: 'numeric',
}) // '2023年6月9日星期五'

但我们配置了weekday为long时，就会自动转为中文隔断。

公元+年份

new Date().toLocaleDateString('zh-CN',{
    year: "2-digit",
    era:"long",
})// '公元23年'

农历的 月-日

new Date().toLocaleDateString('zh-CN-u-ca-chinese',{
  year: undefined, // 去掉年份
  month: 'numeric',// 月份使用阿拉伯
  day: 'numeric' // 日同理
}) // '4-22'

农历年类型+月份

new Date().toLocaleDateString('zh-CN-u-ca-chinese',{
    year: "numeric",
    month: "long",
}) // '2023癸卯年四月'

具体配置还需要自己通过业务场景配置，必要的时候可以通过replaceAll去替换。

附

类似API

  • toLocaleString
new Date().toLocaleString() // '2023/6/9 11:44:23'
  • toLocaleTimeString()
new Date().toLocaleTimeString() // '11:44:43'

相对与toLocaleDateString配置可能没有那么丰富。

如果设计到更复杂 的自定义或转换问题推荐个轮子moment.js。

avatar
文章
阅读
粉丝