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

JavaScript is quite flexible and provides many different ways to convert between data types. In this short tutorial, we will see how you can convert a number to a string in JavaScript. You may want to do this to make the number data more readable to 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 such as “You have used 7 credit from 24, you can also use Harsh but beware.
  • string either Wire(), When converting the type of a number value to a string. For example, using numbers as input to a function or API that expects strings. String And toString() mostly the same but treat undefined And null different variables.

You might also be interested in converting a string to a number if you want to do the opposite.

convert number to string using interpolation

interpolation Probably the most readable way is to use numbers in strings. Instead of manually converting the number to a string, you can use this method to concatenate it into a string.

To use interpolation, wrap a string with backticks (`) in place of quotation marks (" either ', Then, in the string, you can insert any variable using`$` as a placeholder. it’s called a template literal And it has many other great benefits.

For example:

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

Since the string being logged to the console is wrapped with backticks, you can insert the string into a variable using $,

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

see pen
string interpolation in javascript
by sitepoint (@SitePoint,
Feather codepen,

Convert number to string using string concatenation

Another way is string concatenation. You can convert a number to a string using + operator.

For example:

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

see pen
convert number to string with concatenation
by sitepoint (@SitePoint,
Feather codepen,

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

a string concatenation warning

When using this approach with multiple numbers, an unexpected result may occur.

For example:

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

since a + b First evaluated before the string is accessed, the operation is a numeric addition rather than a string concatenation. Once a string variable or literal is accessed, 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"); 

That’s why "it is" + a is first evaluated, + operator is used for string concatenation for the rest of the expression. So, instead of an addition operation between a And b As in the previous example, this 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"); 

joint 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 "it is",

convert number to string using toString

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

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 even see it in action in the following CodePen demo.

see pen
js convert number to string using toString()
by sitepoint (@SitePoint,
Feather codepen,

convert number to string using string

Fourth approach is using String() constructor function. This function accepts the variable to be converted as the first parameter. It 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); 

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

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

see pen
convert number to string using js toString()
by sitepoint (@SitePoint,
Feather codepen,

conclusion

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

the main difference is in using String() And toString() does he String() works with undefined And null value, while toString() No. So, if you have a value that should be a number but you want to be safe while converting it to string, you can use String(),

For string interpolation and string concatenation, they are 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:

Leave a Reply