Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 2 / 12Strings and numbers
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Strings and numbers
01 / 09Overview

Strings and numbers

You'll learn to build text with template literals and to tell joining text apart from adding numbers.

Why it mattersApps show prices, names and totals all the time, and mixing up text and numbers is one of the most common bugs.
about 60 min·needs: Values and variables
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Handling text: strings in JavaScriptMDN · Learn web development · 20 min · English
MMamun's noteRead it all. The parts on template literals and "Numbers vs. strings" are the heart of this topic.
Article
String concatenation with binary +javascript.info · 5 min · English
MMamun's noteRead only this one section. It shows exactly why "5" + 1 gives "51". Stop at "Operator precedence".
VideoOptional
Modern JavaScript Tutorial #2: Syntax basics and typesYouTube · Net Ninja · 32 min · English
MMamun's noteWatch 20:37–31:01 for string basics, then 36:16–52:25 for numbers and template strings. Skip "Advanced string methods" for now.
VideoOptional
JavaScript Bangla tutorial #15: stringsYouTube · Learn with Sumit · 19 min · Bangla
MMamun's noteIn Bangla. A full lesson on the string type. Good if you want to hear it explained in your own language.
03 / 09

Explanation

You want to show a line like Total for Rafi: 360 taka. Part of it is fixed text, and part of it comes from variables. You also need the maths to be right.

Text in quotes is a string: "Rafi". A number has no quotes: 120. They look similar on screen, but JavaScript treats them very differently.

The easiest way to build text is with backticks, called a template literal. Anything inside ${ } is worked out and placed into the text:

const name = "Rafi";
const price = 120;
console.log(`Total for ${name}: ${price * 3} taka`);
// Total for Rafi: 360 taka

The + sign does two jobs. With two numbers it adds: 5 + 1 is 6. If either side is a string, it joins text: "5" + 1 is "51". People often hit this with form inputs. A text box always gives you a string, even when the user types a number. Turn it into a number first with Number("5").

Money needs one more step. 99.5 * 3 is 298.5, but you want 298.50. total.toFixed(2) gives a string with exactly two digits after the point. Use it only when you show the value, not while you still calculate.

Strings have handy tools too. name.length counts the characters, and name.toUpperCase() gives a new string in capitals.

When you read code with +, check both sides. If either side could be a string, expect joined text.

Words to recognise
stringnumbertemplate literal${}+Number()toFixedlengthtoUpperCase
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const name = "Rafi";
2const price = 99.5;
3const qty = 3;
4
console.log(`Total for ${name}: ${price * qty} taka`);
Mentor note · line 5
Backticks make a template literal. Each ${ } is worked out, then dropped into the text.
6// Total for Rafi: 298.5 taka
7
console.log("5" + 1); // "51"
console.log(Number("5") + 1); // 6
10
11const total = price * qty;
console.log(total.toFixed(2)); // "298.50"
console.log(name.length, name.toUpperCase()); // 4 "RAFI"
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const input = "20";
2console.log(input + 5);
3console.log(Number(input) + 5);
What does this print?
DrillFind the bug2 / 2
bill and tip come from text boxes, so they are strings. total should be the number 120. Fix the code so both checks pass.
1
2
3
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is "10" + 5?
  2. 2 / 3With const runs = 45;, what text does the template literal Score: ${runs + 5} make?
  3. 3 / 3What does (12.5).toFixed(2) give?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Strings and numbers?

09 / 09

Done

You can now
Predict whether a + will add numbers or join text, and fix it with Number().
Next: Making decisions with if Back to Phase 2
On this page
  1. 01Strings and numbers
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Strings and numbers
01 / 09Overview

Strings and numbers

You'll learn to build text with template literals and to tell joining text apart from adding numbers.

Why it mattersApps show prices, names and totals all the time, and mixing up text and numbers is one of the most common bugs.
about 60 min·needs: Values and variables
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Handling text: strings in JavaScriptMDN · Learn web development · 20 min · English
MMamun's noteRead it all. The parts on template literals and "Numbers vs. strings" are the heart of this topic.
Article
String concatenation with binary +javascript.info · 5 min · English
MMamun's noteRead only this one section. It shows exactly why "5" + 1 gives "51". Stop at "Operator precedence".
VideoOptional
Modern JavaScript Tutorial #2: Syntax basics and typesYouTube · Net Ninja · 32 min · English
MMamun's noteWatch 20:37–31:01 for string basics, then 36:16–52:25 for numbers and template strings. Skip "Advanced string methods" for now.
VideoOptional
JavaScript Bangla tutorial #15: stringsYouTube · Learn with Sumit · 19 min · Bangla
MMamun's noteIn Bangla. A full lesson on the string type. Good if you want to hear it explained in your own language.
03 / 09

Explanation

