JavaScript计算5天前日期及条件渲染的正确实现方法

你的代码有三个核心问题导致判断失效：

• 日期比较逻辑错误：toLocaleDateString() 返回的是本地化格式字符串（你当前环境输出为DD/MM/YYYY 格式，比如示例值17/05/2022），字符串比较是逐位对比字典序，和实际日期先后没有对应关系。比如12/05/2024（2024年5月12日）和17/05/2022（2022年5月17日）对比时，字符串判断会认为前者小于后者，和实际时间先后完全相反。
• JSX条件渲染语法错误：你没有用合法的JSX条件判断语法包裹渲染内容，无法正确按条件输出组件。
• 日期解析风险：你接口返回的日期格式是DD/MM/YYYY，直接传入new Date()无法被原生JS正确解析，会得到无效日期对象。

所有日期大小比较统一用时间戳（毫秒级数值） 计算，toLocaleDateString() 只保留给最终面向用户的格式化渲染场景使用，不要参与逻辑判断。

第一步：计算时间阈值与发布日期时间戳 #

// 5天对应的毫秒数
const FIVE_DAYS_MILLISECONDS = 5 * 24 * 60 * 60 * 1000;
// 5天前的时间戳
const fiveDaysAgoTs = Date.now() - FIVE_DAYS_MILLISECONDS;

// 处理接口返回的DD/MM/YYYY格式日期，拆分后构造合法Date对象
const [day, month, year] = job.created.split('/');
// 注意JS Date的月份从0开始计数，所以解析到的月份值要减1
const postedDate = new Date(Number(year), Number(month) - 1, Number(day));
const postedTs = postedDate.getTime();

如果你的接口实际返回的是ISO格式字符串或者时间戳（不是示例里的17/05/2022格式），可以跳过拆分步骤，直接用new Date(job.created).getTime()获取发布时间戳即可。

第二步：修正条件渲染逻辑 #

JSX中用三元运算符判断时间戳大小，时间戳越大代表时间越晚，发布时间戳大于5天前阈值就代表是5天内发布的内容：

{
  postedTs > fiveDaysAgoTs
  ? <Typography>New!</Typography>
  : <span>old</span>
}

如果只需要在5天内发布时显示New标签，不满足条件时不渲染任何内容，可以用逻辑与写法：

{
  postedTs > fiveDaysAgoTs && <Typography>New!</Typography>
}

注意：toLocaleDateString()的输出格式会随用户设备的地区、语言设置变化，永远不要用它的返回值做逻辑判断，仅在最终展示给用户看的时候调用即可。

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