Convert String To Number/Array In JavaScript with React Hooks/Vue.JS Examples[Excerpt]
Tags: javascript, react, vue
Published: 2020-05-12 17:48:08

---
title: "Convert String To Number/Array In JavaScript with React Hooks/Vue.JS Examples[Excerpt]"
published: true
description: "In this tutorial, we'll learn by example how to convert a string to the corresponding integer or float number or array of numbers using the built-in JavaScript methods with simple React and Vue.js examples"
tags: javascript, react, vuejs
---

In this tutorial, we'll learn by example how to convert a string to the corresponding integer or float number or array of numbers using the built-in JavaScript methods with simple React and Vue.js examples.

We’ll first start by understanding the methods and tricks used to convert strings to integer and float numbers, or array of numbers and finally see practical examples with simple React, React Hooks and Vue.JS apps.

When passing React props to components, which expect numeral values, in the way we assign regular HTML properties i.e using the  `"`  quotes, string to number conversion is one of the possible ways we pass the accurate values besides using prop types or passing props via curly braces. We'll see that by example later in the article.

## JavaScript’  `parseInt()`  and  `parseFloat()`

JavaScript provides two built-in methods for casting a string to a integer or float number provided that the string contains a valid integer or float. The two methods are  `parseInt()`  and  `parseFloat()`.

However, developers have resorted to use other tricks and techniques, other than the built-in techniques for performance reasons.

## How To Convert String to Number In JavaScript

Let’s get started with a simple plain JavaScript example to demonstrate how to convert a JavaScript string to a number.

Head back to your command-line interface and create a file named  `convert.js`, open it and add the following code:

```js
const num = Number('2020');
console.log(num);

```

Next, go back to the terminal and run the  `convert.js`  script with node if you have it installed in your development machine:

```bash
node convert.js

```

If you don't have node installed on your system, you can also use your browser to run this code. Simply go to DevTools and write the code in the console and press Enter to run it.

`Number`  is JS object that can wrap other objects and provides many built-in methods. Don’t use the constructor i.e  `new Number("2020")`  since this will return a Number object instead of a number value.

## Convert a String to Integer Using  `parseInt()`

JavaScript has a built-in  `parseInt()`  method that converts a string into a corresponding integer. It takes two arguments. The first argument is the string to convert and the second argument is the numeral base.

Go back to the  `convert.js`  file and add the following code:

```js
let year = "2020";
let iyear = parseInt(year, 10);
console.log(iyear);//2020

```

The  `parseInt()`  method takes two arguments, the first argument is the string to parse to an integer and the second argument is the radix or the numeral base, if you are not familiar with this mathematical notion, simply use the ten radix to convert the number to the format used by humans for doing the calculation. There are also other common bases such as 2 for the binary systems used by computers or 16 for the hexadecimal system also mostly used in computer tools.

## Convert a String to Float Using  `parseFloat()`

JavaScript has another built-in method called  `parseFloat()`  that converts a string into a float number:

```js
const pieStr = "3.14";
typeof pieStr
"string"
const pie = parseFloat(pieStr, 10);
typeof pie
"number"

```

This method will parse the string into a float number in the base 10 numeral system.

These two methods are frequently used by developers to convert JavaScript strings to integer and float numbers which are enough for simple code examples but for complete apps, particularly those that need to benefit from each available bit of performance (and frankly which app doesn’t require better performance..), developers resort to other tricks with some JS operators which weren't designed for the first place for type conversion.

Continue reading this [article](https://www.techiediaries.com/javascript/convert-string-number-array-react-hooks-vuejs/).