Imagine you have a user who types their age into a text box on your website. The text box returns the age as text like “25”, but you need it as a number to do math calculations. You cannot add or subtract text directly. You need to convert the string to a number first.<\/p>\n\n\n\n
Converting strings to numbers in JavaScript is one of the most common tasks developers do. Users type numbers into forms, you get numbers from APIs as strings, and you read numbers from files as text. To use these values for calculations, comparisons, or operations, you must convert them to actual numbers.<\/p>\n\n\n\n
If you are learning JavaScript, building web applications, or working with user input, understanding how to convert string to number in javascript is essential. JavaScript provides several built-in methods, each with different behavior and use cases.<\/p>\n\n\n\n
This guide explains all the different ways to convert string to number in javascript, shows you when to use each method, and helps you understand the differences between them.<\/p>\n\n\n\n
\n In JavaScript, all values entered through form fields, prompts, and many API responses are typically received as strings<\/strong>, even when they contain numeric data. This is why string-to-number conversion<\/strong> is such a common operation in web development. Without conversion, expressions like In JavaScript, “25” and 25 look similar but are completely different. “25” is text (a string). 25 is a number. You can concatenate strings but cannot do math with them. “25” + “30” gives “2530”, not 55.<\/p>\n\n\n\n To perform math like addition, subtraction, multiplication, and division, you need actual numbers, not strings. If you try to calculate with strings<\/a>, you get unexpected results.<\/p>\n\n\n\n When users type into text boxes or input fields, the values come as strings. If you ask users to enter their age, birth year, or any numeric data, you receive it as text. You must convert it to a number to use it mathematically.<\/p>\n\n\n\n Many APIs<\/a> return numeric data as text in JSON<\/a> responses. Even though the data represents numbers like prices, quantities, or timestamps, they come as strings. You convert them to numbers for processing.<\/p>\n\n\n\n Comparing “10” > “9” returns false because JavaScript<\/a> compares text alphabetically. But 10 > 9 returns true because it is a numeric comparison. For proper comparisons, convert strings to numbers first.<\/p>\n\n\n\n \n JavaScript<\/strong> is a dynamically typed<\/strong> language, which means a variable can hold different types of values at different points during execution. For example, a variable that initially stores a string can later be reassigned to a number without being redeclared. While this flexibility makes JavaScript highly adaptable, it can also lead to unexpected type-related bugs when values are implicitly converted. This is why experienced developers often perform explicit type conversions<\/strong> using functions such as The parseInt() function converts a string to an integer (whole number). It reads characters from left to right until it hits a non-numeric character, then stops. It returns the number it found, ignoring any decimal part.<\/p>\n\n\n\n let stringValue = “42”;<\/p>\n\n\n\n let numberValue = parseInt(stringValue);<\/p>\n\n\n\n console.log(numberValue); \/\/ Output: 42<\/p>\n\n\n\n parseInt() ignores the decimal part and returns only the integer portion.<\/p>\n\n\n\n let stringValue = “42.95”;<\/p>\n\n\n\n let numberValue = parseInt(stringValue);<\/p>\n\n\n\n console.log(numberValue); \/\/ Output: 42 (decimal part removed)<\/p>\n\n\n\n parseInt() stops at the first non-numeric character and returns the number found up to that point.<\/p>\n\n\n\n let stringValue = “42px”;<\/p>\n\n\n\n let numberValue = parseInt(stringValue);<\/p>\n\n\n\n console.log(numberValue); \/\/ Output: 42 (stops at “p”)<\/p>\n\n\n\n If the string starts with non-numeric characters, parseInt() returns NaN (Not a Number), which means the conversion failed.<\/p>\n\n\n\n let stringValue = “hello42”;<\/p>\n\n\n\n let numberValue = parseInt(stringValue);<\/p>\n\n\n\n console.log(numberValue); \/\/ Output: NaN<\/p>\n\n\n\n parseInt() accepts a second parameter called radix that specifies the base of the number (binary is 2, octal is 8, decimal is 10, hexadecimal is 16).<\/p>\n\n\n\n let binaryString = “1010”;<\/p>\n\n\n\n let numberValue = parseInt(binaryString, 2);<\/p>\n\n\n\n console.log(numberValue); \/\/ Output: 10 (binary 1010 = decimal 10)<\/p>\n\n\n\n let hexString = “2F”;<\/p>\n\n\n\n let numberValue2 = parseInt(hexString, 16);<\/p>\n\n\n\n console.log(numberValue2); \/\/ Output: 47 (hex 2F = decimal 47)<\/p>\n\n\n\n Use parseInt() when you want only the integer part of a number. It is useful for extracting numbers from strings that contain extra characters like CSS <\/a>values (“42px”), percentages (“50%”), or currency with symbols.<\/p>\n\n\n\n\"10\" + \"5\"<\/code> produce \"105\"<\/code> through string concatenation instead of the numeric result 15<\/code>. Functions such as Number()<\/code>, parseInt()<\/code>, and parseFloat()<\/code> allow developers to transform text into numeric values so they can be used in calculations, validations, and data processing.\n <\/p>\n<\/div>\n\n\n\nWhy Convert String to Number?<\/strong><\/h2>\n\n\n\n
\n
\n
\n
\n
\n
Number()<\/code> or String()<\/code>, helping make code more predictable, easier to debug, and less prone to errors.\n <\/p>\n<\/div>\n\n\n\nMethod 1: parseInt() Function<\/strong><\/h2>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n