How to convert string to number in javascript

On:

Overview
Converting a string to number is a much required feature in any programming language. Number in javascript can be inferred as an integer(such as 10, 99, 1111 etc.) or a decimal number(such as 5.67, 9.999 etc.), also called floating numbers.
Scenario
Suppose you have a json string coming from a web server to browser. This json string has a field named visitorCount and you want to increment 1 to this value every time the page loads.
Now, if you straightaway get its value and add 1 to it, it will be appended to the value instead of adding 1 to it. Thus an initial value of ‘25‘ in the json string will become 251, while it should have been 26.
Luckily, javascript has many ways to parse a string to a number and this post will guide through those methods.
Method 1: Using parseInt() function
This method is used to convert a string to an integer in javascript.
parseInt() function accepts 2 arguments: a string which is to be converted to an integer and a radix or base of the number system in which the resulting number should be. In order to convert a string to an integer, this value should be 10. Example,

let str = ’21’;
let number = parseInt(str, 10); // result is 21

Tips:

  1. This method removes all leading zeroes from the result. Thus, if the string is ‘000101‘, the result will be 101.
  2. parseInt will keep on converting till it find an alphabetic character or one which cannot be converted to an integer. Example, ‘123$‘ will be converted to 123; ‘10d24‘ will be converted to 10.
  3. If the first character is not convertible to an integer, parseInt will return NaN.
  4. When converting a string in the form of a decimal number, it will return the whole number part and leave the digits after decimal. Example, ‘10.20‘ will be converted to 10.

Method 2: Using Number Object
Number object has a constructor which takes a string argument and returns its integer form. Example,

let str = ‘123‘;
let number = Number(str); // returns 123

Tips:

  1. Number object will only convert a string when it is fully convertible to an integer otherwise it will return NaN. Thus, ‘12km‘, ‘5t7‘, ‘kit‘ all be NaN.
  2. A string in decimal number format is completely converted to its integer equivalent. Thus, ‘10.23‘ will be converted to 10.23.
  3. An empty string given inside Number constructor will result in 0. Thus Number(‘ ‘) will be 0.
  4. First two letters of a string can be provided as the base from which the string should be converted to an integer. Thus, ‘0x1‘ will be converted to a number from hexa decimal form(result will be 16), ‘0b11‘ will be converted from binary format(result will be 3), ‘0o12‘ will be converted from octal format(result will be 10).

Method 3: Using Unary plus
Prepend any string which is in numeric format with plus(+) and the result will be a number. Example

let str = ‘100‘;
let num = +s;
console.log(typeof num); //prints number

Tips:

  1. Unary operator will not convert a string which contains a character not convertible to an integer and will return NaN. Examples are 12k, 30ps, ft56 etc.
  2. Unary operator also converts string with decimal values to their corresponding numeric format. Example, ‘123.45‘ will be converted to 123.45.
  3. Unary operator truncates any leading zeroes from the string. Example, ‘00129‘ will be converted to 129.

Method 4: Using Math.round
round function of Math class takes a string as argument and converts it into an integer. Besides converting a string to an integer, it can also round a decimal string to nearest whole number. Example,

let str = ‘123’;
let num = Math.round(str);  //returns 123
let decimalstr = ‘45.67’
let roundedValue = Math.round(decimalstr); //returns 46

Method 5: Using parseFloat() function
This method accepts a string argument and returns the number representation of the string. Example,

let str = ‘3.192’;
let num = parseFloat(str);
console.log(num);             // prints 3.192
console.log(typeof num); // prints number

Note that when you check the type of the converted string using javascript typeof operator, it evaluates to number.
If the string starts with a number and contains alphabetic characters afterwards, then parseFloat converts the numeric part to a number and strips off the alphabetic characters. Example,

let str = ‘3.192sdad’;
let num = parseFloat(str);
console.log(num);             // prints 3.192
console.log(typeof num); // prints number

If the string starts with alphabets or is a mix of alphabets and numbers, then parseFloat will return NaN. Example,

let str = ‘random3.192’;
let num = parseFloat(str);
console.log(num);             // prints NaN

Tips:

  1. Math.round converts a string only when it is completely in numeric format. If there is a single character which cannot be converted to an integer, then it returns NaN.
  2. It also strips of all the leading zeroes from the string while converting. That is, ‘000123‘ will be converted to 123.
  3. If the first two characters of the string are ‘0o’, then Math.round considers it as an octal number and converts it to an integer accordingly. Example, if the string is ‘0o12‘, then the resulting integer will be 10.
  4. If the first two characters of the string are ‘0x’, then Math.round considers it as a hexadecimal number and converts it to an integer accordingly. Example, if the string is ‘0x12‘, then the resulting integer will be 18.

Hope this post helped you out. Keep visiting for more such stuff.

Leave a Reply