JavaScript时区差异导致日期偏移1天的问题及解决咨询

问题根源 #

你的代码在切换时区后出现日期偏移，核心问题出在convertDateStringToYYYYMMDD函数的冗余转换逻辑：

1. 原始日期字符串（如2022-10-20）被转成Date对象时，浏览器会按本地时区解析
2. 调用toLocaleDateString生成本地化日期字符串，进一步绑定到当前时区
3. 最后用new Date()解析生成的YYYY-MM-DD字符串时，JS会默认把这个字符串视为UTC时区的午夜，而非本地时区。比如UTC+8的2022-10-20转成UTC时间是2022-10-19T16:00:00Z，切换到UTC-6时区时，这个UTC时间对应的本地时间就是2022-10-19，导致日期偏移。

修复方案 #

直接去掉冗余的字符串转换步骤，改用以下两种方式之一实现跨时区日期一致：

方案一：构造本地时区的当日日期（推荐）

拆分原始日期字符串的年、月、日，直接用new Date(year, month-1, day)构造对象，无论时区如何变化，都会生成本地时区的当日0点：

getRefMileStoneDate(key: string): Date | null {
  if (this.referenceMilestones && this.referenceMilestones[key]) {
    const dateStr = this.referenceMilestones[key];
    const [year, month, day] = dateStr.split('-').map(Number);
    // JS中月份从0开始，需减1
    return new Date(year, month - 1, day);
  }
  return null;
}

这种方式下，无论本地时区是UTC+8还是UTC-6，生成的Date对象都会显示为本地时间的2022-10-20 00:00:00，保证日期显示一致。

方案二：强制按UTC解析日期

如果业务需要统一使用UTC时间，可以在原始日期字符串后拼接T00:00:00Z，强制JS按UTC时区解析：

getRefMileStoneDate(key: string): Date | null {
  if (this.referenceMilestones && this.referenceMilestones[key]) {
    const dateStr = this.referenceMilestones[key];
    return new Date(`${dateStr}T00:00:00Z`);
  }
  return null;
}

这种方式下，不同时区显示的本地时间会不同，但UTC日期始终是2022-10-20，适合需要统一UTC时间的场景。

注意事项 #

• 直接删除convertDateStringToYYYYMMDD函数，它是导致时区偏移的核心原因，完全不需要这个冗余转换步骤
• 测试时切换不同时区，验证生成的Date对象日期是否符合预期

内容的提问来源于stack exchange，提问作者Mr. Mark Tawin