碎片时间学编程「49]:输入元素的值作为数字获取

大多数时候，HTMLInputElement在事件监听器中访问值时，我们会使用类似e.target.value. 在大多数情况下这很好，但是当我们想要输入的字段是数值时，我们必须对其进行解析并检查该值是否实际有效等。这会变得非常烦人，尤其是在处理具有很多输入的较大表单时字段。

如果我告诉你有一种更简单的方法可以从输入字段中获取数值怎么办？使用HTMLInputElement.valueAsNumber，一个方便的属性，如果输入字段的值可以转换为数字或无法转换，它将返回一个数值或NaN。

const quantityInput = document.getElementById('quantity-input');
let quantity;
// 错误方式：parseFloat() 将字符串转换为数字
quantity = parseFloat(quantityInput.value);
// 正确方式: 返回一个数值
quantity = quantityInput.valueAsNumber;

像往常一样，这带有一个警告，即它仅适用于type="number"输入（尽管这可能是您最需要它的地方）。附带说明一下，我们还可以使用从输入HTMLInputElement.valueAsDate中获取Date对象type="date"，这在某些情况下也可能派上用场。

更多内容请访问：https://www.icoderoad.com