Converting Between Text and Numbers

Welcome back to Comparing and Converting JavaScript Values! In the previous lesson, we used typeof to tell a number from a string. That distinction becomes especially useful when a program receives text that happens to contain digits.

In this lesson, we will watch the + operator join text instead of adding numbers, then learn Number() and String() as deliberate conversions. By the end, we will be able to repair a total that is wrong because one quantity arrived as text.

We have used + for arithmetic, such as adding two numbers. JavaScript also uses + to join strings. When one side is a string, JavaScript treats the operation as joining text. Here, the string "2" is joined with the number 2:

const quantityFromForm = "2";
console.log(quantityFromForm + 2);
console.log(typeof (quantityFromForm + 2));

The displayed 22 looks numeric, but the second line confirms that the joined result is a string:

22
string

This is a common surprise when values come from a form or another source that provides text. JavaScript joined the two pieces instead of calculating a sum. We can also check typeof quantityFromForm to confirm that the original value is text.

When text contains digits that we want to calculate with, we can place it inside Number() to convert it into a number. The parentheses hold the value we want to convert:

const quantityFromForm = "2";
const quantity = Number(quantityFromForm);
console.log(quantity + 2);
console.log(typeof quantity);

Now both sides of + are numbers, so JavaScript adds them. The next line confirms that the converted value is a number:

4
number

Number() gives us a new value in the number type; it does not change the original string stored under quantityFromForm. We chose the new variable name quantity to make that converted value easy to recognize.

In these examples, the text already contains digits for a quantity. Conversion and calculation are separate steps: Number() changes the type of the value we store, then + works with that number. Keeping the steps on different lines makes the program easier to follow, because we can identify whether a surprise came from the input value, the conversion, or the later calculation.

We can convert in the other direction, too. String() turns a value into text. This can be useful when we want to join a converted value into a sentence with +:

const cupsSold = 12;
const cupsSoldText = String(cupsSold);
console.log("Cups sold: " + cupsSoldText);

The conversion stores text in cupsSoldText, and + joins the label and that text. The output is:

Cups sold: 12

The digits appear the same, but the type is now string. We can verify that by printing typeof cupsSoldText, which reports string. As before, the conversion creates a value for the new name and leaves the original cupsSold number available.

Let's put the pieces together with a different quantity read as text. An event has sold 5 tickets and receives "2" as an extra quantity:

const ticketsSoFar = 5;
const extraFromForm = "2";
console.log("Total tickets:", ticketsSoFar + extraFromForm);

Because one side of + is a string, the result is joined text. The program prints Total tickets: 52, but we want 7. We convert the extra quantity before adding it:

const ticketsSoFar = 5;
const extraFromForm = "2";
const extraTickets = Number(extraFromForm);
console.log("Total tickets:", ticketsSoFar + extraTickets);

The corrected program prints:

Total tickets: 7

The important step is deciding what kind of value the calculation needs. After conversion, ticketsSoFar and extraTickets are both numbers, so + calculates a sum. We preserve the original text and give the converted number its own clear name.

A conversion gives us a new value without rewriting the original. After const quantity = Number(quantityFromForm);, quantityFromForm still holds the string "2", while quantity holds the number 2. A clear name lets us keep both values and remember which one is ready for arithmetic.

For example, extraFromForm tells us where the text came from, and extraTickets tells us what the converted number represents. Then ticketsSoFar + extraTickets clearly adds two quantities. We might keep the original text if we also need to show the input as it arrived.

We can inspect both names to see their different types:

const quantityFromForm = "2";
const quantity = Number(quantityFromForm);
console.log(typeof quantityFromForm);
console.log(typeof quantity);

When these lines run, the first value is still text and the converted value is a number:

string
number

The same naming idea works in the other direction. cupsSoldText signals that String(cupsSold) has produced text, which we can then join with a label. The name tells us the conversion happened, while cupsSold remains the original number. We can use the number for a later total and the text for a message in the same program. That keeps each operation clear.

We saw that + can add numbers or join text, and that a string containing digits still counts as text. Number() converts text to a number, while String() converts a value to text. Using the right type before an operation keeps our results predictable.

Next, we will compare values and read the true or false results JavaScript produces. Then we will have the pieces needed to combine several checks into one condition.