Angular 14：使用toISOString()转换日期为何会减一天？

问题原因 #

核心问题是时区差异：Date.toISOString()方法会把本地时间转换为UTC（协调世界时）标准的字符串。比如你处于东八区（UTC+8），当选择的本地日期是2024-05-20 00:00:00时，对应的UTC时间其实是2024-05-19 16:00:00，截取前10位后自然就变成了前一天的日期。

解决方案 #

方案1：基于UTC时间构造目标格式字符串 #

直接提取日期的UTC年、月、日进行拼接，彻底规避时区转换的影响：

private getShortMktByDate() {    
  const year = this.dataDay.getUTCFullYear();
  const month = String(this.dataDay.getUTCMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1补正
  const day = String(this.dataDay.getUTCDate()).padStart(2, '0');
  // 按需求生成yyyy/MM/dd或yyyy-MM-dd格式
  const newDay = `${year}/${month}/${day}`;

  console.log("修正后的newDay", newDay);
  // 后续请求逻辑不变
  this.mktDashService
    .getShortMktByDate(newDay)
    .pipe(takeUntil(this.endSubscribe$))
    .subscribe((mkt: ShortMarketModel[]) => {
      this.shortMktList = mkt;
    })
}

方案2：锁定本地日期的起始时间 #

如果业务逻辑基于本地日期，可先将日期重置为本地时间的当天0点，再转换为ISO字符串：

private getShortMktByDate() {    
  // 创建本地时间当天0点的Date对象
  const localStartOfDay = new Date(this.dataDay.getFullYear(), this.dataDay.getMonth(), this.dataDay.getDate());
  const newDay = localStartOfDay.toISOString().slice(0, 10).replace(/-/g, '/'); // 替换为yyyy/MM/dd格式

  console.log("修正后的newDay", newDay);
  // 后续请求逻辑不变
  this.mktDashService
    .getShortMktByDate(newDay)
    .pipe(takeUntil(this.endSubscribe$))
    .subscribe((mkt: ShortMarketModel[]) => {
      this.shortMktList = mkt;
    })
}

额外优化建议 #

在ngOnChanges中增加非空判断，避免空指针异常：

ngOnChanges() {
  if (this.dataDay) {
    console.log("1 - Dataday", this.dataDay);
    this.getShortMktByDate();
  }
}

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