JavaScript is kind of versatile and gives many various methods to transform between data types. On this brief tutorial, we’ll have a look at how one can convert a quantity to a string in JavaScript. You may need to do that so as 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 suggest totally 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 can too 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 features or APIs that count on a string.
StringandtoString()are principally the identical however deal withundefinedandnullvariables in another way.
You may additionally have an interest to how to convert a string to a number in the event you’re trying to do the alternative motion.
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 may insert it right into a string utilizing this technique.
To make use of interpolation, wrap a string with backticks (`) as a substitute of citation marks (" or '). Then, within the string, you may insert any variable utilizing`$` as a placeholder. That is referred to as a template literal and has a wide range of different nice advantages.
For instance:
const quantity = 99;
console.log(`$quantity p.c of individuals love JavaScript`);
Because the string that’s being logged into the console is wrapped with backticks, you may 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 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 slightly 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, 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 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() 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 can too 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 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 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 instances 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 need to use 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.
If you happen to discovered this text helpful, you might also get pleasure from the next:
