Quick Tip: How to Convert Numbers to Strings in JavaScript

JavaScript is very flexible and can convert data types in many ways. In this short tutorial, we’ll look at how to convert numbers to strings in JavaScript. You can do this to make numeric data easier for the user to read, for example to display numbers as part of a sentence.

In this tutorial, we’ll look at four ways to convert numbers to strings in JavaScript. We recommend different approaches depending on your specific needs and use cases.

• String interpolation: When inserting a number inside a string. For example, a web page might say “You have used 7 credit from twenty four”.You can also use Linking But be careful.
• string or toString(): If you want to change the number type to string. For example, use numbers as inputs to functions or APIs that require strings. String When toString() Almost the same but handles undefined When null Variables are different.

If you’re trying to do the opposite action, you might also be interested in how to convert a string to a number.

Convert number to string using interpolation

Interpolation is probably the most readable way to use numbers in strings. Instead of manually converting numbers to strings, you can use this method to insert numbers into strings.

To use interpolation, backtick the string (`) instead of quotation marks (" Also ').Then in the string you can insert any variable using`${}` as a placeholder. These are called template literals and have many other nice benefits.

for example:

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

Since the string you are logging into the console is wrapped in backticks, you can insert the variable into the string using: ${}.

You can see a working example in the CodePen demo below.

look at the pen
String interpolation in JavaScript by SitePoint (@SitePoint)
with a code pen.

Convert number to string using string concatenation

The second approach is string concatenation. can be used to convert numbers to strings. + operator.

for example:

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

look at the pen
Convert number to string using concatenation with SitePoint (@SitePoint)
with a code pen.

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

Notes on string concatenation

Using this approach with multiple numbers can lead to unexpected results.

for example:

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

ever since a + b If the string is evaluated first before reaching it, the operation is numeric addition rather than string concatenation. When a string variable or literal is reached, the operation becomes string concatenation.So the result is 2468 motorway.

However, try changing your code to:

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

because "it is" + a is evaluated first, and + The operator is used for string concatenation for the rest of the expression.So instead of addition operations between a When b It would be a string concatenation operation between the two, as in the previous example.

This can be resolved using parentheses.

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

addition between a When b is executed first, performing an addition operation between the two variables.Then the first operand is "it is".

Convert number to string using toString

A third approach is to toString() Method. This method works with all JavaScript data types, including numbers. Converts and returns the numeric value used.

for example:

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

const numberStr = number.toString();
console.log(numberStr); 
console.log(typeof numberStr); 

This example shows the same result as the first approach. You can also see it in action in the CodePen demo below.

look at the pen
Convert number to string using toString() by JS SitePoint (@SitePoint)
with a code pen.

Convert number to string using string

A fourth approach is to String() constructor function. This function accepts the variable to transform as the first parameter. Converts the parameter to a string and returns it.

for example:

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

const numberStr = String(number);
console.log(numberStr); 
console.log(typeof numberStr); 

When logging the value of number Its type in the console, the result is 10 When number Respectively. The result after conversion is 10 as a string string Respectively.

You can see a working example in the CodePen demo below.

look at the pen
JS use String() by SitePoint (@SitePoint) to convert number to string
with a code pen.

Conclusion

This tutorial shows four methods you can use to convert numbers to strings in JavaScript. These methods can produce the same results when used numerically, but some methods are better than others.

Main difference in use String() When toString() is that String() works with undefined When null value, while toString() I don’t.So if you have a value that should contain numbers and you want to be safe when converting it to a string, you can use String().

Regarding string interpolation and string concatenation, they are most often used when using numbers within strings. Otherwise, using these methods can make your code difficult to read.

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