使用JavaScript计算两个日期差值时出现NaN问题排查求助

嘿，我一眼就瞅到问题所在啦！你碰到的NaN报错，根源在于JavaScript的Date构造函数对dd/mm/yyyy格式的字符串解析不友好。

问题原因 #

默认情况下，new Date("dd/mm/yyyy")这种写法，大部分浏览器会把它当成美式日期mm/dd/yyyy来解析。如果你的日期里“日”的部分大于12（比如13/01/2018），浏览器直接解析失败，得到一个Invalid Date，调用getTime()就会返回NaN，后续的差值计算自然也跟着变成NaN。就算你的日期“日”小于等于12，解析出来的结果也可能和你预期的不一样——比如你写的09/01/2018，会被当成9月1日而不是1月9日，这也会导致计算结果完全错误！

修复方案 #

我们得手动把dd/mm/yyyy格式的字符串拆分成日、月、年，然后用new Date(year, monthIndex, day)来创建日期对象（重点注意：JavaScript的月份是从0开始的，1月对应0，12月对应11）。

给你修改后的可运行代码：

// 写个小工具函数，专门解析dd/mm/yyyy格式的日期
function parseDDMMYYYY(dateStr) {
  const [day, month, year] = dateStr.split('/');
  // 月份要减1，因为Date的月份索引从0开始计数
  return new Date(year, month - 1, day);
}

var start = "01/01/2018"; //dd/mm/yyyy格式
var end = "09/01/2018";
var date1 = parseDDMMYYYY(start);
var date2 = parseDDMMYYYY(end);

var timeDiff = Math.abs(date1.getTime() - date2.getTime());
var diffDays = Math.ceil(timeDiff / (24 * 3600 * 1000));
alert(diffDays); // 现在会输出8，完全符合预期

额外补充说明 #

• 用split('/')拆分后得到的是字符串类型的日、月、年，传给Date构造函数时会自动转成数字，不用额外parseInt也能正常工作，要是追求严谨性也可以加上。
• Math.abs是为了确保差值永远是正数，不管start和end哪个在前都不会出错。
• 这里的Math.ceil在日期差值刚好是整数天时，结果和直接整除一致；如果有剩余时间（比如跨天的时间差），会向上取整成完整的一天，刚好匹配你的需求。

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