JavaScript is sort of flexible and offers many alternative ways to convert between data types. On this short tutorial, we’ll take a look at how you may convert a number to a string in JavaScript. It is advisable to do that so as to make number data more readable for users — for instance, to display the number as a part of a sentence.
This tutorial explores 4 ways to convert a number to a string in JavaScript. We recommend different approaches depending in your specific needs and use case:
- String Interpolation: When inserting a number value inside a string. For instance, displaying text on a webpage like “You will have used 7 credits out of 24”. You may also use Concatenation but beware.
- String or toString(): When changing the kind of a number value to a String. For instance, using numbers as inputs to functions or APIs that expect a string. String and toString() are mostly the identical but treat undefined and null variables in a different way.
You may also have an interest to how one can convert a string to a number if you happen to’re trying to do the other motion.
Convert a Number to a String Using Interpolation
Interpolation might be essentially the most readable way of using numbers in strings. As a substitute of manually converting the number to a string, you may insert it right into a string using this method.
To make use of interpolation, wrap a string with backticks (`) as a substitute of quotation marks (” or ‘). Then, within the string, you may insert any variable using`${}` as a placeholder. This is known as a template literal and has a wide range of other great advantages.
For instance:
const number = 99;
console.log(`${number} percent of individuals love JavaScript`);
For the reason that string that’s being logged into the console is wrapped with backticks, you may insert a variable into the string using ${}.
You may see the instance in motion in the next CodePen demo.
See the Pen
String Interpolation in JavaScript by SitePoint (@SitePoint)
on CodePen.
Convert a Number to a String Using String Concatenation
The second approach is string concatenation. You may convert a number to a string using the + operator.
For instance:
console.log(10 + “USD”);
console.log(10 + “”);
See the Pen
Convert Number to String with Concatenation by SitePoint (@SitePoint)
on CodePen.
Although this approach is efficient (because it requires the smallest amount of code), it may possibly make the code less readable.
A string concatenation caveat
When using this approach with multiple number, an unexpected result might occur.
For instance:
const a = 2000;
const b = 468;
console.log(a + b + ” motorway”);
Since a + b is evaluated first before reaching the string, the operation is a numerical addition fairly than a string concatenation. Once a string variable or literal is reached, the operation becomes a string concatenation. So, the result’s 2468 motorway.
Nonetheless, try changing the code to the next:
const a = 2000;
const b = 468;
console.log(“it’s “ + a + b + ” motorway”);
Because “it’s” + a is evaluated first, the + operator is used for string concatenation for the remainder of the expression. So, as a substitute of an addition operation between a and b just like the previous example, it becomes a string concatenation operation between the 2.
This will be solved using parentheses:
const a = 2000;
const b = 468;
console.log(“it’s “ + (a + b) + ” motorway”);
The addition between a and b is performed first, which ends up in the addition operation between the 2 variables. Then, string concatenation is used for the remainder of the expression because the first operand is “it’s”.
Convert a Number to a String Using toString
The third approach is using the toString() method. This method is out there for all JavaScript data types, including numbers. It converts the worth of the number it’s used on and returns it.
For instance:
const number = 10;
console.log(number);
console.log(typeof number);
const numberStr = number.toString();
console.log(numberStr);
console.log(typeof numberStr);
This instance shows the identical result as that of the primary approach. You may also see it in motion in the next CodePen demo.
See the Pen
JS Convert Number to String using toString() by SitePoint (@SitePoint)
on CodePen.
Convert a Number to a String Using String
The fourth approach is using the String() constructor function. This function accepts the variable to convert as a primary parameter. It converts the parameter to a string and returns it.
For instance:
const number = 10;
console.log(number);
console.log(typeof number);
const numberStr = String(number);
console.log(numberStr);
console.log(typeof numberStr);
When logging the worth of number and its type within the console, the result’s 10 and number respectively. After converting it, the result’s 10 as a string and string respectively.
You may see the instance in motion in the next CodePen demo.
See the Pen
JS Convert Number to String using String() by SitePoint (@SitePoint)
on CodePen.
Conclusion
This tutorial shows you 4 approaches which you could use to convert a number to a string in JavaScript. Although these methods can produce the identical results when used with numbers, there are some cases where one approach can be higher than the others.
The most important difference between using String() and toString() is that String() works with undefined and null values, whereas toString() doesn’t. So, if you may have a price that ought to contain a number but you desire to be protected when converting it to a string, you should utilize String().
As for string interpolation and string concatenation, they’re best used when using numbers inside a string. Otherwise, using these methods could make the code less readable.
In case you found this text useful, chances are you’ll also benefit from the following:
