Substrings and search

In the previous lessons a string was a sign with letters in numbered cells. You cannot rewrite the sign, but you can make a copy of it. String methods work like a copier: each of them makes a new sign from the old one, and the original stays the same.

Two things are done with text most often: you take a piece of it or look for a word in it. The area code of a phone number, a file name without its extension, checking whether an address has an @ sign — all of these are such tasks. Let's look at both on the string "hello world":

const text = "hello world";

console.log(text.slice(0, 5)); // hello
console.log(text.slice(6)); // world
console.log(text.slice(-3)); // rld
console.log(text.indexOf("o"), text.indexOf("z")); // 4 -1
console.log(text); // hello world

The last line prints hello world: none of the calls changed text.

Here the copier analogy falls short: indexOf makes no new sign; it answers with a number, an index.

A part of a string

A part of a string is called a substring. The method slice(start, end) returns the substring from index start to index end, and the character at index end is not included. That is why text.slice(0, 5) is five characters with indexes from 0 to 4.

It helps to picture scissors: they cut the sign before cell start and before cell end. Everything between the cuts is the substring. The piece's length is end - start: for slice(0, 5) it is 5.

slice has three more rules:

• without the second argument, slice takes everything up to the end of the string: text.slice(6) gives "world";
• a negative index counts from the end, and slice(-3) returns the last three characters;
• slice never goes past the ends of the string and causes no error: "cat".slice(1, 100) gives "at".

Searching

There are two ways to search for a substring:

• find out where it is;
• only find out whether it is there.

Where it is: indexOf

The method indexOf returns the index of the first occurrence of a substring. For a substring of several characters, that is the index of its first character: "world" starts at index 6.

If the substring is not in the string, indexOf returns -1. A sign has no cell number -1, so this answer cannot be mistaken for a real index.

Whether it is there: includes, startsWith, endsWith

These three methods answer with a boolean:

• includes — whether the substring is anywhere;
• startsWith — whether it is at the start;
• endsWith — whether it is at the end.

console.log(text.indexOf("world"), text.indexOf("l")); // 6 2
console.log(text.includes("lo w"), text.startsWith("hell")); // true true
console.log(text.endsWith("World")); // false

Let's go through the output line by line:

1. "world" starts at index 6, and the first of the three l letters is at index 2.
2. "lo w" is inside the string, the space counts too, and "hell" is its start.
3. endsWith("World") gives false, although the string ends with world.

Searching tells letter case apart — capital and small letters. That is why "World" was not found in the string "hello world".

Common mistake

The result of indexOf is checked in an if as a "yes or no" answer:

const greeting = "hello";
if (greeting.indexOf("h")) { // ✗
    console.log("found");
}

The program prints nothing, although the letter h is in the string. It sits at index 0, and 0 is a falsy value, so the condition fails. If the substring were missing, indexOf would return -1, which is a truthy value. For a "yes or no" answer, use includes: greeting.includes("h") gives true.

Key points

• String methods do not change the original string; they return a new value.
• slice(start, end) returns a substring without the character at index end, and a negative index counts from the end.
• indexOf returns the index of the first occurrence or -1, while includes, startsWith and endsWith answer true or false.
• For a "yes or no" question, use includes, not indexOf in an if.