JS实现Date日期格式本地化的三种方案
本文总结了JavaScript中实现日期本地化的三种主要方式。首先介绍原生API [[wp:a1]] (Intl.DateTimeFormat) 的基础用法与配置选项;其次讲解第三方库 [[wp:a2]] 配合 [[wp:a10]] 插件的使用流程;最后简述手动封装解析Date对象的思路。旨在帮助开发者根据项目需求选择合适的日期格式化方案。
引言
为满足多语言环境下日期显示的需求,实现日期的本地化格式成为关键。由于常规的特殊字符型格式化无法满足复杂的本地化要求,本文整理了几种可行的实现思路。
经过调研,实现日期本地化的思路主要包含以下三个方向:
- 原生支持:利用
javascript内置的Intl.DateTimeFormat功能实现本地化 - 第三方工具:例如使用
dayjs库,并通过‘dayjs/plugin/localeData插件辅助实现 - 手动封装实现
使用 进行本地化
JavaScript 原生提供了强大的本地化功能:。只需传入目标语言代码和日期对象,即可输出符合当地习惯的格式化结果。以下为基础实现示例:
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/localeData2、具体使用方式
// 引入 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 数据格式,并结合国际化插件配置对应的本地化数据进行格式化填充。虽然原理简单,但实现过程较为耗时费力。若其他方案无法满足需求,可考虑此手动封装方式,具体代码实现此处不再赘述。
关于 JS 实现 Date 日期格式本地化的方法小结至此结束。如需了解更多 JS Date 格式本地化相关内容,请搜索本站往期文章或继续浏览后续文章。感谢大家的支持!
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
