JavaScript Date对象setHours方法设置小时不符合预期问题排查

你遇到的问题核心是字符串与数字的意外拼接导致日期计算完全偏离预期，下面详细拆解原因和修复步骤：

错误根源 #

你注释里提到原本是从下拉框获取selectedDropdown的值，而DOM元素的value属性默认返回字符串类型。如果没有将其转换为数值类型，这段关键代码就会出问题：

new Date().getHours() + selectedDropdown

举个例子：如果当前时间的小时数是10，下拉框的value是字符串"23"，这里的+号会执行字符串拼接，得到结果"1023"，而不是你预期的数值33。

当你把这个超大的字符串传给setHours()时，它会被强制转为数字1023——1023小时等于50天零23小时，从3月29日加上50天左右，自然就跳到了6月4日，完全不符合你“加23小时到3月30日”的预期。

修复方案 #

1. 强制转换为数值类型 #

首先要把下拉框的value转换为数值，推荐用parseInt（带进制参数更严谨）或者Number()做类型转换，同时加容错处理：

// 从下拉框获取值并转为数字，无效时用23做默认值模拟
let selectedDropdown = parseInt(d3.select(".rangeSelect1").node().value, 10) || 23;

2. 优化代码（可选但更严谨） #

避免多次创建new Date()，因为每次调用new Date()都会获取当前时间，可能存在微小时间差，改为只创建一次当前日期实例：

console.log("Present Date " + new Date());
// 只创建一次当前时间的实例
const now = new Date();
// 基于当前时间计算目标日期
const maxDate = new Date(now.setHours(now.getHours() + selectedDropdown));
console.log("selectedDropdown " + selectedDropdown);
console.log("Max Date" + maxDate);

验证效果 #

当selectedDropdown是数值23时，now.getHours() + 23会执行正常的数值加法，比如当前小时是1，结果就是24，setHours(24)会自动将日期进位1天，也就是从3月29日变成3月30日，完全符合你的预期。

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