You want to show a line like Total for Rafi: 360 taka. Part of it is fixed text, and part of it comes from variables. You also need the maths to be right.

Text in quotes is a string: "Rafi". A number has no quotes: 120. They look similar on screen, but JavaScript treats them very differently.

The easiest way to build text is with backticks, called a template literal. Anything inside ${ } is worked out and placed into the text:

const name = "Rafi";
const price = 120;
console.log(`Total for ${name}: ${price * 3} taka`);
// Total for Rafi: 360 taka

The + sign does two jobs. With two numbers it adds: 5 + 1 is 6. If either side is a string, it joins text: "5" + 1 is "51". People often hit this with form inputs. A text box always gives you a string, even when the user types a number. Turn it into a number first with Number("5").

Money needs one more step. 99.5 * 3 is 298.5, but you want 298.50. total.toFixed(2) gives a string with exactly two digits after the point. Use it only when you show the value, not while you still calculate.

Strings have handy tools too. name.length counts the characters, and name.toUpperCase() gives a new string in capitals.

When you read code with +, check both sides. If either side could be a string, expect joined text.

Words to recognise
stringnumbertemplate literal${}+Number()toFixedlengthtoUpperCase
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const name = "Rafi";
2const price = 99.5;
3const qty = 3;
4
console.log(`Total for ${name}: ${price * qty} taka`);
Mentor note · line 5
Backticks make a template literal. Each ${ } is worked out, then dropped into the text.
6// Total for Rafi: 298.5 taka
7
console.log("5" + 1); // "51"
console.log(Number("5") + 1); // 6
10
11const total = price * qty;
console.log(total.toFixed(2)); // "298.50"
console.log(name.length, name.toUpperCase()); // 4 "RAFI"
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const input = "20";
2console.log(input + 5);
3console.log(Number(input) + 5);
What does this print?
DrillFind the bug2 / 2
bill and tip come from text boxes, so they are strings. total should be the number 120. Fix the code so both checks pass.
1
2
3
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is "10" + 5?
  2. 2 / 3With const runs = 45;, what text does the template literal Score: ${runs + 5} make?
  3. 3 / 3What does (12.5).toFixed(2) give?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Strings and numbers?

09 / 09

Done

You can now
Predict whether a + will add numbers or join text, and fix it with Number().
Next: Making decisions with if Back to Phase 2
On this page
  1. 01Strings and numbers
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want to show a line like Total for Rafi: 360 taka. Part of it is fixed text, and part of it comes from variables. You also need the maths to be right.

Text in quotes is a string: "Rafi". A number has no quotes: 120. They look similar on screen, but JavaScript treats them very differently.

The easiest way to build text is with backticks, called a template literal. Anything inside ${ } is worked out and placed into the text:

const name = "Rafi";
const price = 120;
console.log(`Total for ${name}: ${price * 3} taka`);
// Total for Rafi: 360 taka

The + sign does two jobs. With two numbers it adds: 5 + 1 is 6. If either side is a string, it joins text: "5" + 1 is "51". People often hit this with form inputs. A text box always gives you a string, even when the user types a number. Turn it into a number first with Number("5").

Money needs one more step. 99.5 * 3 is 298.5, but you want 298.50. total.toFixed(2) gives a string with exactly two digits after the point. Use it only when you show the value, not while you still calculate.

Strings have handy tools too. name.length counts the characters, and name.toUpperCase() gives a new string in capitals.

When you read code with +, check both sides. If either side could be a string, expect joined text.

Words to recognise
stringnumbertemplate literal${}+Number()toFixedlengthtoUpperCase

You want to show a line like Total for Rafi: 360 taka. Part of it is fixed text, and part of it comes from variables. You also need the maths to be right.

Text in quotes is a string: "Rafi". A number has no quotes: 120. They look similar on screen, but JavaScript treats them very differently.

The easiest way to build text is with backticks, called a template literal. Anything inside ${ } is worked out and placed into the text:

const name = "Rafi";
const price = 120;
console.log(`Total for ${name}: ${price * 3} taka`);
// Total for Rafi: 360 taka

The + sign does two jobs. With two numbers it adds: 5 + 1 is 6. If either side is a string, it joins text: "5" + 1 is "51". People often hit this with form inputs. A text box always gives you a string, even when the user types a number. Turn it into a number first with Number("5").

Money needs one more step. 99.5 * 3 is 298.5, but you want 298.50. total.toFixed(2) gives a string with exactly two digits after the point. Use it only when you show the value, not while you still calculate.

Strings have handy tools too. name.length counts the characters, and name.toUpperCase() gives a new string in capitals.

When you read code with +, check both sides. If either side could be a string, expect joined text.

Words to recognise
stringnumbertemplate literal${}+Number()toFixedlengthtoUpperCase