{"id":434,"date":"2023-11-15T06:21:33","date_gmt":"2023-11-15T06:21:33","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=434"},"modified":"2023-11-20T06:48:34","modified_gmt":"2023-11-20T06:48:34","slug":"convert-string-to-number-javascript","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/convert-string-to-number-javascript\/","title":{"rendered":"Convert String to Number in JavaScript (6 Easy Methods)"},"content":{"rendered":"\n

A string is nothing but a sequence of characters put together. There are multiple operations that can be performed on the string. In this article, we will learn about various techniques to convert String to Number in JavaScript. Let’s get started!<\/p>\n\n\n\n

Revisiting Strings in JavaScript<\/strong><\/h2>\n\n\n\n

Strings in JavaScript represent a sequence of multiple characters.<\/strong> \u2018C\u2019 represents a single character and \u201cCat\u201d represents a string.<\/p>\n\n\n\n

In JavaScript, we can declare a string in two ways. First, we can declare it in JavaScript by making a string literal using double quotes. The syntax is given below:<\/p>\n\n\n\n

\/\/declaring a string literal\nlet a="FavTutor"\n\n\/\/printing the string\nconsole.log(a);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
FavTutor<\/code><\/pre>\n\n\n\n
Second, we can also declare it in JavaScript by creating a String object. An example is given below:<\/p>\n\n\n\n
\/\/declaring a string using String Object\nlet str=new String("FavTutor")\n\n\/\/printing the string\nconsole.log(str);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
[ String: \u2018FavTutor\u2019 ]<\/code><\/pre>\n\n\n\n
6 Methods to Convert String to Number\u00a0in JavaScript<\/strong><\/h2>\n\n\n\n
In this section, we will take a look at various techniques that help us convert a JavaScript String into a Number. Let’s begin!<\/p>\n\n\n\n
1) Using Number() Function<\/strong><\/h3>\n\n\n\n
The easy method to convert a string to a number in JavaScript is by using a simple \u201cNumber()\u201d function. <\/strong><\/p>\n\n\n\n
The syntax of the Number()\u00a0 function is as follows:<\/p>\n\n\n\n
let num = Number(value);<\/code><\/pre>\n\n\n\n
where, <\/p>\n\n\n\n
num<\/strong>: a variable to store the number we get after passing any value as a parameter<\/p>\n\n\n\n
value<\/strong>: can be a string, float, etc. <\/p>\n\n\n\n
Here\u2019s an example to understand it well:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet str="15";\n\n\/\/printing the "str" variable and it's type\nconsole.log(str + " " + typeof(str));\n\n\/\/using the Number() function\nlet num=Number(str);\n\n\/\/printing the "num" variable and it's type\nconsole.log(num + " " + typeof(num));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
15 string\n15 number<\/code><\/pre>\n\n\n\n
In this example, we have first taken a str variable to store a string equal to \u201c15\u201d. We checked the type of the variable using the \u201ctypeof()\u201d function. We used the Number() function for this conversion. We finally check the type of the \u201cnum\u201d variable to verify whether the Number() function has converted it or not. We have obtained the desired result.<\/p>\n\n\n\n
Now, what if we try to pass a character string in the Number() function, instead of a number string? Let us check through an example:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet str="FavTutor";\n\n\/\/printing the "str" variable and it's type\nconsole.log(str + " " + typeof(str));\n\n\/\/using the Number() function\nlet num=Number(str);\n\n\/\/printing the "num" variable and it's type\nconsole.log(num + " " + typeof(num));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
FavTutor string\nNaN number<\/code><\/pre>\n\n\n\n
As the character string does not correspond to any number, we get the output as \u201cNaN\u201d which means \u201cNot-a-Number\u201d. NaN is basically a number that is not logically or legally a Number.<\/p>\n\n\n\n
2) Using parseInt() and parseFloat() Functions<\/strong><\/h3>\n\n\n\n
We can also convert it to a number by using the parseInt() and parseFloat() functions. parseInt() returns a number or NaN. parseFloat returns a float or NaN.\u00a0<\/p>\n\n\n\n
Syntax of parseInt() Function:<\/p>\n\n\n\n
let num = parseInt(value, radix)<\/code><\/pre>\n\n\n\n
where, <\/p>\n\n\n\n
value:<\/strong> can be string, float, etc.\u00a0<\/p>\n\n\n\n
radix(optional):<\/strong> can be 2(binary), 8(octal), 10(decimal), or 16(hexadecimal) according to the requirement. The default is 10.<\/p>\n\n\n\n
Here\u2019s an example of converting a string number to an actual number using the parseInt() function:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strNum="13";\n\n\/\/printing the "strNum" variable and it's type\nconsole.log(strNum + " " + typeof(strNum));\n\n\/\/using the parseInt() function with different radix\nlet convertedNum=parseInt(strNum,10);\nlet convertedNumBin=parseInt(strNum,2);\nlet convertedNumOct=parseInt(strNum,8);\n\n\/\/printing the "convertedNum" variables and their type\nconsole.log(convertedNum + " " + typeof(convertedNum));\nconsole.log(convertedNumBin + " " + typeof(convertedNumBin));\nconsole.log(convertedNumOct + " " + typeof(convertedNumOct));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13 string\n13 number\n1 number\n11 number\n<\/code><\/pre>\n\n\n\n
We have tried out different radices with the parseInt() function and got the desired results.<\/p>\n\n\n\n
The syntax of parseFloat() is as follows:<\/p>\n\n\n\n
let num = parseFloat(value);<\/code><\/pre>\n\n\n\n
where<\/p>\n\n\n\n
value:<\/strong> can be string, float, etc.\u00a0<\/p>\n\n\n\n
Let us perform the parseFloat() function:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.65";\n\n\/\/printing the "strFloat" variable and it's type\nconsole.log(strFloat + " " + typeof(strFloat));\n\n\/\/using the parseFloat() function\nlet convertedNumFloat=parseFloat(strFloat);\n\n\/\/printing the "convertedNumFloat" variable and it's type\nconsole.log(convertedNumFloat + " " + typeof(convertedNumFloat));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13.65 string\n13.65 number\n<\/code><\/pre>\n\n\n\n
We have got the desired output as a float.<\/p>\n\n\n\n
Note that if we pass a float number in the parseInt() function, it will return only the integer part of the float.\u00a0<\/p>\n\n\n\n
3) Using the Math.floor() and Math.ceil() Functions<\/strong><\/h3>\n\n\n\n
The Math.floor() function is a mathematical method in JavaScript that rounds a number down to the nearest integer. The Math.ceil() function is a mathematical method that rounds a number up to the nearest integer.<\/p>\n\n\n\n
Both of these methods can help to convert a string to a number.<\/p>\n\n\n\n
Here\u2019s an example of using the Math.floor() function:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.65";\n\n\/\/printing the "strFloat" variable and it's type\nconsole.log(strFloat + " " + typeof(strFloat));\n\n\/\/converting string to number using Math.floor()\nlet convertedNumFloat=Math.floor(strFloat);\n\n\/\/printing the "convertedNumFloat" variable and it's type\nconsole.log(convertedNumFloat + " " + typeof(convertedNumFloat));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13.65 string\n13 number<\/code><\/pre>\n\n\n\n
Math.floor() rounds down to the nearest integer. So, 13.65 is rounded down to 13. We have obtained the desired result.\u00a0<\/p>\n\n\n\n
Here\u2019s an example of using the Math.ceil() function:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.65";\n\n\/\/printing the "strFloat" variable and it's type\nconsole.log(strFloat + " " + typeof(strFloat));\n\n\/\/converting string to number using Math.ceil()\nlet convertedNumFloat=Math.ceil(strFloat);\n\n\/\/printing the "convertedNumFloat" variable and it's type\nconsole.log(convertedNumFloat + " " + typeof(convertedNumFloat));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13.65 string\n14 number\n<\/code><\/pre>\n\n\n\n
Math.ceil() rounds up to the nearest integer. So, 13.65 is rounded up to 14. We have obtained the desired result. <\/p>\n\n\n\n
4) Using the Unary Plus Operator<\/strong><\/h3>\n\n\n\n
The unary plus operator (+) is a simple and concise way to convert a string to a number in JavaScript. Adding the \u201c+\u201d operator before a string in JavaScript automatically converts the string to a numeric value.<\/strong><\/p>\n\n\n\n
Let us understand with the help of an example:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strNum="13";\n\n\/\/printing the "strNum" variable and it's type\nconsole.log(strNum + " " + typeof(strNum));\n\n\/\/converting string to number using unary operator\nlet convertedNum=+strNum;\n\n\/\/printing the "convertedNum" variable and it's type\nconsole.log(convertedNum + " " + typeof(convertedNum));<\/pre><\/div>\n\n\n\n
Output<\/strong><\/p>\n\n\n\n
13 string\n13 number\n<\/code><\/pre>\n\n\n\n
We have first taken a \u201cstrNum\u201d variable to store a string equal to \u201c13\u201d. We checked the type of the variable using the \u201ctypeof()\u201d function. We finally check the type of the \u201cconvertedNum\u201d variable to verify whether the string has been converted to a number.\u00a0<\/p>\n\n\n\n
We have obtained the desired result. This method works for the float values in the same way.<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.65";\n\n\/\/printing the "strFloat" variable and it's type\nconsole.log(strFloat + " " + typeof(strFloat));\n\n\/\/converting string to number using unary operator\nlet convertedNumFloat=+strFloat;\n\n\/\/printing the "convertedNumFloat" variable and it's type\nconsole.log(convertedNumFloat + " " + typeof(convertedNumFloat));<\/pre><\/div>\n\n\n\n
Output<\/strong><\/p>\n\n\n\n
13.65 string\n13.65 number<\/code><\/pre>\n\n\n\n
The string \u201c13.65\u201d has been converted to a float number 13.65.<\/p>\n\n\n\n
5) Subtracting the Number 0 from the String<\/strong><\/h3>\n\n\n\n
The next approach to convert a string to a number is by subtracting 0 from the string. JavaScript automatically performs a type conversion, converting a string to a number.<\/p>\n\n\n\n
Let’s see an example:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strNum="13";\n\n\/\/printing the "strNum" variable and it's type\nconsole.log(strNum + " " + typeof(strNum));\n\n\/\/converting string to number by subtracting 0 from it\nlet convertedNum=strNum-0;\n\n\/\/printing the "convertedNum" variable and it's type\nconsole.log(convertedNum + " " + typeof(convertedNum));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13 string\n13 number\n<\/code><\/pre>\n\n\n\n
Even for float, this method works. Here’s how:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.65";\n\n\/\/printing the "strFloat" variable and it's type\nconsole.log(strFloat + " " + typeof(strFloat));\n\n\/\/converting string to number by subtracting 0 from it\nlet convertedNumFloat=strFloat-0;\n\n\/\/printing the "convertedNumFloat" variable and it's type\nconsole.log(convertedNumFloat + " " + typeof(convertedNumFloat));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13.65 string\n13.65 number\n<\/code><\/pre>\n\n\n\n
We have obtained the desired output.<\/p>\n\n\n\n
6) Multiplying and Dividing the String by 1<\/strong><\/h3>\n\n\n\n
Another approach is by multiplying or dividing the string value by 1. JavaScript automatically performs a type conversion, converting the string into a number.<\/p>\n\n\n\n
Multiplying by 1<\/strong><\/h4>\n\n\n\n
Here\u2019s an example of converting a string number to an actual number by multiplying it with 1.<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strNum="13";\n\n\/\/printing the "strNum" variable and it's type\nconsole.log(strNum + " " + typeof(strNum));\n\n\/\/converting string to number by multiplying with 1\nlet convertedNum=strNum*1;\n\n\/\/printing the "convertedNum" variable and it's type\nconsole.log(convertedNum + " " + typeof(convertedNum));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13 string\n13 number<\/code><\/pre>\n\n\n\n
This method also works with a float string and returns a float output. Here\u2019s an example.<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.45";\n\n\/\/printing the "strFloat" variable and it's type\nconsole.log(strFloat + " " + typeof(strFloat));\n\n\/\/converting string to number by multiplying with 1\nlet convertedNumFloat=strFloat*1;\n\n\/\/printing the "convertedNum" variable and it's type\nconsole.log(convertedNumFloat + " " + typeof(convertedNumFloat));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13.45 string\n13.45 number<\/code><\/pre>\n\n\n\n
Dividing by 1<\/strong><\/h4>\n\n\n\n
Here\u2019s an example of this conversion by dividing it by 1:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strNum="13";\n\n\/\/printing the "strNum" variable and it's type\nconsole.log(strNum + " " + typeof(strNum));\n\n\/\/converting string to number by dividing by 1\nlet convertedNum=strNum\/1;\n\n\/\/printing the "convertedNum" variable and it's type\nconsole.log(convertedNum + " " + typeof(convertedNum));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13 string\n13 number<\/code><\/pre>\n\n\n\n
This method also works with a float string and returns a float output. Here\u2019s an example.<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.45";\n\n\/\/printing the "strFloat" variable and it's type\nconsole.log(strFloat + " " + typeof(strFloat));\n\n\/\/converting string to number by dividing with 1\nlet convertedNumFloat=strFloat\/1;\n\n\/\/printing the "convertedNum" variable and it's type\nconsole.log(convertedNumFloat + " " + typeof(convertedNumFloat));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
13.45 string\n13.45 number<\/code><\/pre>\n\n\n\n
We have obtained the desired result.<\/p>\n\n\n\n
You can also learn how to convert string to array<\/a> in an easier way.<\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
In this article, we discussed various JavaScript techniques to convert a string to a number. It is essential to know at least 3 of the methods when working in JavaScript as they come in very handy at times. You can check out this article to learn how to convert a set to an array in JavaScript.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Understand how to convert String to Number in JavaScript using 6 different methods along with examples.<\/p>\n","protected":false},"author":9,"featured_media":436,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":null,"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[9],"tags":[11,38],"class_list":["post-434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-javascript","tag-javascript-strings"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=434"}],"version-history":[{"count":4,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/434\/revisions"}],"predecessor-version":[{"id":519,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/434\/revisions\/519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/436"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}