Whether you want to display a number as part of a sentence or pass it as a string to a function or API, there is always a need to conversion of number to string. In this article, we will learn about various methods to convert a Number to a String in JavaScript.
What are Strings in JavaScript?
Strings in JavaScript represent a sequence of multiple characters. ‘C’ represents a single character and “Cat” represents a string. In JavaScript, we can declare a string in two ways. Let us look into each method.
We can declare a string in JavaScript by making a string literal using double quotes. The syntax and example for the same is given below:
//declaring a string literal let a="FavTutor" //printing the string console.log(a);
Output:
FavTutorWe can also declare a string in JavaScript by creating a String object:
//declaring a string using String Object
let str=new String("FavTutor")
//printing the string
console.log(str);Output:
[ String: ‘FavTutor’ ]5 Methods to Convert Number to String in JavaScript
In this section, we will look at various techniques that help us convert a JavaScript Number into a String. Let us begin!
1) Using toString() Function
One of the easiest and most concise methods of converting a number to a string is by using the toString() function.
The syntax for the toString() method is given as follows:
let convertedStr = num.toString(radix)where,
convertedStr: variable to store the string that we get from the toString() function.
num: variable representing the number that has to be converted to string
radix: optional parameter, can be 2(binary), 8(octal), 10(decimal), or 16(hexadecimal) according to the requirements
Here’s an example:
//declaring a number let num=9; //printing and checking the type of num variable console.log(num + " " + typeof(num)); //using the toString() method with different radices let convertedStrBin = num.toString(2); let convertedStrOct = num.toString(8); let convertedStrHex = num.toString(16); let convertedStrDec = num.toString(10); //printing and checking type of convertedStr variables console.log(convertedStrBin + " " + typeof(convertedStrBin)); console.log(convertedStrOct + " " + typeof(convertedStrOct)); console.log(convertedStrDec + " " + typeof(convertedStrDec)); console.log(convertedStrHex + " " + typeof(convertedStrHex));
Output:
9 number
1001 string
11 string
9 string
9 stringIn this example, we have used the toString() function to convert the number 9 to a string. We passed various radices and stored the obtained strings in different variables which are printed on the console. We have obtained the desired result.
2) Using String() constructor
String() is a constructor of the class String. It takes any value or variable as the parameter and converts it into a string.
The difference between the toString() function and the String() constructor is that the toString() method can convert the number into different decimal forms and then to a string, i.e. it takes radix as an optional parameter. The String() parameter would simply convert the number to a string in whichever form it is passed.
Let us understand with the help of an example.
//declaring a number let num=9; //printing and checking the type of num variable console.log(num + " " + typeof(num)); //using the String() Constructor let convertedStr = String(num); //printing and checking type of convertedStr variable console.log(convertedStr + " " + typeof(convertedStr));
Output:
9 number
9 string
As shown in the example and the output, the number 9 is converted into the string 9 with the help of the String() constructor.
Let us try converting float into a string:
//declaring a float number let num=9.6; //printing and checking the type of num variable console.log(num + " " + typeof(num)); //using the String() Constructor let convertedStr = String(num); //printing and checking type of convertedStr variable console.log(convertedStr + " " + typeof(convertedStr));
Output:
9.6 number
9.6 stringThis method works with float numbers as well. We have obtained the desired result
3) Concatenating the Empty String
Concatenating an empty string with a number is a simple and efficient way for conversion from number to string. This method involves using the “+” operator to concatenate the number with an empty string. Here’s an example:
//declaring a number let num=9; //printing and checking the type of num variable console.log(num + " " + typeof(num)); //using the "+" operator let convertedStr = "" + num; //printing and checking type of convertedStr variable console.log(convertedStr + " " + typeof(convertedStr));
Output:
9 number
9 stringWe have obtained the desired output. Let us try the same with floating point numbers:
//declaring a Float number let numFloat=9.6; //printing and checking the type of numFloat variable console.log(numFloat + " " + typeof(numFloat)); //using the "+" operator let convertedStr = "" + numFloat; //printing and checking type of convertedStr variable console.log(convertedStr + " " + typeof(convertedStr));
Output:
9.6 number
9.6 string
The method works with both integers and floating-point numbers.
4) Leveraging Template Strings
With the introduction of template strings in ES6, one can inject a number into a string using backticks (`). This approach is called string interpolation. It provides a concise and readable way to convert numbers to strings.
Let us see an example:
//declaring a number
let num=9;
//printing and checking the type of num variable
console.log(num + " " + typeof(num));
//using the template strings
let convertedStr = `${num}`
//printing and checking type of convertedStr variable
console.log(convertedStr + " " + typeof(convertedStr));Output:
9 number
9 string
We have obtained the desired output. Let us try the same with floating point numbers.
//declaring a Float number
let numFloat=9.6;
//printing and checking the type of numFloat variable
console.log(numFloat + " " + typeof(numFloat));
//using the template strings
let convertedStr =`${numFloat}`;
//printing and checking type of convertedStr variable
console.log(convertedStr + " " + typeof(convertedStr));Output:
9.6 number
9.6 string
The method works with both integers and floating-point numbers.
5) Using the toFixed() Method
The toFixed() method is another method of converting a number to a string. But, this method is primarily used when you need to convert a number to a string with a specific number of decimal places. This method rounds the number to the specified precision and returns it as a string.
Syntax of toFixed() Function is as follows:
let convertedStr = num.toFixed(decimal_places)where,
convertedStr: variable to store the string that we get from the toFixed() function.
num: variable representing the number that has to be converted to string
decimal_places: a number that represents the decimal places by which the floating point number has to be rounded.
Let us take an example.
//declaring a Float number let numFloat=9.6743; //printing and checking the type of numFloat variable console.log(numFloat + " " + typeof(numFloat)); //using the toFixed() function let convertedStr = numFloat.toFixed(2); //printing and checking type of convertedStr variable console.log(convertedStr + " " + typeof(convertedStr));
Output:
9.6743 number
9.67 string
We have used the toFixed() method to convert a floating point number to a string. We rounded down the floating point number to 2 decimal places by passing 2 as a parameter in the toFixed() function and finally stored the string obtained from the function in a variable.
Note that toFixed() returns a string representation of the number, not a rounded number value. We have obtained the desired result.
Choosing the Right Method
We have to consider the specific requirements of a project while choosing a method for conversion.
- Performance: Concatenation with an empty string and template strings tend to be faster and hence show better performance.
- Readability: String interpolation and concatenation with an empty string are highly readable and make the code more expressive.
- Decimal Precision: If you need to control the number of decimal places, the toFixed() method is a suitable choice.
One can choose the method that best suits the needs according to these factors. You can now check t another tutorial if you are curious about how to convert string to number.
Conclusion
In this article, we discussed various techniques to convert a number to a string in JavaScript. It is essential to know at least three of them when working in JavaScript as they sometimes come in very handy, enhancing the flexibility and usability of your code.
