A Guide to Convert String to Int in Javascript

Here, you are going to discuss the procedure of converting String data type to Integer data type in JavaScript.

There’s a function called parseInt() in JavaScript, this is used for parsing a string as an argument and it returns an integer of the specified radix (basically the base of the numerical system) as output.

Now, see a code implementation for this in JavaScript:

 function stringToIntScale(x, base) {

  const parsed = parseInt(x, base);

  if (isNaN(parsed)) { return 0; }

  return parsed * 100;

}

console.log(stringToIntScale(' 0xF', 16));

//the expected output is: 1500

console.log(stringToIntScale('321', 2));

//the expected output is: 0

So the syntax of using parseInt() is:

parseInt(string)

parseInt(string, radix)

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

Now, explore the parameters which should be passed to this function:

So the first parameter is String, this is the value that is to be parsed. If the argument which has been passed is not a string, then it is converted to a string using an operation which is called toString .

If in this argument, a white space is leading, then it is ignored.

The second parameter is an optional parameter which is radix:

Radix is the base of the mathematical numeral system. The radix is represented by a range of integers from 2 to 36. So this is how the radix of the string is represented. It will be corrected to a number if the radix value is not a number type.

Now you will look into the return values:

When a string is given as an argument to the parseInt, an integer is parsed.

But in certain cases, it can also be NaN, just like:

  • The modulo 2**32 of the radix is greater than 36 and smaller than 2.
  • The first character which is non-whitespace is not going to convert to a number.

Now, go through the description for this parseInt():

Its basic functionality is:

  • First, the argument is converted to a string.
  • Then the string is parsed.
  • It either returns an Integer or NaN.

The return value is going to be an integer, if the return value is not Nan, and the return value is based on the first argument passed. And based on the radix value, if the radix value is 8, then it converts from octal, if the radix value is 16 then it converts from hexadecimal, a radix of 10 converts from the decimal, and so on.

Numerals greater than 9 are indicated by the English alphabet if the radix is above 10, like A through F is used for hexadecimal numbers (base 16).

Now while converting, if the parseInt() comes across such a character, this is not a numeral within the specified radix, then parseInt ignores it and all of its succeeding characters and ultimately returns the integer value which is parsed up to the point. Numbers to integer values are truncated by the parseInt.

If necessary then a value that is parsed as a radix argument can be corrected to a number.

Like if the value is zero then it is going to be NaN or Infinity and the undefined is corrected to NaN.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

Javascript assumes the following:

  • The radix value is assumed to be 16 and the rest part of the string is parsed as a hexadecimal number if the input string begins with a zero followed by lowercase and an uppercase number.
  • Otherwise, the value is assumed to be 10 (decimal) if the input string is starting with any other value.
  • If the value of radix is not coming under the inclusive range of [2,36], then the parseInt returns NaN.
  • If it becomes impossible to convert the first character cannot be converted to a number, then also parseInt returnsNaN.

If in a particular radix, you need to convert a number to a string literal then you need to use number.toString(radix).

Now, it’s time to explore some examples:

You are going to see some examples using parseInt:

You are going to come across such an example, in which every line is going to return 15 as output.

parseInt('0xF', 16)

parseInt('F', 16)

parseInt('17', 8)

parseInt(021, 8)

parseInt('015', 10)  

parseInt('15,123', 10)

parseInt('FXX123', 16)

parseInt('1111', 2)

parseInt('15 * 3', 10)

parseInt('15e2', 10)

parseInt('15px', 10)

parseInt('12', 13)

Now you will come across an example where each example is going to return NaN.

parseInt('Hello', 8)  

parseInt('546', 2)  

This example is going to -15 in each case:

parseInt('-F', 16)

parseInt('-0F', 16)

parseInt('-0XF', 16)

parseInt(-15.1, 10)

parseInt('-17', 8)

parseInt('-15', 10)

parseInt('-1111', 2)

parseInt('-15e1', 10)

parseInt('-12', 13)

This example is going to return 4 (for very large numbers):

parseInt(4.7, 10)

parseInt(4.7 * 1e22, 10)        // Very large number becomes 4

parseInt(0.00000000000434, 10)  // Very small number becomes 4

This example is going to return 1 as the number is greater than 1e+21 or lesser than 1e-7, both cases are including cases.

parseInt(0.0000001,10);

parseInt(0.000000123,10);

parseInt(1e-7,10);

parseInt(1000000000000000000000,10);

parseInt(123000000000000000000000,10);

parseInt(1e+21,10);

The following example is going to return 224.

parseInt('0e0', 16)

Now, see an example where precision is lost by BigInt values.

parseInt('900719925474099267n')

// 900719925474099300

The numeric separator is not going to work with parseInt.

parseInt('123_456')

// 123

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

Now, look at the examples where radix is corrected to a number.

const obj = {

  valueOf() {return 8}

};

parseInt('11', obj); // 9

obj.valueOf = function() {return 1};

parseInt('11', obj); // NaN

obj.valueOf = function() {return Infinity};

parseInt('11', obj); // 11

parseInt('0e0')  // 0

parseInt('08')   // 8

Now, explore the octal representations with no radix.

Note: The following discussion is not going to work on recent implementation as of 2021.

Many numeric strings beginning with a leading zero as local had been interpreted as many ECMAscript3 implementations as zero.

Let’s see an example that can either give octal or a decimal result.

parseInt('0e0')  // 0

parseInt('08')   // 0, because '8' is not an octal digit.

The implementation of string beginning with a zero as octal characters is no longer allowed by the ECMAscript5 specifications.

So in JavaScript, parseInt plays a very important role to convert the integers to strings.

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Choose The Right Software Development Program

This table compares various courses offered by Simplilearn, based on several key features and details. The table provides an overview of the courses' duration, skills you will learn, additional benefits, among other important factors, to help learners make an informed decision about which course best suits their needs.

Program Name

Full Stack Java Developer Career Bootcamp

Automation Testing Masters Program

Post Graduate Program in Full Stack Web Development

GeoINAllNon-US
UniversitySimplilearnSimplilearnCaltech
Course Duration11 Months11 Months9 Months
Coding Experience RequiredBasic KnowledgeBasic KnowledgeBasic Knowledge
Skills You Will Learn15+ Skills Including Core Java, SQL, AWS, ReactJS, etc.Java, AWS, API Testing, TDD, etc.Java, DevOps, AWS, HTML5, CSS3, etc.
Additional BenefitsInterview Preparation
Exclusive Job Portal
200+ Hiring Partners
Structured Guidance
Learn From Experts
Hands-on Training
Caltech CTME Circle Membership
Learn 30+ Tools and Skills
25 CEUs from Caltech CTME
Cost$$$$$$$
Explore ProgramExplore ProgramExplore Program

Conclusion

As you know, these days along with data structure and algorithms, your development skill is also very important to crack the tech giants. Ultimately, they are going to see how your development skill is and how’s your knowledge about the tech industry. A techie should always be closely conversant with all the technologies which are being used in this tech industry. There are some awesome full-stack development courses for you that you can check out. Surely this will really help you to enhance your skills and will brighten up your future. Enroll in Simplileran's Full Stack Java Developerto start your software devlopment career. Join Simplilearn for free courses on SkillUp to explore dozens of other courses.

Have any questions for us? Leave them in the comments section of this article and we will get back to you at the earliest.

About the Author

Kartik MenonKartik Menon

Kartik is an experienced content strategist and an accomplished technology marketing specialist passionate about designing engaging user experiences with integrated marketing and communication solutions.

View More
  • Acknowledgement
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, OPM3 and the PMI ATP seal are the registered marks of the Project Management Institute, Inc.