JavaScript is sort of versatile and affords many alternative methods to transform between knowledge varieties. 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 with the intention 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. We advocate completely different approaches relying in your particular wants and use case:
- String Interpolation: When inserting a quantity worth inside a string. For instance, displaying textual content on a webpage like “You’ve gotten used 7 credit out of 24”. You too can use Concatenation however beware.
- String or toString(): When altering the kind of a quantity worth to a String. For instance, utilizing numbers as inputs to capabilities or APIs that anticipate a string.
StringandtoString()are principally the identical however deal withundefinedandnullvariables in another way.
You may additionally have an interest to find out how to convert a string to a quantity for those who’re seeking to do the alternative motion.
Convert a Quantity to a String Utilizing Interpolation
Interpolation might be essentially the most readable means of utilizing numbers in strings. As an alternative of manually changing the quantity to a string, you’ll be able to insert it right into a string utilizing this methodology.
To make use of interpolation, wrap a string with backticks (`) as a substitute of citation marks (" or '). Then, within the string, you’ll be able to insert any variable utilizing`${}` as a placeholder. That is referred to as a template literal and has quite a lot of different nice advantages.
For instance:
const quantity = 99;
console.log(`${quantity} % of individuals love JavaScript`);
Because the string that’s being logged into the console is wrapped with backticks, you’ll be able to 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 Quantity 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 possibly make the code much less readable.
A string concatenation caveat
When utilizing this strategy with a couple of quantity, an sudden 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 somewhat 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.
Nonetheless, strive 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 a substitute 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() methodology. This methodology is accessible for all JavaScript knowledge varieties, 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 too can see it in motion within the following CodePen demo.
See the Pen
JS Convert Quantity to String utilizing toString() by SitePoint (@SitePoint)
on CodePen.
Convert a Quantity to a String Utilizing String
The fourth strategy is utilizing the String() constructor perform. This perform 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 Quantity to String utilizing String() by SitePoint (@SitePoint)
on CodePen.
Conclusion
This tutorial exhibits you 4 approaches that you should utilize 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 primary 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 secure when changing it to a string, you should utilize String().
As for string interpolation and string concatenation, they’re greatest used when utilizing numbers inside a string. In any other case, utilizing these strategies could make the code much less readable.
For those who discovered this text helpful, you might also take pleasure in the next:
