Javascript · Strings
Parts of strings
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Extracting Parts with .slice()
Let's see more string methods! I hope you remember indexing.
Sometimes you need to extract just a portion of a string. The
.slice()
method lets you grab a specific part of a string by specifying where to start and where to end.
The syntax is:
string.slice(startIndex, endIndex)
Important: The end index is exclusive (not included in the result)!
let codemonName = "Aquachu";
// Extract from index 0 to 4 (4 is not included)
let result1 = codemonName.slice(0, 4);
console.log(result1); // "Aqua"
// Original string is unchanged!
console.log(codemonName); // "Aquachu"
If you don't provide an end index,
.slice()
will extract all the way to the end of the string.
let codemonName = "Aquachu";
// Extract from index 4 to the end
let result2 = codemonName.slice(4);
console.log(result2); // "chu"
// Original string is unchanged!
console.log(codemonName); // "Aquachu"
You can also use negative indices to count from the end of the string:
let name = "Pyrochu";
// Get last 3 characters
let ending = name.slice(-3);
console.log(ending); // "chu"
// Get from index 2 to 3 characters before end
let middle = name.slice(2, -3);
console.log(middle); // "ro"
Remember: Strings are Immutable
The .slice() method doesn't modify the original string. It creates and returns a new string with the extracted portion. The original string remains unchanged.
Exercise 2 — Practice with .slice()
Extract the word "Flora" from the Codémon name using
.slice()
.
let codemon = "Florachu";
let prefix = codemon.____(____, ____);
console.log(prefix);
Options: slice 0 5 4 6 substring
Hint : Count the characters: F(0), l(1), o(2), r(3), a(4). You need indices 0 to 5, but remember the end index is exclusive.
Exercise 3 — Understanding .slice() Output
What will the following code output?
let message = "Catch Codémon!";
let result = message.slice(6, -1);
console.log(result);
Options
• ```Codémon```
• ```Codémon!```
• ```Catch C```
• ```odémon```
Hint : Count the positions starting from 0. Remember that the end index (-1) is not included in the result.
Exercise 4 — Meet .substring()
The
.substring()
method is very similar to
.slice()
, but with one key difference: it handles negative indices differently.
The syntax is:
string.substring(startIndex, endIndex)
Just like
.slice()
, the end index is exclusive.
let codemon = "Aquachu";
// Basic usage - works like .slice()
let part1 = codemon.substring(0, 4);
console.log(part1); // "Aqua"
let part2 = codemon.substring(4);
console.log(part2); // "chu"
let codemon = "Aquachu";
// The difference: negative numbers are treated as 0
let part3 = codemon.slice(-3);
console.log(part3); // "chu"
let part4 = codemon.substring(-3);
console.log(part4); // "Aquachu" (same as substring(0))
Another difference: if the start index is greater than the end index,
.substring()
will swap them automatically.
Which Should You Use?
Most developers prefer .slice() because it's more predictable with negative indices. Use .substring() when you specifically need its auto-swapping behavior or want to avoid negative indices.
Exercise 5 — Using .substring()
Extract the middle part "lora" from "Florachu" using
.substring()
.
let codemon = "Florachu";
let middle = codemon.____(____, ____);
console.log(middle);
Options: substring 1 5 4 6
Hint : Find where "lora" starts and ends: F(0), l(1), o(2), r(3), a(4), c(5). Remember the end index is exclusive.
Exercise 6 — Slice vs Substring Behavior
What is the main difference between
.slice()
and
.substring()
when using negative indices?
Options
• ```.slice()``` counts from the end with negative numbers, ```.substring()``` treats them as 0
• ```.substring()``` counts from the end with negative numbers, ```.slice()``` treats them as 0
• Both methods handle negative indices the same way
• Neither method accepts negative indices
Hint : Think about what happens when you use a negative number with each method. One counts backwards, the other treats it as the start of the string.
Exercise 7 — .slice() vs .substring() with Negative Indices
What will this code output?
let name = "Florachu";
let result1 = name.slice(-4);
let result2 = name.substring(-4);
console.log(result1);
console.log(result2);
Options
• ```"achu"``` then ```"Florachu"```
• ```"Florachu"``` then ```"achu"```
• ```"achu"``` then ```"achu"```
• ```"Florachu"``` then ```"Florachu"```
Hint : ```.slice()``` counts from the end with negative indices, while ```.substring()``` treats negative values as 0.
Exercise 8 — Match Method Calls with Results
Given the string
let name = "Pyrochu";
, match each method call with its output:
Items to match
• .slice(0, 4)
• .slice(-3)
• .substring(4, 6)
• .slice(2, 4)
• .substring(-3)
Definitions
• "Pyro"
• "chu"
• "ch"
• "ro"
• "Pyrochu"
Exercise 9 — Complex Extraction Scenario
You want to extract the last 4 characters from a Codémon's name, but you don't know the length in advance. Which approach is best?
Options
• ```name.slice(-4)```
• ```name.substring(-4)```
• ```name.substring(name.length - 4)```
Hint : Think about which method handles negative indices in a way that counts from the end of the string. Also consider which methods are recommended for modern code.
Exercise 10 — Codémon Name Parser
Extract information from this sentence!
Given
"Aquachu is type Water"
, extract and display:
1. The Codémon name ("Aquachu")
2. The type ("Water")
Use
.slice()
or
.substring()
.
Starter code
let sentence = "Aquachu is type Water";
// Extract the name and type here