如何使用date-fns解析多种格式的日期字符串？

问题背景 #

在Moment.js中，可直接传入多个日期格式实现多格式解析，示例代码如下：

let test=['2022-04-29', '04-29-2022','29-04-2022', '4/29/2022', '29/4/2022']

test.forEach((value)=>{
  const dateFormats = ['MM-DD-YYYY', 'DD-MM-YYYY', 'YYYY-MM-DD', 'YYYY-DD-MM'];
  console.log( moment(value, dateFormats).format('MM-DD-YYYY'));      
});

所有日期字符串均可被正确解析。但切换到date-fns后，parse仅支持单个格式，于是我写了临时解决方案：

test(){
    let test=['2022-04-29', '04-29-2022','29-04-2022', '4/29/2022', '29/4/2022']

    test.forEach((value)=>{    
      const formatStyle = this.GetDateFormat(value);
      if(!formatStyle || formatStyle === 'invalid') {
         return 'Invalid Date';
      }
      const temp = parse(value, formatStyle, new Date());
      console.log(format(temp, 'MM-dd-yyyy')); 
    });
}

dateFormatArray = ['MM-dd-yyyy', 'MM/dd/yyyy', 'MM.dd.yyyy',
'dd-MM-yyyy', 'dd/MM/yyyy', 'dd.MM.yyyy', 
'yyyy-MM-dd', 'yyyy/MM/dd', 'yyyy.MM.dd',
'yyyy-dd-MM', 'yyyy/dd/MM','yyyy.dd.MM']

GetDateFormat(date:string):string{
    let format ='invalid';
    this.dateFormatArray.forEach((dateFormat) => {
      if(isMatch(date, dateFormat)){
        format = dateFormat;
      }
    });
    return format;
}

请问在date-fns中，有没有更优的方法来解析多种格式的日期字符串？

更优实现方案 #

date-fns没有内置直接支持多格式解析的API，但可以通过更简洁的方式封装逻辑，替代原有的手动循环判断：

方案1：用find匹配格式后解析 #

利用isMatch结合数组find方法快速定位匹配格式，再执行解析，代码更简洁易读：

import { parse, format, isMatch } from 'date-fns';

const dateFormatArray = [
  'MM-dd-yyyy', 'MM/dd/yyyy', 'MM.dd.yyyy',
  'dd-MM-yyyy', 'dd/MM/yyyy', 'dd.MM.yyyy', 
  'yyyy-MM-dd', 'yyyy/MM/dd', 'yyyy.MM.dd',
  'yyyy-dd-MM', 'yyyy/dd/MM','yyyy.dd.MM'
];

function parseMultiFormat(dateStr: string): string {
  // 找到第一个匹配的日期格式
  const matchedFormat = dateFormatArray.find(format => isMatch(dateStr, format));
  
  if (!matchedFormat) {
    return 'Invalid Date';
  }
  
  const parsedDate = parse(dateStr, matchedFormat, new Date());
  return format(parsedDate, 'MM-dd-yyyy');
}

// 测试调用
const testDates = ['2022-04-29', '04-29-2022','29-04-2022', '4/29/2022', '29/4/2022'];
testDates.forEach(date => console.log(parseMultiFormat(date)));

方案2：通过try/catch尝试解析（跳过前置格式判断） #

如果不想提前调用isMatch做格式校验，也可以直接循环尝试用每个格式解析，捕获解析失败的错误：

import { parse, format } from 'date-fns';

const dateFormatArray = [
  'MM-dd-yyyy', 'MM/dd/yyyy', 'MM.dd.yyyy',
  'dd-MM-yyyy', 'dd/MM/yyyy', 'dd.MM.yyyy', 
  'yyyy-MM-dd', 'yyyy/MM/dd', 'yyyy.MM.dd',
  'yyyy-dd-MM', 'yyyy/dd/MM','yyyy.dd.MM'
];

function parseMultiFormat(dateStr: string): string {
  for (const format of dateFormatArray) {
    try {
      const parsedDate = parse(dateStr, format, new Date());
      // 验证解析结果是否为有效日期
      if (!isNaN(parsedDate.getTime())) {
        return format(parsedDate, 'MM-dd-yyyy');
      }
    } catch (e) {
      // 解析失败，继续尝试下一个格式
      continue;
    }
  }
  return 'Invalid Date';
}

// 测试调用
const testDates = ['2022-04-29', '04-29-2022','29-04-2022', '4/29/2022', '29/4/2022'];
testDates.forEach(date => console.log(parseMultiFormat(date)));

方案对比 #

• 方案1通过前置格式匹配减少无效解析，逻辑清晰，性能略优（尤其当格式数组较长时）。
• 方案2省去前置判断，代码更紧凑，实际场景中性能差异可忽略。

两种方案均比原临时方案更简洁，符合date-fns的函数式设计风格。

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