Quick Tip: How to Convert a Number to a String in JavaScript

September 1, 2022

JavaScript is quite flexible and offers many different ways to convert between data types. In this short tutorial, we’ll look at how you can convert a number to a string in JavaScript. You might want to do this in order to make number data more readable for users — for example, to display the number as part of a sentence.

This tutorial explores four ways to convert a number to a string in JavaScript. We recommend different approaches depending on your specific needs and use case:

String Interpolation: When inserting a number value within a string. For example, displaying text on a webpage like “You have used 7 credits out of 24”. You can also use Concatenation but beware.
String or toString(): When changing the type of a number value to a String. For example, using numbers as inputs to functions or APIs that expect a string. String and toString() are mostly the same but treat undefined and null variables differently.

You might also be interested to how to convert a string to a number if you’re looking to do the opposite action.

Convert a Number to a String Using Interpolation

Interpolation is probably the most readable way of using numbers in strings. Instead of manually converting the number to a string, you can insert it into a string using this method.

To use interpolation, wrap a string with backticks (`) instead of quotation marks (" or '). Then, in the string, you can insert any variable using`${}` as a placeholder. This is called a template literal and has a variety of other great benefits.

For example:

const number = 99;
console.log(`${number} percent of people love JavaScript`); // "99% of people love JavaScript"

Since the string that’s being logged into the console is wrapped with backticks, you can insert a variable into the string using ${}.

You can see the example in action in the following 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 can convert a number to a string using the + operator.

For example:

console.log(10 + "USD"); //"10USD"
console.log(10 + ""); //"10"

See the Pen
Convert Number to String with Concatenation by SitePoint (@SitePoint)
on CodePen.

Although this approach is efficient (as it requires the least amount of code), it can make the code less readable.

A string concatenation caveat

When using this approach with more than one number, an unexpected result might happen.

For example:

const a = 2000;
const b = 468;
console.log(a + b + " motorway"); // "2468 motorway"

Since a + b is evaluated first before reaching the string, the operation is a numerical addition rather than a string concatenation. Once a string variable or literal is reached, the operation becomes a string concatenation. So, the result is 2468 motorway.

However, try changing the code to the following:

const a = 2000;
const b = 468;
console.log("it is " + a + b + " motorway"); // "it is 2000468 motorway"

Because "it is" + a is evaluated first, the + operator is used for string concatenation for the rest of the expression. So, instead of an addition operation between a and b like the previous example, it becomes a string concatenation operation between the two.

This can be solved using parentheses:

const a = 2000;
const b = 468;
console.log("it is " + (a + b) + " motorway"); // "it is 2468 motorway"

The addition between a and b is performed first, which leads to the addition operation between the two variables. Then, string concatenation is used for the rest of the expression since the first operand is "it is".

Convert a Number to a String Using toString

The third approach is using the toString() method. This method is available for all JavaScript data types, including numbers. It converts the value of the number it’s used on and returns it.

For example:

const number = 10;
console.log(number); // 10
console.log(typeof number); // "number"

const numberStr = number.toString();
console.log(numberStr); // "10"
console.log(typeof numberStr); // "string"

This example shows the same result as that of the first approach. You can also see it in action in the following 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 first parameter. It converts the parameter to a string and returns it.

For example:

const number = 10;
console.log(number); // 10
console.log(typeof number); // "number"

const numberStr = String(number);
console.log(numberStr); // "10"
console.log(typeof numberStr); // "string"

When logging the value of number and its type in the console, the result is 10 and number respectively. After converting it, the result is 10 as a string and string respectively.

You can see the example in action in the following CodePen demo.

See the Pen
JS Convert Number to String using String() by SitePoint (@SitePoint)
on CodePen.

Conclusion

This tutorial shows you four approaches that you can use to convert a number to a string in JavaScript. Although these methods can produce the same results when used with numbers, there are some cases where one approach would be better than the others.

The main difference between using String() and toString() is that String() works with undefined and null values, whereas toString() doesn’t. So, if you have a value that should contain a number but you want to be safe when converting it to a string, you can use String().

As for string interpolation and string concatenation, they’re best used when using numbers within a string. Otherwise, using these methods can make the code less readable.

If you found this article useful, you may also enjoy the following: