{"id":648,"date":"2023-11-27T10:04:55","date_gmt":"2023-11-27T10:04:55","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=648"},"modified":"2023-11-30T09:27:44","modified_gmt":"2023-11-30T09:27:44","slug":"convert-string-to-float-javascript","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/convert-string-to-float-javascript\/","title":{"rendered":"Convert String to Float in JavaScript (5 Easy Ways)"},"content":{"rendered":"\n

A string is nothing but a sequence of characters put together. However, some problems require the conversion of string data type to some other data type. In this article, we will look into Strings in JavaScript and the techniques to convert a String to Float in JavaScript. Let us get started!<\/p>\n\n\n\n

How to Convert String to Float 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. In JavaScript, we can declare a string in two ways.<\/p>\n\n\n\n

There are various techniques that help us convert a JavaScript String to Float. We will discuss 5 different methods with examples.<\/p>\n\n\n\n

1) Using parseFloat() Functions<\/strong><\/h3>\n\n\n\n

The easiest method to convert a string to a float number is by using the parseFloat() function.<\/strong> The parseFloat() function returns a float or NaN.\u00a0<\/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 ‘value’ can be string, float, etc.\u00a0<\/p>\n\n\n\n
Let us see an example:<\/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
In this example, we have first taken a strFloat variable to store a string equal to \u201c13.65\u201d. We checked the type of the variable using the \u201ctypeof()\u201d function. We used the parseFloat() function to convert the string to a float number. We finally check the \u201cconvertedNumFloat\u201d variable type to verify whether the Number() function has converted the string to a float number. <\/p>\n\n\n\n
We have got the desired output as a float.<\/p>\n\n\n\n
2) Using Number() Function<\/strong><\/h3>\n\n\n\n
Another method is the simple \u201cNumber()\u201d function. 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 of using the Number() Function to convert string to float:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet str="15.7";\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.7 string\n15.7 number\n<\/code><\/pre>\n\n\n\n
In this example, we have first taken a str variable to store a string equal to \u201c15.7\u201d. We checked the type of the variable using the \u201ctypeof()\u201d function. We used the Number() function to convert the string to a float number. We finally check the type of the \u201cnum\u201d variable to verify whether the Number() function has converted the string to a float number. We have obtained the desired result.<\/p>\n\n\n\n
3) Using the Unary Plus Operator<\/strong><\/h3>\n\n\n\n
In JavaScript, the unary plus operator (+) is a simple and concise way to convert a string to a float number. Adding the \u201c+\u201d operator before a string in JavaScript automatically converts the string to a numeric value (type conversion).<\/strong><\/p>\n\n\n\n
This method works for the float values in the following 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\n<\/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
4) Subtracting the Number 0 from the String<\/strong><\/h3>\n\n\n\n
The next approach to convert a string to a float number is by subtracting 0 from the string. JavaScript automatically performs a type conversion while subtracting 0 from the string, converting a string to a number.<\/p>\n\n\n\n
Let us see an example:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.65";\n\n\/\/printing the "strFloat" variable and its 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 its 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
5) Multiplying and Dividing the String by 1<\/strong><\/h3>\n\n\n\n
The best approach to convert a string into a float number is by multiplying or dividing the string value by 1. JavaScript automatically performs a type conversion, converting the string into a float number.<\/strong><\/p>\n\n\n\n
Here\u2019s an example of converting a float string number to an actual float number by multiplying it by 1.<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.45";\n\n\/\/printing the "strFloat" variable and its 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 its 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\n<\/code><\/pre>\n\n\n\n
Here\u2019s an example of converting a float string to an actual float number by dividing it by 1:<\/p>\n\n\n\n
\/\/declaring a variable which is a string\nlet strFloat="13.45";\n\n\/\/printing the "strFloat" variable and its 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 its 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\n<\/code><\/pre>\n\n\n\n
We have obtained the desired result.<\/p>\n\n\n\n
These were some of the methods to convert a string to a float. 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 String to Float data type It is essential to know at least three of the methods when working in JavaScript as they come in very handy at times. <\/p>\n","protected":false},"excerpt":{"rendered":"
Understand how to do conversion of string to float in javascript using parseFloat, unary plus operator, number() function etc.<\/p>\n","protected":false},"author":9,"featured_media":650,"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-648","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\/648","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=648"}],"version-history":[{"count":4,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/648\/revisions"}],"predecessor-version":[{"id":701,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/648\/revisions\/701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/650"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}