如何用Day.js的diff方法判断日期是否在未来7天内？代码报错解决

问题根源 #

你写的连续比较表达式 0 < randomDay.diff(today, 'day') < 7 不符合JavaScript的语法逻辑：

• JavaScript会先计算 0 < randomDay.diff(today, 'day')，得到一个布尔值（true 或 false）
• 接着会把这个布尔值和数字7做比较，而布尔值与数字不能直接用 < 或 > 操作符，因此触发类型错误 Operator '>' cannot be applied to types 'boolean' and 'number'

解决方法 #

把连续比较拆分为两个独立的条件，用逻辑与（&&）连接，或者先将差值存入变量再判断，两种方式都可行：

方式1：存储差值变量（更高效） #

import * as React from 'react';
import dayjs from 'dayjs';
import './style.css';

export default function App() {
  const randomDay = dayjs('2022-09-15');
  const today = dayjs('2022-09-12');
  const diffDays = randomDay.diff(today, 'day');
  return (
    <div>{ diffDays > 0 && diffDays < 7 && <h1>该日期在未来7天范围内</h1>}</div>
  );
}

方式2：直接拆分判断条件 #

import * as React from 'react';
import dayjs from 'dayjs';
import './style.css';

export default function App() {
  const randomDay = dayjs('2022-09-15');
  const today = dayjs('2022-09-12');
  return (
    <div>{ randomDay.diff(today, 'day') > 0 && randomDay.diff(today, 'day') < 7 && <h1>该日期在未来7天范围内</h1>}</div>
  );
}

两种方式里，方式1通过变量存储差值，避免了重复调用diff方法，性能更优。

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