JavaScript is sort of versatile and presents many various methods to transform between knowledge sorts. On this quick tutorial, we’ll take a look at how one can convert a quantity to a string in JavaScript. You may need to do that as a way to make quantity knowledge extra readable for customers — for instance, to show the quantity as a part of a sentence.
This tutorial explores 4 methods to transform a quantity to a string in JavaScript.
Convert a Quantity to a String Utilizing Interpolation
Interpolation might be probably the most readable method of utilizing numbers in strings. As an alternative of manually changing the quantity to a string, you possibly can insert it right into a string utilizing this technique.
To make use of interpolation, wrap a string with backticks (`). Then, within the string, you possibly can insert any variable utilizing`$`.
For instance:
const quantity = 99;
console.log(`$quantity % of individuals love JavaScript`);
For the reason that string that’s being logged into the console is wrapped with backticks, you possibly can insert a variable into the string utilizing $.
You’ll be able to see the instance in motion within the following CodePen demo.
See the Pen
String Interpolation in JavaScript by SitePoint (@SitePoint)
on CodePen.
Convert a Quantity to a String Utilizing String Concatenation
The second strategy is string concatenation. You’ll be able to convert a quantity to a string utilizing 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.
Though this strategy is environment friendly (because it requires the least quantity of code), it may well make the code much less readable.
A string concatenation caveat
When utilizing this strategy with multiple quantity, an surprising outcome may occur.
For instance:
const a = 2000;
const b = 468;
console.log(a + b + " motorway");
Since a + b is evaluated first earlier than reaching the string, the operation is a numerical addition fairly than a string concatenation. As soon as a string variable or literal is reached, the operation turns into a string concatenation. So, the result’s 2468 motorway.
Nevertheless, attempt altering the code to the next:
const a = 2000;
const b = 468;
console.log("it's " + a + b + " motorway");
As a result of "it's" + a is evaluated first, the + operator is used for string concatenation for the remainder of the expression. So, as an alternative of an addition operation between a and b just like the earlier instance, it turns into a string concatenation operation between the 2.
This may be solved utilizing parentheses:
const a = 2000;
const b = 468;
console.log("it's " + (a + b) + " motorway");
The addition between a and b is carried out first, which ends up in the addition operation between the 2 variables. Then, string concatenation is used for the remainder of the expression for the reason that first operand is "it's".
Convert a Quantity to a String Utilizing toString
The third strategy is utilizing the toString() technique. This technique is offered for all JavaScript data types, together with numbers. It converts the worth of the quantity it’s used on and returns it.
For instance:
const quantity = 10;
console.log(quantity);
console.log(typeof quantity);
const numberStr = quantity.toString();
console.log(numberStr);
console.log(typeof numberStr);
This instance exhibits the identical outcome as that of the primary strategy. You may also see it in motion within the following CodePen demo.
See the Pen
JS Convert Number to String using toString() by SitePoint (@SitePoint)
on CodePen.
Convert a Quantity to a String Utilizing String
The fourth strategy is utilizing the String() constructor operate. This operate accepts the variable to transform as a primary parameter. It converts the parameter to a string and returns it.
For instance:
const quantity = 10;
console.log(quantity);
console.log(typeof quantity);
const numberStr = String(quantity);
console.log(numberStr);
console.log(typeof numberStr);
When logging the worth of quantity and its sort within the console, the result’s 10 and quantity respectively. After changing it, the result’s 10 as a string and string respectively.
You’ll be able to see the instance in motion within the following CodePen demo.
See the Pen
JS Convert Number to String using String() by SitePoint (@SitePoint)
on CodePen.
Conclusion
This tutorial exhibits you 4 approaches that you need to use to transform a quantity to a string in JavaScript. Though these strategies can produce the identical outcomes when used with numbers, there are some circumstances the place one strategy could be higher than the others.
The principle distinction between utilizing String() and toString() is that String() works with undefined and null values, whereas toString() doesn’t. So, if in case you have a worth that ought to comprise a quantity however you need to be protected when changing it to a string, you need to use String().
As for string interpolation and string concatenation, they’re finest used when utilizing numbers inside a string. In any other case, utilizing these strategies could make the code much less readable.
Should you discovered this text helpful, you might also get pleasure from the next:
