JavaScript日期格式化函数在Chrome与Firefox返回结果不一致？React跨浏览器兼容问题

本次异常是代码语义错误和跨浏览器Date解析逻辑不统一两个问题叠加导致的，具体拆解如下：

• 代码本身存在语义误用，在Chrome环境下被巧合掩盖
  函数本意是提取日期在当月的日号（比如示例中的05日），但错误使用了date.getDay()方法：该方法的作用是获取日期为星期几，返回值范围为0（周日）~6（周六），和当月日号没有必然关联。刚好测试用例中的2021年2月5日是周五，getDay()返回值为5，和实际日号完全相等，因此Chrome环境下结果刚好符合预期。如果换成其他日期，即使Chrome能正确解析输入串，也会出现结果错误的情况。
• Date构造函数对非标准字符串的解析没有统一规范
  ECMAScript仅强制要求Date构造函数可正确解析ISO 8601格式的日期字符串（如2021-02-05T18:29:33），对于其他自定义格式的输入串（如本次的"05-Feb-2021 06:29:33 PM"），完全由各浏览器自行实现解析逻辑，无统一标准：
  • Chrome内置了对带月份缩写、12小时制时间格式的解析能力，可正确生成对应Date对象；
  • Firefox对这类非标准格式的字符串容错性很低，无法完整识别整个输入串，部分解析后生成的Date对象和预期完全偏离：getDay()返回值为1，且因解析不完整，调用toLocaleString获取长月份时出现空值，最终拼接出"1-Feb--2021"的异常结果。

• 修正原生方法的语义误用
  提取当月日号统一使用date.getDate()方法，替代容易混淆的getDay()（星期）方法，从根源上避免逻辑错误。
• 不依赖浏览器的自定义字符串解析能力
  不要直接将自定义格式的日期字符串传入Date构造函数，改用以下流程生成Date对象：
  1. 用正则表达式将输入串拆解为年、月、日、时、分、秒、午别等独立字段；
  2. 手动将月份缩写映射为对应的数字索引（月份索引从0开始）；
  3. 转换12小时制时间为24小时制；
  4. 使用Date的多参数构造方式（new Date(年, 月索引, 日, 时, 分, 秒)）生成对象，这种构造方式在所有浏览器下的行为完全一致，无解析差异。
• 减少对原生本地化API的依赖
  toLocaleString的返回值会受浏览器版本、操作系统本地化配置的影响，跨环境一致性很差。涉及到月份、星期等本地化文本时，手动维护固定的映射表，自行获取对应文本，避免出现格式差异。

修正后的参考代码 #

// 手动维护月份缩写映射，和输入格式完全匹配
const MONTH_ABBR = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

const formatDate = (orderDate) => {
  // 用正则拆解入参，不依赖浏览器的字符串解析逻辑
  const match = orderDate.match(/^(\d{2})-([A-Za-z]{3})-(\d{4})\s+(\d{2}):(\d{2}):(\d{2})\s+(AM|PM)$/);
  if (!match) return '无效日期';

  const [, dayStr, monthAbbr, yearStr, hourStr, minuteStr, secondStr, meridiem] = match;
  const monthIdx = MONTH_ABBR.findIndex(abbr => abbr.toLowerCase() === monthAbbr.toLowerCase());
  if (monthIdx < 0) return '无效日期';

  // 12小时制转24小时制
  let hour = parseInt(hourStr, 10);
  if (meridiem === 'PM' && hour !== 12) hour += 12;
  if (meridiem === 'AM' && hour === 12) hour = 0;

  // 多参数构造Date，跨浏览器行为完全一致
  const date = new Date(
    parseInt(yearStr, 10),
    monthIdx,
    parseInt(dayStr, 10),
    hour,
    parseInt(minuteStr, 10),
    parseInt(secondStr, 10)
  );

  // 用getDate()获取当月日号，替代错误的getDay()
  const day = date.getDate();
  const month = MONTH_ABBR[monthIdx];
  const year = date.getFullYear();
  return `${day}-${month}-${year}`;
};

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