带数字的 e.target.value - Javascript

在 Javascript 中，我们可以通过事件对象的 e.target.value 属性来获取表单元素的值。然而，当表单元素的值中包含数字时，我们需要注意一些事项。

表单元素的值中包含数字

当表单元素的值中包含数字时，e.target.value 返回的是一个字符串类型的值。例如：

<input type="text" value="123" />

当我们通过监听 input 元素的 change 事件来获取它的值时：

document.querySelector('input').addEventListener('change', function(e) {
  console.log(e.target.value); // 输出 "123"
});

通过 parseInt 转换为数字类型

如果我们需要使用表单元素的值进行数字计算时，需要先将其转换为数字类型。我们可以使用 JavaScript 内置的 parseInt() 函数来对字符串进行转换。例如：

document.querySelector('input').addEventListener('change', function(e) {
  const value = parseInt(e.target.value);
  console.log(value); // 输出 123
});

为 parseInt 设置进制

使用 parseInt() 函数时，还需要注意一个参数：radix。该参数设置字符串要被解析的数字的基数（进制）。默认情况下，parseInt() 函数将数字解析为十进制的数值。如果字符串以 "0x" 开头，将会被解析为十六进制的数值。

document.querySelector('input').addEventListener('change', function(e) {
  const value1 = parseInt(e.target.value); // 将 "123" 解析为十进制的数值
  const value2 = parseInt("10", 2); // 将二进制的 "10" 解析为十进制的数值，值为 2
});

结论

在获取带数字的表单元素的值时，需要将其转换为数字类型，同时注意进制。parseInt() 函数是转换数字类型的一个常用方式。