Angular10+TypeScript3.9：字符串转日期为何多一天？求正确方法

问题场景 #

使用Angular 10和TypeScript 3.9，将仅含日期（无时间）的字符串转换为Date对象时，结果多了一天。仅传入实际日期字符串（包含过去日期），示例代码如下：

const anExampleVariable = "Hello World"
console.log(anExampleVariable)

let valDate = null;
const dateStr = "2022-11-31"
var parts = dateStr.trim().replace(/ +(?= )/g,'').split(/[\s-\/:]/)
valDate = new Date(parts[0], parts[1]-1, parts[2])
console.log(valDate)

输出结果：

[LOG]: "Hello World" 
[LOG]: Date: "2022-12-01T05:00:00.000Z" 

原因分析 #

1. 日期有效性问题：11月只有30天，你传入的2022-11-31是无效日期，JavaScript的Date对象会自动处理日期溢出，将其转换为下一个月的第一天（2022-12-01）。
2. 时区差异影响：用new Date(year, monthIndex, day)构造日期时，会基于本地时区创建对象，而控制台输出的是UTC时区时间。本地时区与UTC的差值会让显示的UTC日期看起来和预期本地日期有偏差，叠加日期溢出的情况后，就出现了输出的结果。

简单转换方法 #

方法1：确保日期有效性+构造本地日期 #

先验证日期字符串的有效性，再构造日期：

const dateStr = "2022-11-30"; // 使用有效日期
const [year, month, day] = dateStr.split('-').map(Number);
const valDate = new Date(year, month - 1, day);
// 输出本地日期格式
console.log(valDate.toLocaleDateString()); // 示例输出："2022/11/30"

方法2：构造UTC日期避免时区干扰 #

如果希望转换不受本地时区影响，直接构造UTC日期：

const dateStr = "2022-11-30";
const [year, month, day] = dateStr.split('-').map(Number);
const valDate = new Date(Date.UTC(year, month - 1, day));
// 输出仅日期部分的ISO格式字符串
console.log(valDate.toISOString().split('T')[0]); // 输出："2022-11-30"

方法3：利用Angular DatePipe辅助处理 #

在Angular组件中，可借助DatePipe直接转换并格式化日期，避免手动处理时区和有效性问题：

import { DatePipe } from '@angular/common';

// 注入DatePipe实例后使用
const dateStr = "2022-11-30";
const formattedDate = this.datePipe.transform(dateStr, 'yyyy-MM-dd');
console.log(formattedDate); // 输出："2022-11-30"

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