JavaScript toLocaleDateString将null日期转为12/31/1969，如何避免？

问题原因 #

当你把null传给new Date()时，JavaScript会自动将null转换为数字0，对应Unix时间戳的起始点（1970-01-01 UTC）。如果你的本地时区处于UTC以西（比如美国太平洋时区），转换成本地时间就会变成1969年12月31日，所以toLocaleDateString会输出12/31/1969，这显然不是预期结果。

最优解决方案：把空值判断封装到格式化函数中 #

不用每次在组件里重复写条件语句，直接把空值、无效日期的判断逻辑整合到formatDate函数里，所有调用该函数的地方都会自动处理异常情况：

const formatDate = (dateInput: string | null | undefined) => {
  // 处理null、undefined、空字符串的场景
  if (!dateInput) {
    return ""; // 也可根据需求返回"null"或其他占位文本
  }
  
  const date = new Date(dateInput);
  // 额外校验：如果传入的是无效日期字符串，同样返回空
  if (isNaN(date.getTime())) {
    return "";
  }

  return date.toLocaleDateString("en-US");
};

之后组件代码可以大幅简化：

<TableCell align="right">
  {formatDate(customerBodyView?.enrollmentDate)}
</TableCell>

其他可选方式（不推荐） #

如果暂时不想修改现有函数，也可以在调用时提前做空值过滤，但这种方式会产生重复代码，不利于维护：

<TableCell align="right">
  {customerBodyView?.enrollmentDate ? formatDate(customerBodyView.enrollmentDate) : ""}
</TableCell>

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