CodeBlanks Logo Icon CodeBlanks
Login Register

substring and slice

Learn to take parts of a string with .substring and .slice.

Taking parts with substring

To take a part of a string you use .substring(start, end). start is the start index and end is the end index; end itself is excluded. "welcome".substring(0, 3) returns "wel".

With one argument substring(start) takes from that index to the end: "welcome".substring(3) is "come". substring clamps negative indices to zero; for negative values slice is usually a better fit.

slice and negative indices

.slice(start, end) also takes a part; it resembles substring but supports negative indices. A negative index counts from the end: -1 is the last character, -3 is the start of the last three characters.

For example "welcome".slice(-3) returns the last three letters: "ome". "welcome".slice(0, -2) drops the last two characters: "welc". Thanks to its flexibility slice is a common choice for strings and arrays.

Practice Take the first three letters

The word variable holds "programming". Declare a variable first and assign the result of word.slice(0, 3) to it. Then print first with console.log. The output on a single line must be pro.

Starter code

index.js
const word = "programming";
// Declare first with slice and print it

Sample solution

index.js
const word = "programming";
const first = word.slice(0, 3);
console.log(first);

Expected output

pro

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Write the substring call

Question 
const w = "welcome";
const head = w____(0, 3);
Answer 
const w = "welcome";
const head = w.substring(0, 3);

Explanation: .substring takes two indices and returns a part.

2 Match each method to its behavior

Term Meaning
.substring(0, 3) First three chars
.slice(-3) Last three chars
.substring(3) From index to end
.slice(0, -2) Drop last two

3 What is the result of "welcome".slice(-2)?

index.js
"welcome".slice(-2)
  • "me" Correct answer
  • "wel"
  • "come"
  • "welc"

Explanation: slice(-2) gives the last two characters: "me".

All lessons in Beginner

1 Node.js basics

  1. What is Node.js?
  2. Your first program
  3. ES modules
  4. package.json
  5. CommonJS vs ESM
  6. Summary - Node.js basics

2 Variables

  1. let and const
  2. var and scope
  3. Type inference
  4. Destructuring
  5. Spread and rest
  6. Summary - Variables

3 Data types

  1. Primitive types
  2. Template literals
  3. Number and Math
  4. Symbol
  5. typeof
  6. Summary - Data types

4 Project: Calculator

  1. Project design
  2. Add and subtract
  3. Multiply and divide
  4. process.argv
  5. Putting it together

5 Operators

  1. Arithmetic operators
  2. Assignment operators
  3. Comparison operators
  4. Logical operators
  5. Nullish coalescing
  6. Summary - Operators

6 Strings

  1. String methods
  2. String search
  3. substring and slice
  4. replace and split
  5. padStart and trim
  6. Summary - Strings

7 Conditionals

  1. The if statement
  2. else and else if
  3. switch
  4. Ternary
  5. Optional chaining
  6. Summary - Conditionals

8 Loops

  1. The for loop
  2. The while loop
  3. for...of
  4. for...in
  5. break and continue
  6. Summary - Loops

9 Project: Shopping cart

  1. Cart design
  2. Adding items
  3. Calculating totals
  4. Listing the cart
  5. Putting it together

10 Arrays

  1. Declaring arrays
  2. Array access
  3. push and pop
  4. shift and unshift
  5. splice and slice
  6. Summary - Arrays

11 Array methods

  1. map
  2. filter
  3. reduce
  4. find and some
  5. forEach
  6. Summary - Array methods

12 Objects

  1. Object literal
  2. Property access
  3. Computed properties
  4. Object methods
  5. Object spread
  6. Summary - Objects

13 Functions

  1. Defining functions
  2. Return values
  3. Arrow functions
  4. Default parameters
  5. Rest parameters
  6. Summary - Functions

14 Callbacks

  1. What are callbacks?
  2. Higher-order functions
  3. forEach with callbacks
  4. Error-first callbacks
  5. Callback hell
  6. Summary - Callbacks

15 Project: To-do CLI

  1. Task model
  2. Adding tasks
  3. Listing tasks
  4. Completing tasks
  5. Putting it together

16 Promises

  1. What are promises?
  2. then and catch
  3. Promise.all
  4. Promise.race
  5. finally
  6. Summary - Promises

17 async/await

  1. async function
  2. await
  3. try/catch
  4. await with Promise.all
  5. Sequential await
  6. Summary - async/await

18 fs module

  1. fs.promises
  2. readFile
  3. writeFile
  4. appendFile
  5. existsSync
  6. Summary - fs module

19 path module

  1. path.join
  2. path.resolve
  3. path.parse
  4. path.dirname and basename
  5. path.extname
  6. Summary - path module

20 Beginner final

  1. Project design
  2. Data model
  3. Business logic
  4. fs persistence
  5. Putting it together