如何基于指定locale将对应格式日期字符串转换为JS Date对象

JavaScript原生Date构造函数未提供传入locale解析日期的能力，默认斜杠分隔的日期字符串会按en-US的MM/DD/YYYY规则解析，这是出现月份、日期错位的核心原因。可通过以下两种方案解决：

方案1：原生API实现（无第三方依赖） #

利用ECMAScript自带的Intl.DateTimeFormat国际化API，先获取对应locale的日期组件顺序，再匹配字符串数值构造Date对象，实现代码如下：

function parseLocaleDate(dateStr, locale) {
  // 获取指定locale的日期格式化器
  const formatter = new Intl.DateTimeFormat(locale);
  // 提取年、月、日在格式中的位置
  const parts = formatter.formatToParts(new Date());
  const positionMap = {};
  parts.forEach((part, index) => {
    if (['year', 'month', 'day'].includes(part.type)) {
      positionMap[part.type] = index;
    }
  });
  // 拆分日期字符串中的所有数值
  const dateNums = dateStr.match(/\d+/g).map(Number);
  // 按位置取值构造Date对象，注意JS月份从0开始计数需减1
  return new Date(
    dateNums[positionMap.year],
    dateNums[positionMap.month] - 1,
    dateNums[positionMap.day]
  );
}

// 测试示例
const gbDate = parseLocaleDate('06/07/2021', 'en-GB');
// 输出2021 6 6，月份6对应7月，即2021年7月6日符合预期
console.log(gbDate.getFullYear(), gbDate.getMonth(), gbDate.getDate());

const testDate = parseLocaleDate('23/05/2021', 'en-GB');
// 输出4 23，月份4对应5月，符合预期
console.log(testDate.getMonth(), testDate.getDate());

注意：formatToParts 方法兼容2019年后发布的所有主流浏览器版本，若需兼容更低版本浏览器，可使用第三方库方案。

方案2：成熟第三方库实现（适合已引入日期库的项目） #

优先选择社区广泛验证的日期处理库，不要使用维护度低的小众库，常见用法如下：

• 若使用dayjs：

  import dayjs from 'dayjs';
  import customParseFormat from 'dayjs/plugin/customParseFormat';
  import 'dayjs/locale/en-gb';
  dayjs.extend(customParseFormat);
  
  // L是各locale下短日期格式的通用标识
  const date = dayjs('06/07/2021', 'L', 'en-gb').toDate();
  

• 若使用date-fns：

  import { parse } from 'date-fns';
  import { enGB } from 'date-fns/locale';
  
  // P是各locale下短日期格式的通用标识
  const date = parse('06/07/2021', 'P', new Date(), { locale: enGB });
  

测试d2l-intl未生效大概率是该库本身的实现或版本问题，替换为上述主流库即可解决。

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