使用toLocaleDateString格式化日期时间结果不一致的问题求助

我尝试使用JavaScript格式化日期时间，期望始终得到格式为09 May 2020 11.50 pm的结果，但运行相同代码时却出现两种不一致的输出：在空白标签页控制台输出09 May 2020 11.50 pm，在指定网站控制台输出May 9 2020 @ 11:50。

使用的代码如下：

const f = {
  "year": "numeric",
  "month": "short",
  "day": "2-digit",
  "hour": "2-digit",
  "minute": "2-digit",
  "hour12": true
};

const date = '2020-05-09T22:50:21.817Z';

const formatDateTime = (userLocale, dateTimeFormat, date) => {
    const dateDate = new Date(date);

    return dateDate.toLocaleDateString(userLocale, dateTimeFormat)
        .replace(',', ' ')
        .replace(',', ' @');
};

const result = formatDateTime('en-GB', f, date);

console.log(result);

问题原因 #

• Intl API的环境差异：toLocaleDateString的输出格式并非绝对固定，它依赖浏览器的本地化规则，部分网站可能会全局修改Intl.DateTimeFormat的默认行为，或者引入了自定义的本地化polyfill，导致输出偏离标准的en-GB格式。比如你测试的网站可能强制调整了日期格式逻辑，使其更贴近美式风格（月份在前、日期无前置零）。
• 字符串替换的脆弱性：你的代码通过replace处理逗号来调整格式，但不同环境下toLocaleDateString输出的分隔符数量、位置可能不同。标准en-GB环境下输出可能是09 May 2020, 11:50 pm，替换后符合预期；但被修改后的环境输出可能是May 9, 2020, 11:50，替换后就出现了异常格式。

解决方案 #

要避免这种不一致，不要依赖toLocaleDateString的输出做字符串替换，而是采用更可控的方式生成目标格式：

方案1：手动提取日期组件并拼接（完全可控） #

const date = new Date('2020-05-09T22:50:21.817Z');
// 提取各组件并格式化
const day = String(date.getDate()).padStart(2, '0');
const month = date.toLocaleString('en-GB', { month: 'short' });
const year = date.getFullYear();
const hours12 = date.getHours() % 12 || 12; // 处理12小时制的0点为12
const minutes = String(date.getMinutes()).padStart(2, '0');
const period = date.getHours() >= 12 ? 'pm' : 'am';

const result = `${day} ${month} ${year} ${hours12}.${minutes} ${period}`;
console.log(result); // 输出：09 May 2020 11.50 pm

方案2：使用formatToParts提取标准化组件（基于标准API） #

const f = {
  year: "numeric",
  month: "short",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  hour12: true
};
const date = new Date('2020-05-09T22:50:21.817Z');
const formatter = new Intl.DateTimeFormat('en-GB', f);
const parts = formatter.formatToParts(date);

// 提取需要的组件
const day = parts.find(p => p.type === 'day').value;
const month = parts.find(p => p.type === 'month').value;
const year = parts.find(p => p.type === 'year').value;
const hour = parts.find(p => p.type === 'hour').value;
const minute = parts.find(p => p.type === 'minute').value;
const period = parts.find(p => p.type === 'dayPeriod').value.toLowerCase();

const result = `${day} ${month} ${year} ${hour}.${minute} ${period}`;
console.log(result); // 输出：09 May 2020 11.50 pm

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