在使用
input元素且type属性值不是默认的text的时候（number、date）, 获取输入数据的参数e.target.value为string类型，在业务逻辑中往往需要将string转换为number、date，常规的转换方式为parseFloat、parseInt、Date.parse等方法转换，现在更推荐的方式是使用valueAsNumber、valueAsDate方法。
number类型 <input />
<!-- rest html content -->
<input type="number" id="common-input" />
<script>
const inputStr = document.querySelector('input.common-input')
const numberValue = parseInt(inputStr)
// ...rest javascript code
</script>
<!-- rest html content -->
<input type="number" id="recommand-input" />
<script>
const inputStr = document.querySelector('input.recommand-input')
const numberValue = inputStr.valueAsNumber
if (!isNaN(numberValue)){
// ...rest javascript code
}
</script>
date类型 <input />
<!-- rest html content -->
<input type="date" id="common-input" />
<script>
const inputStr = document.querySelector('input.common-input')
const dateValue = new Date(Date.parse(inputStr))
// ...rest javascript code
</script>
<!-- rest html content -->
<input type="date" id="recommand-input" />
<script>
const inputStr = document.querySelector('input.recommand-input')
const dateValue = inputStr.valueAsDate
if (inputStr){
// ...rest javascript code
}
</script>
说明
valueAsNumber、valueAsDate是HTMLInputElement提供的属性，因此在原生Javascript、React、Vue中都可以使用！