如何在JavaScript中基于浏览器语言自定义本地化日期格式（Day.js）

核心思路 #

通过获取浏览器的语言标识，匹配预设的日期格式规则，再用Day.js完成格式化输出。

实现步骤与代码示例 #

1. 获取浏览器语言
   提取浏览器语言的前两位（兼容en-US、ko-KR这类带地区后缀的标识）：

   const browserLang = navigator.language.slice(0, 2);
   

2. 定义语言-格式映射表
   明确指定英文和韩语对应的日期格式：

   const dateFormats = {
     en: 'MM/DD/YYYY', // 英文环境：月/日/年
     ko: 'YYYY/MM/DD'  // 韩语环境：年/月/日
   };
   

   注意：Day.js的格式符区分大小写，MM代表两位数月份，DD代表两位数日期，YYYY代表四位数年份，不要和小写的mm（分钟）、dd（星期缩写）混淆。

3. Day.js格式化日期
   引入Day.js后，根据匹配到的格式处理目标日期：

   import dayjs from 'dayjs'; // 若为CDN引入则无需此句
   
   // 可替换为你需要格式化的具体日期，比如dayjs('2024-05-20')
   const targetDate = dayjs();
   // 匹配格式，未命中时默认使用英文格式（可按需调整默认值）
   const selectedFormat = dateFormats[browserLang] || dateFormats.en;
   // 生成格式化后的日期字符串
   const formattedDate = targetDate.format(selectedFormat);
   
   // 渲染到页面指定元素
   document.getElementById('date-container').textContent = formattedDate;
   

常见问题排查 #

• 若之前实现未达预期，检查是否正确截取了语言代码（比如把en-US当成en-US而非en匹配）；
• 确认Day.js的格式符是否正确，避免将月份写成mm（分钟）或日期写成dd（星期）；
• 验证navigator.language的返回值，部分浏览器可能返回带地区的标识，需确保映射表的键与之匹配（或统一截取前两位）。

内容的提问来源于stack exchange，提问作者dfassf