JS实现Date日期格式的本地化的方法小结_Javascript

引言

为了更好的更新多语言日期的显示，所以希望实现日期的本地化格式显示要求，常规的特殊字符型格式化无法满足显示要求，这里整理了几种我思考实现的本地化实现功能。

通过多方查找，总结了实现的思路主要有如下三个方向：

官方基础支持：javascript自支持intl.datetimeformat实现本地化
三方工具：如dayjs使用‘dayjs/plugin/localedata’
自己实现

datetimeformat实现本地化

javascript已经提供了可以使用的本地化功能：intl.datetimeformat，只需要传入当前语言和日期基本可以完成本地化的输出，如下给出一些基础的实现：

const date = new date(date.utc(2012, 11, 20, 3, 0, 0));
 
// 假定下面输出的结果使用了洛杉矶时区（utc-0800，太平洋标准时间）
 
// 美式英语 (us english) 使用  month-day-year 格式
console.log(new intl.datetimeformat("en-us").format(date));
// "12/19/2012"
 
// 英式英语 (british english) 使用 day-month-year 格式
console.log(new intl.datetimeformat("en-gb").format(date));
// "19/12/2012"
 
// 韩国使用 year-month-day 格式
console.log(new intl.datetimeformat("ko-kr").format(date));
// "2012. 12. 19."
 
// 大部分阿拉伯国家使用阿拉伯字母 (real arabic digits)
console.log(new intl.datetimeformat("ar-eg").format(date));
// "١٩‏/١٢‏/٢٠١٢"
 
// 在日本，应用可能想要使用日本日历，
// 2012 年是平成 24 年（平成是是日本天皇明仁的年号，由 1989 年 1 月 8 日起开始计算直至现在）
console.log(new intl.datetimeformat("ja-jp-u-ca-japanese").format(date));
// "24/12/19"
 
// 当请求可能不支持的语言，如巴厘语（ban）时，若同时指定了备用的语言，
// 那么将使用备用的语言输出（本例为印尼语（id））
console.log(new intl.datetimeformat(["ban", "id"]).format(date));
// "19/12/2012"

同时，提供给我们使用options进行格式化的返回，这个很大程度已经足够使用了：

const date = new date(date.utc(2012, 11, 20, 3, 0, 0));
 
// 请求参数 (options) 中包含参数星期 (weekday)，并且该参数的值为长类型 (long)
let options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};
console.log(new intl.datetimeformat("de-de", options).format(date));
// "donnerstag, 20. dezember 2012"
 
// 应用可能需要使用世界标准时间 (utc)，并且 utc 使用短名字 (short) 展示
options.timezone = "utc";
options.timezonename = "short";
console.log(new intl.datetimeformat("en-us", options).format(date));
// "thursday, december 20, 2012, gmt"
 
// 有时需要更精确的选项
options = {
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  timezone: "australia/sydney",
  timezonename: "short",
};
console.log(new intl.datetimeformat("en-au", options).format(date));
// "2:00:00 pm aedt"
 
// 再精确些...
options.fractionalseconddigits = 3; // 秒数的有效数字数量
console.log(new intl.datetimeformat("en-au", options).format(date));
// "2:00:00.200 pm aedt"
 
// 即便是美国，有时也需要使用 24 小时制
options = {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  hour12: false,
  timezone: "america/los_angeles",
};
console.log(new intl.datetimeformat("en-us", options).format(date));
// "12/19/2012, 19:00:00"
 
// 要使用选项，但是需要使用浏览器的默认区域，请使用 'default'
console.log(new intl.datetimeformat("default", options).format(date));
// "12/19/2012, 19:00:00"
// 有时需要包含一天的时段
options = { hour: "numeric", dayperiod: "short" };
console.log(new intl.datetimeformat("en-us", options).format(date));
// 10 at night

将其封装成方法如下：

function formatlocaltime(date) {
  const options = {
    year: 'numeric',
    month: 'long',
  }
 
  // 我这里将lang写在html标签进行全局切换
  const formatter = new intl.datetimeformat(document.documentelement.lang, options)
  return formatter.format(date)
}
const  date = new date()
formatlocaltime(date) // 2024年3月

三方库提供的本地化

其他的日期库没了解，这里介绍dayjs库使用的本地化操作，dayjs自生无法直接进行本地化，是需要通过插件dayjs/plugin/localedata来配合实现的。

1、安装

$ npm install dayjs 
$ npm install dayjs/plugin/localedata

2、使用

// 引入 dayjs 和 locale 插件
const dayjs = require('dayjs');
const localedata = require('dayjs/plugin/localedata');
const zh = require('dayjs/locale/zh-cn'); // 需要加载对应的语言包
 
dayjs.extend(localedata);
dayjs.locale(zh);
 
const date = dayjs('2023-01-01');
console.log(date.format('mmmm d, yyyy')); // 一月 1, 2023