JavaScript offers a powerful toolkit for working with various data types. However, sometimes JS developers may face a need to convert the values from one type into another. In most cases operators and functions perform such conversions automatically. For example, the alert() method will transform any passed value to a string without any additional actions by a programmer.
There are situations when explicit conversion of the values is needed. There are several ways to transform a number into a string in JavaScript.
Concatenation
One of the simplest ways to convert a numeric value into a string is by using concatenation which is the process of connecting one thing with another. In JavaScript the word “concatenation” is used when talking about strings. The process of adding one string to another using a simple plus operator will result in their joining instead of the actual mathematical operation. For example 5+3 will return 53 instead of 8.
This way you can use concatenation for converting numbers into a string. In the following code there is a variable of the number type. A plus operator added a string to this variable and thus, created a new string value which you can check using a typeof() operator.
const number = 7;
const string = number + "days of the week";
console.log(typeof string); // logs "string"You can go further and use an empty string in order to convert a number itself without adding any text as illustrated in the example below.
const number = 7;
const string = number + '';
console.log(typeof string); // logs "string"The String() function
An alternate way to convert a number into a string is by using the built-in String() function. It accepts the numeric value as a parameter and returns its string representation.
For example, let’s create a variable and assign a numeric value to it. Using the typeof()operator you can check the type of the value. In this case it’s a number. Then, you can pass this value to the String() function and assign the result to the same variable. After checking its type with the typeof() operator again, you can see that it turned into a string.
The code below illustrates the use of the String() function.
const value = -32;
console.log(typeof value); // logs "number"
const value1 = String(value);
console.log(typeof value1); // logs "string"
const value2 = ${value}; // alternative way of casting value to string
console.log(typeof value2); // logs "string"The toString() method
JavaScript has a special object Number, which contains the toString() method allowing you to convert a number into a string. All the numbers in JS can be automatically transformed into a Number object which makes the use of its methods possible.
The syntax of the toString() method is simple:
const number = 7;
console.log(typeof number.toString()); // logs "string"This method can accept one optional parameter. It’s used in the situations when there is a need to explicitly specify the base of a number system (or radix) in which the value is represented. The decimal system is taken by default.
The code below illustrates different cases of using the toString() method and its arguments. We see that it can convert a number into a string, as well as represent it in various number systems.
const number = -20;
console.log(number.toString(2)); // logs "-10100"
console.log(number.toString(8)); // logs "-24"
console.log(number.toString(16)); // logs "-14"toFixed() and toExponential() methods
For the situations when you need to specify the number of digits after the point, you can use another convenient method of the Number object. That is the toFixed(). The example of its use and the correct syntax are illustrated below.
const number = 30.000;
const string = number.toFixed();
console.log(typeof string); // logs "string"
console.log(string); // logs "30"Note that all digits after the point are omitted in the string representation of the number. It happens because this method accepts one optional parameter - the number of digits after the point that you want to keep. It takes 0 by default. Thus, we can state that the toFixed() method can convert a number into a string, as well as perform a rounding operation.
Keep in mind that if the amount of digits after the decimal point is less than the number you have specified in the arguments, the method will add zeros to its string representation in order to match the desired pattern. A few more cases of using this method and its arguments are illustrated in the code below.
const number = 30.489;
console.log(number.toFixed(2)); // logs "30.49"
console.log(number.toFixed(5)); // logs "30.48900"
console.log(number.toFixed(1.2)); // logs "30.5"In case you want to represent the number in an exponential form, use the toExponential() method which also belongs to the Number object. Its use is very simple as well.
const number = 30.489;
console.log(number.toExponential()); // logs "3.0489e+1"By default this method keeps all the digits after the point, but you can change that by passing a parameter which will specify the amount of digits you would like to keep. Keep in mind that an exponential form of the number allows only one digit before the point.
The operating principle of the toExponential() method and its parameters is very similar to the toFixed() method. Below are a few examples illustrating that.
const number = 30.489;
console.log(number.toExponential(2)); // logs "3.05e+1"
console.log(number.toExponential(6)); // logs "3.048900e+1"
console.log(number.toExponential(1.2)); // logs "3.0e+1"Finally, there is one more method of the Number object allowing you to convert a number into a string. That is toPrecision(). It accepts an optional parameter that indicates the amount of all the digits you want to keep (unlike the toFixed() method which allows you to modify the number of digits after the point only).
The following code illustrates two different cases of using the toPrecision() method. It can either round the number (if the passed parameter is bigger than the amount of digits before the point) or represent it in an exponential form.
const number = 3078.489;
console.log(number.toPrecision(5)); // logs "3078.5"
console.log(number.toPrecision(2)); // logs "3.1e+3"