如何使用JavaScript生成并显示不受浏览器时区影响的mm:dd:yyyy格式日期字符串

我明白你的困惑——这种时区导致的日期偏移确实容易让人摸不着头脑，尤其是当你只想原样展示服务器返回的日期时。让我先解释为什么会出现这个问题，再给你可行的解决方案：

问题根源 #

当你传入"2022-06-01"（YYYY-MM-DD格式）给new Date()时，JavaScript会默认把它解析为UTC时区的0点。如果你所在的时区是UTC以西（比如你提到的东部夏令时GMT-0400），那么UTC的6月1日0点对应本地时间的5月31日20点，这时候调用toLocaleDateString()就会显示本地时区的日期——也就是5/31/2022。而直接打印Date对象时，会同时显示UTC和本地时间，所以你能看到日期部分还是6月1日，但这其实是UTC的日期，不是本地格式化后的结果。

解决方案 #

方案1：直接使用原字符串（最简单） #

如果你的需求只是展示服务器返回的日期，完全不需要转换成Date对象，直接用服务器返回的"2022-06-01"或者调整格式后展示即可：

const serverDateStr = "2022-06-01";
// 如果需要转换成MM-DD-YYYY格式
const formatted = serverDateStr.split("-").reverse().join("-");
console.log(formatted); // 输出 "06-01-2022"

方案2：创建UTC日期对象并格式化 #

如果必须创建Date对象（比如要做日期计算），那我们可以基于UTC时间构建对象，然后从UTC维度提取日期信息来格式化，彻底避开本地时区的影响：

步骤1：解析原日期字符串

先拆分服务器返回的日期，提取年、月、日：

const serverDateStr = "2022-06-01";
const [year, month, day] = serverDateStr.split("-");

步骤2：创建UTC日期对象

使用Date.UTC()方法创建基于UTC的日期（注意JavaScript的月份是从0开始的，所以要减1）：

const utcDate = new Date(Date.UTC(year, month - 1, day));

步骤3：自定义格式化函数

从UTC日期中提取年、月、日，格式化为你需要的MM-DD-YYYY：

function formatToMMDDYYYY(date) {
  const utcMonth = String(date.getUTCMonth() + 1).padStart(2, '0');
  const utcDay = String(date.getUTCDate()).padStart(2, '0');
  const utcYear = date.getUTCFullYear();
  return `${utcMonth}-${utcDay}-${utcYear}`;
}

console.log(formatToMMDDYYYY(utcDate)); // 输出 "06-01-2022"

替代方案：使用Intl.DateTimeFormat

如果你想利用原生API格式化，可以指定时区为UTC：

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'UTC',
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
// 替换默认的/分隔符为-
const formattedDate = formatter.format(utcDate).replace(/\//g, '-');
console.log(formattedDate); // 输出 "06-01-2022"

这样不管你的浏览器时区是什么，最终展示的日期都会和服务器返回的原始内容一致，不会出现偏移问题。

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