toLocaleDateString跨浏览器时间格式问题（Firefox与Chrome差异）

我之前也碰到过这个跨浏览器的日期格式化差异问题，刚好可以给你几个原生的解决方案，不用麻烦字符串替换～

解决方案1：显式指定hourCycle配置项 #

这是最简洁的原生方案，你只需要在格式化选项里加上hourCycle: 'h23'，就能强制浏览器用0-23的小时循环（午夜显示为00），完美统一Chrome和Firefox的输出：

const formattedDate = new Date(1156550400000).toLocaleDateString('en-us', {
  weekday: 'long',
  month: 'short',
  day: 'numeric',
  hour: '2-digit',
  hour12: false,
  timeZone: 'UTC',
  hourCycle: 'h23' // 关键配置项
}) + 'z';
console.log(formattedDate); // 现在Chrome和Firefox都会输出 "Saturday, Aug 26, 00z"

原理说明 #

hourCycle是ECMA标准定义的Intl API配置项，用来明确小时的表示规则：

• h23：采用0到23的格式（午夜是新一天的00点）
• h24：采用1到24的格式（午夜算作前一天的24点）

Chrome默认在hour12: false时用了h24，而Firefox默认用h23，显式指定h23就能消除这个差异。

解决方案2：用formatToParts精确控制每一部分 #

如果需要兼容一些非常旧的浏览器（不过现在主流浏览器都支持hourCycle了），可以用formatToParts方法拆分格式化后的各个模块，手动修正小时值，这也是纯原生的操作：

const date = new Date(1156550400000);
const formatter = new Intl.DateTimeFormat('en-us', {
  weekday: 'long',
  month: 'short',
  day: 'numeric',
  hour: '2-digit',
  hour12: false,
  timeZone: 'UTC'
});

// 把格式化结果拆分成独立的部分（比如星期、月份、小时等）
const parts = formatter.formatToParts(date);

// 遍历修正小时部分，如果是24就换成00
const adjustedParts = parts.map(part => {
  if (part.type === 'hour' && part.value === '24') {
    return { ...part, value: '00' };
  }
  return part;
});

// 重新组装成最终字符串
const formattedDate = adjustedParts.map(p => p.value).join('') + 'z';
console.log(formattedDate); // 跨浏览器输出一致的 "Saturday, Aug 26, 00z"

这个方法的好处是能对每一个格式化部分做精细调整，适合需要高度自定义格式的场景。

为什么会有这个差异？ #

其实ECMA的规范并没有强制要求24小时制下午夜必须显示为00还是24，所以浏览器厂商有一定的实现空间。Chrome选择把UTC午夜00:00显示为24（代表前一天的结束），而Firefox显示为00（代表新一天的开始），两种都符合规范，但就造成了跨浏览器的不一致。

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