Javascript · Strings
Common Methods
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — What Are String Methods?
Strings in JavaScript come with built-in methods - special functions that can transform or analyze strings. A method is called using a dot
.
after the string.
The basic syntax looks like this:
let codemonName = "aquachu";
let uppercase = codemonName.toUpperCase();
console.log(codemonName); // Still "aquachu"
console.log(uppercase); // "AQUACHU"
The
.toUpperCase()
method converts all letters in a string to UPPERCASE. Notice that the original string
codemonName
doesn't change - methods return a new string!
Strings Are Immutable
In JavaScript, strings cannot be changed after they're created. Methods like
.toUpperCase()
don't modify the original string - they create and return a brand new string with the changes applied.
Exercise 2 — Changing Text Case
JavaScript provides two methods to change the case of letters in strings:
-
.toUpperCase()
- converts all letters to UPPERCASE
-
.toLowerCase()
- converts all letters to lowercase
let codemonName = "PyRoChU";
console.log(codemonName.toUpperCase()); // "PYROCHU"
console.log(codemonName.toLowerCase()); // "pyrochu"
console.log(codemonName); // Still "PyRoChU"
These methods are really useful when you want to compare strings without worrying about uppercase or lowercase letters (we'll see about that later)!
Don't Forget the Parentheses!
Methods always need parentheses
()
after them, even if they don't take any parameters. Writing
.toUpperCase
without
()
won't call the method.
Exercise 3 — Practice Case Methods
Complete the code to convert the Codémon type to uppercase and the trainer name to lowercase:
let codemonType = "water";
let trainerName = "ASH";
let typeUpper = codemonType.____();
let nameLower = trainerName.____();
console.log(typeUpper);
console.log(nameLower);
Options: toUpperCase tolowercase touppercase toLowerCase
Hint : To convert to uppercase, use ```.toUpperCase()```. To convert to lowercase, use ```.toLowerCase()```. Don't forget the parentheses!
Exercise 4 — Removing Extra Spaces with .trim()
Sometimes strings have unwanted spaces at the beginning or end. The
.trim()
method removes these extra spaces:
let messyName = " Florachu ";
let cleanName = messyName.trim();
console.log("Before: " + messyName + "!"); // " Florachu !"
console.log("After: " + cleanName + "!"); // "Florachu!"
.trim()
is super useful when working with user input, because people often accidentally add extra spaces!
What About Spaces in the Middle?
.trim()
only removes spaces from the beginning and end of a string. Spaces in the middle are left untouched. So
"Aqua chu".trim()
would still be
"Aqua chu"
with the space between the words.
Exercise 5 — Understanding .trim()
What will be the output of this code?
let text = " Hello World ";
let result = text.trim();
console.log(result.length);
Hint : Count the characters in ```"Hello World"``` (including the space in the middle). Remember that ```.trim()``` removes spaces only from the start and end.
Exercise 6 — Searching in Strings with .includes()
The
.includes()
method checks if a string contains a specific piece of text. It returns
true
if found,
false
if not:
let codemonName = "Aquachu";
console.log(codemonName.includes("Aqua")); // true
console.log(codemonName.includes("Fire")); // false
console.log(codemonName.includes("chu")); // true
Unlike the other methods we've seen,
.includes()
takes a parameter - the text you want to search for goes inside the parentheses.
Case Sensitivity Matters!
.includes()
is case-sensitive. That means
"Aquachu".includes("aqua")
would be
false
because
"aqua"
doesn't match
"Aqua"
. If you want case-insensitive searching, combine it with
.toLowerCase()
!
Exercise 7 — Using .includes()
Complete the code to check if the Codémon description contains the word
"fire"
:
let description = "Pyrochu is a fire type Codémon";
let hasFireType = description.____(____);
console.log(hasFireType);
Options: includes "fire" include "Fire" contains fire
Hint : Use ```.includes()``` with the text to search for in quotes. Pay attention to the case - the word in the description is lowercase.
Exercise 8 — Predict the Output
What will this code output?
let name = "Florachu";
let result = name.toLowerCase().includes("flora");
console.log(result);
Options
• ```true```
• ```false```
• ```"flora"```
• ```"florachu"```
Hint : Methods can be chained! First ```.toLowerCase()``` converts to ```"florachu"```, then ```.includes("flora")``` checks if it contains that text.
Exercise 9 — Match Methods to Results
Match each code snippet with its output. Consider this starting value:
let text = " Aquachu ";
Items to match
• toUpperCase()
• trim()
• toLowerCase()
• includes("Aqua")
Definitions
• " AQUACHU "
• "Aquachu"
• " aquachu "
• true
Exercise 10 — Codémon Name Validator
Clean up this messy Codémon name by doing the following:
1. Remove the extra spaces
2. Convert everything to lowercase
3. Check if it contains
"chu"
Starter code
let userInput = " PyRoChU ";
// Your code here