September, 2020
Since most of our programs would rely on user input to carry out certain actions and calculations, it is important that we make sure that the values inputted into our function calls are what is expected by the function without expecting the JavaScript engine to carry out implicit type coercion for us.
In JavaScript, there are different ways of achieving outcomes and in this blog post, we would be analysing the different ways of parsing numeric data from inputs and learning when to use each of the available methods.
First, we would look into a scenario where we have data input and we want to extract the numeric data characters in the input data. To achieve this, JavaScript has two methods for parsing numeric data out of string data. They are parseInt and parseFloat. Let's take a look at both options and see what we can learn from them.
parseInt
From the JavaScript language specification, parseInt is a global function that keeps extracting numeric characters from the beginning of a string argument until it hits a non-numeric character or decimal point in the string and returns the integer equivalent of the extracted numeric characters. If the string argument doesn't start with numeric characters, the function returns the special value NaN (Not a Number) in JavaScript. The function can take a second argument radix which specifies the base the numeric characters in the string should be in e.g base 2, 3 etc. and if the radix argument is not provided, it defaults to base 10. Also, if the numeric characters in the string do not meet the criteria for being part of the specified base, the function returns NaN
parseInt
The parseInt function should be used when you just want to extract integer values from a string or you want to check if the string begins with an integer. It should not be used in situations when your function code requires that its input be strictly a number type or a string that can be implicitly/explicitly converted to a number. This is because it can lead to a failure of your function or your function giving funny results when giving false positives like "234string" as an input number.
parseFloat
As the name implies, this global function doesn't discard the decimal part of numeric characters in a string value. It starts parsing numeric data from the beginning of a string value and also includes all numeric characters after a decimal point in the string value.
However, if there is any non-numeric character inbetween the numeric characters it stops parsing the string and returns the already parsed numeric characters. Also, if the string does not start with a numeric character, it returns the value NaN. It defaults to base 10 for the base of the returned numeric value parsed from the string value.
parseFloat
The parseFloat function should be used when you just want to extract float values from a string or you want to check if a string begins with numeric values. Like its parseInt counterpart, it should not be used for situations where the expected string value should contain only numeric characters as we run the risk of get NaN return values or false positives.
Since we have looked through the ways we can extract numeric characters from string values in JavaScript, it is time to look through a correct way to make sure that all characters in a string input are numeric. A way to do this is to use the Number constructor to create a new number from a string input it is used thus:
// parses a string input with numbers to an actual number
let stringInput = "234.34";
let parsedNumber = Number(stringInput);
console.log(parsedNumber) // 234.34
// the string is not a number
stringInput = "234ahah";
parsedNumber = Number(stringInput);
console.log(parsedNumber) // NaN
As we can see, using the Number constructor to parse string inputs for numbers is the best way to make sure that we don't parse false positives by any means in situations where we have strict rules on inputs just containing numeric characters.
When you want to extract numeric data (whether a float or integer) parseFloat and parseInt are your sure plugs. However, if you strictly expect use input string to contain only numeric characters especially when you provide interfaces for collecting user data like the prompt function, it is expected that you use the Number constructor so as to weed out any false positives.
Thanks for reading this article. Stay tuned for more 🤗. You can always hit me up @ajasho4 on all social media platforms. Hope to see you soon ✊🏽