JS實(shí)現(xiàn)Date日期格式的本地化的方法小結(jié)

更新時(shí)間：2024年06月21日 09:26:23 作者：胖蔡

為了更好的更新多語言日期的顯示,所以希望實(shí)現(xiàn)日期的本地化格式顯示要求,常規(guī)的特殊字符型格式化無法滿足顯示要求,這里整理了幾種我思考實(shí)現(xiàn)的本地化實(shí)現(xiàn)功能

引言

為了更好的更新多語言日期的顯示，所以希望實(shí)現(xiàn)日期的本地化格式顯示要求，常規(guī)的特殊字符型格式化無法滿足顯示要求，這里整理了幾種我思考實(shí)現(xiàn)的本地化實(shí)現(xiàn)功能。

通過多方查找，總結(jié)了實(shí)現(xiàn)的思路主要有如下三個(gè)方向：

官方基礎(chǔ)支持：javascript自支持Intl.DateTimeFormat實(shí)現(xiàn)本地化
三方工具：如dayjs使用‘dayjs/plugin/localeData’
自己實(shí)現(xiàn)

DateTimeFormat實(shí)現(xiàn)本地化

JavaScript已經(jīng)提供了可以使用的本地化功能：Intl.DateTimeFormat，只需要傳入當(dāng)前語言和日期基本可以完成本地化的輸出，如下給出一些基礎(chǔ)的實(shí)現(xiàn)：

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
 
// 假定下面輸出的結(jié)果使用了洛杉磯時(shí)區(qū)（UTC-0800，太平洋標(biāo)準(zhǔn)時(shí)間）
 
// 美式英語 (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));
// "???/???/????"
 
// 在日本，應(yīng)用可能想要使用日本日歷，
// 2012 年是平成 24 年（平成是是日本天皇明仁的年號，由 1989 年 1 月 8 日起開始計(jì)算直至現(xiàn)在）
console.log(new Intl.DateTimeFormat("ja-JP-u-ca-japanese").format(date));
// "24/12/19"
 
// 當(dāng)請求可能不支持的語言，如巴厘語（ban）時(shí)，若同時(shí)指定了備用的語言，
// 那么將使用備用的語言輸出（本例為印尼語（id））
console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));
// "19/12/2012"

同時(shí)，提供給我們使用options進(jìn)行格式化的返回，這個(gè)很大程度已經(jīng)足夠使用了：

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
 
// 請求參數(shù) (options) 中包含參數(shù)星期 (weekday)，并且該參數(shù)的值為長類型 (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"
 
// 應(yīng)用可能需要使用世界標(biāo)準(zhǔn)時(shí)間 (UTC)，并且 UTC 使用短名字 (short) 展示
options.timeZone = "UTC";
options.timeZoneName = "short";
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// "Thursday, December 20, 2012, GMT"
 
// 有時(shí)需要更精確的選項(xiàng)
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; // 秒數(shù)的有效數(shù)字?jǐn)?shù)量
console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
// "2:00:00.200 pm AEDT"
 
// 即便是美國，有時(shí)也需要使用 24 小時(shí)制
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"
 
// 要使用選項(xiàng)，但是需要使用瀏覽器的默認(rèn)區(qū)域，請使用 'default'
console.log(new Intl.DateTimeFormat("default", options).format(date));
// "12/19/2012, 19:00:00"
// 有時(shí)需要包含一天的時(shí)段
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標(biāo)簽進(jìn)行全局切換
  const formatter = new Intl.DateTimeFormat(document.documentElement.lang, options)
  return formatter.format(date)
}
const  date = new Date()
formatLocalTime(date) // 2024年3月

三方庫提供的本地化

其他的日期庫沒了解，這里介紹dayjs庫使用的本地化操作，dayjs自生無法直接進(jìn)行本地化，是需要通過插件dayjs/plugin/localeData來配合實(shí)現(xiàn)的。

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'); // 需要加載對應(yīng)的語言包
 
dayjs.extend(localeData);
dayjs.locale(zh);
 
const date = dayjs('2023-01-01');
console.log(date.format('MMMM D, YYYY')); // 一月 1, 2023

自己封裝

原理比較簡單，我們通過解析Date數(shù)據(jù)格式，使用國際化插件配置對應(yīng)的本地化數(shù)據(jù)進(jìn)行格式化填充即可，原理很簡單，但有點(diǎn)費(fèi)時(shí)費(fèi)力，如果實(shí)在無法實(shí)現(xiàn)的時(shí)間格式可以考慮自己封裝實(shí)現(xiàn)，具體實(shí)現(xiàn)不提供了。

到此這篇關(guān)于JS實(shí)現(xiàn)Date日期格式的本地化的方法小結(jié)的文章就介紹到這了,更多相關(guān)JS Date格式本地化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: