Each infrequently I find out about a JavaScript property that I want I had recognized about years earlier — valueAsNumber is considered one of them. The valueAsNumber supplies the worth of an enter[type=number] as a Quantity sort, as a substitute of the standard string illustration whenever you get the worth:

/*
 Assuming an <enter sort="quantity" worth="1.234" />
*/

// BAD: Get the worth and convert the quantity
enter.worth // "1.234"
const numberValue = parseFloat(enter.worth, 10);

// GOOD: Use valueAsNumber
enter.valueAsNumber // 1.234

This property permits us to keep away from parseInt/parseFloat, however one gotcha with valueAsNumber is that it’ll return NaN if the enter is empty.

Thanks to Steve Sewell for making me conscious of valueAsNumber!

PSA: quantity inputs have a `.valueAsNumber` property that you could be discover useful pic.twitter.com/1QwdAW16CC

— Steve Sewell (@Steve8708) March 31, 2022