JS實現(xiàn)Date日期格式的本地化的方法小結
引言
為了更好的更新多語言日期的顯示,所以希望實現(xiàn)日期的本地化格式顯示要求,常規(guī)的特殊字符型格式化無法滿足顯示要求,這里整理了幾種我思考實現(xiàn)的本地化實現(xiàn)功能。
通過多方查找,總結了實現(xiàn)的思路主要有如下三個方向:
- 官方基礎支持:
javascript自支持Intl.DateTimeFormat實現(xiàn)本地化 - 三方工具:如
dayjs使用‘dayjs/plugin/localeData’ - 自己實現(xiàn)
DateTimeFormat實現(xiàn)本地化
JavaScript已經(jīng)提供了可以使用的本地化功能:Intl.DateTimeFormat,只需要傳入當前語言和日期基本可以完成本地化的輸出,如下給出一些基礎的實現(xiàn):
const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
// 假定下面輸出的結果使用了洛杉磯時區(qū)(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 日起開始計算直至現(xiàn)在)
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進行格式化的返回,這個很大程度已經(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"
// 應用可能需要使用世界標準時間 (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; // 秒數(shù)的有效數(shù)字數(shù)量
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"
// 要使用選項,但是需要使用瀏覽器的默認區(qū)域,請使用 '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來配合實現(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'); // 需要加載對應的語言包
dayjs.extend(localeData);
dayjs.locale(zh);
const date = dayjs('2023-01-01');
console.log(date.format('MMMM D, YYYY')); // 一月 1, 2023自己封裝
原理比較簡單,我們通過解析Date數(shù)據(jù)格式,使用國際化插件配置對應的本地化數(shù)據(jù)進行格式化填充即可,原理很簡單,但有點費時費力,如果實在無法實現(xiàn)的時間格式可以考慮自己封裝實現(xiàn),具體實現(xiàn)不提供了。
到此這篇關于JS實現(xiàn)Date日期格式的本地化的方法小結的文章就介紹到這了,更多相關JS Date格式本地化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
js模仿微信朋友圈計算時間顯示幾天/幾小時/幾分鐘/幾秒之前
本篇文章主要介紹了js模仿微信朋友圈計算時間顯示幾天/幾小時/幾分鐘/幾秒之前的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
詳解用Webpack與Babel配置ES6開發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開發(fā)環(huán)境,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
js String.prototype.trim字符去前后空格的擴展
這篇文章主要介紹了js String.prototype.trim字符去前后空格的擴展,需要的朋友可以參考下2020-04-04
javascript結合Flexbox簡單實現(xiàn)滑動拼圖游戲
本文給大家分享的是一則使用javascript結合Flexbox簡單實現(xiàn)滑動拼圖游戲的代碼,雖然沒有實現(xiàn)完整的功能,但是還是推薦給大家,喜歡的朋友可以繼續(xù)做完2016-02-02

