6.

Strings

Used for dealing with words and general text, strings have special properties other types of values don’t have. They are created by enclosing text with single quotes (e.g., 'Hello, world!') or double quotes (e.g., "Hello, world!"). These lessons will use single quotes as they are more commonly used in practice.

Index

One special property of strings allows us to access individual characters. We call the position of a character the index. For example, the string ‘Alice’ has the letter ‘A’ at index 0. Yes, 0. We can say that ‘A’ is the first letter of the string, so it is at the first position. But indices start at 0. In other words, the index of a character is always one less than its conventional position.

const name = 'Alice';
console.log(name[0]); // A
console.log(name[3]); // c
console.log(name[4]); // e

Of course, we can use variables as indices, since variables are just placeholders for values.

const name = 'Alice';
const i = 0;
console.log(name[i]); // A

Length

Another special property of strings is their length.

const name = 'Alice';
console.log(name.length); // 5
console.log('Alice'.length); // 5

The syntax looks a bit odd because length is not a function; it’s a property that exists in all strings that we create. The moment we create a string, its length is calculated and stored hidden inside of it. Using someString.length lets us access that precalculated number.

One of the most common uses of the length property is to get the last letter of a string without having to guess at its index. The last letter is at the index one less than the length of the string.

const name = 'Alice';
const lastIndex = name.length - 1;
console.log(name[lastIndex]); // e
console.log(name[name.length - 1]); // e

Methods

Methods are functions that act like a property of a value. Like the length property, and unlike regular functions, methods go after a dot following the string. Instead of taking the operating string as an argument, it’s like an implicit (hidden) argument.

One useful string method is includes(). As its name suggests, we can check if a string includes another string.

const name = 'Alice';
const frozenWater = 'ice';
console.log(name.includes('ice')); // true
console.log(name.includes(frozenWater)); // true
console.log(name.includes('A')); // true
console.log(name.includes('Ace')); // false
console.log(name.includes('a')); // false

Another useful method is startsWith(). We can check if a string starts with another string.

const name = 'Alice';
console.log(name.startsWith('A')); // true
console.log(name.startsWith('Ali')); // true
console.log(name.startsWith('Alice')); // true
console.log(name.startsWith('ice')); // false

Of course, there is also endsWith().

const name = 'Alice';
console.log(name.endsWith('e')); // true
console.log(name.endsWith('ice')); // true
console.log(name.endsWith('Alice')); // true
console.log(name.endsWith('A')); // false

There are many more useful methods to play with.1

const name = 'Alice';
console.log(name.toUpperCase()); // ALICE
console.log(name.toLowerCase()); // alice
console.log(name.indexOf('i')); // 2
console.log(name.repeat(3)); // AliceAliceAlice
console.log(name.replace('ice', 'ejandro')); // Alejandro
console.log(name.slice(2)); // ice
console.log(name.slice(1, 4)); // lic

Template literals

Template literals are another way of writing a string, where external values can be conveniently be interpolated inside. To write a template literal, use backticks ` ` instead of single quotes to surround the string.

const name = `Alice`; // this is the same as a normal string

External values and expressions can be interpolated in template literals using special syntax:

const name = 'Alice';
const greeting = `Hello, ${name}! Your name is ${name.length} letters long.`;
console.log(greeting); // Hello, Alice! Your name is 5 letters long.

Anything inside the ${} is evaluated as an expression and put into the string. Note that, in the above example, even though name.length is a number, it is converted into a string so that it can be part of the whole string.

Exercises


  1. See all the string methods on MDN.↩︎

Top