JavaScript String Methods and How to Use Them

Strings are a vital data type. Just about any project you work on will contain some strings. Let’s explore some string methods in JavaScript. They’ll make working with the language much easier for you.

This article will cover the following string methods:

1. .length
2. .includes
3. .startsWith
4. .endsWith
5. .indexOf
6. .slice
7. .replace

1. String .length

String.prototype.length

From MDN: The length property of a String object contains the length of the string, in UTF-16 code units.

const str = "Hello, there!";
console.log(str.length);
// Output: 12

If you read our array article, you might remember that we can empty an array using the .length method.

const arr = [1, 2, 3];
arr.length = 0;
console.log(arr);
// Output: []

Please note it is not the case for strings. It is a read-only data property of string instances.

const str = "Hello, there!";
str.length = 0;
console.log(str);
// Output: Hello, there!

2. String .includes

String.prototype.includes

From MDN: The includes() method performs a case-sensitive search to determine whether one string may be found within another string, returning true or false as appropriate.

const str = "Hello, there!";
console.log(str.includes("ello"));
// Output: true

console.log(str.includes("pizza"));
// Output: false

3. String .startsWith

String.prototype.startsWith

From MDN: The startsWith() method determines whether a string begins with the characters of a specified string, returning true or false as appropriate.

const str = "Hello, there!";
console.log(str.startsWith("He"));
// Output: true

console.log(str.startsWith("h"));
// Output: false

4. String .endsWith

String.prototype.endsWith

From MDN: The endsWith() method determines whether a string ends with the characters of a specified string, returning true or false as appropriate.

const str = "Hello, there!";
console.log(str.endsWith("here!"));
// Output: true

5. String .indexOf

String.prototype.indexOf

From MDN: The indexOf() method, given one argument: a substring to search for, searches the entire calling string, and returns the index of the first occurrence of the specified substring. Given a second argument: a number, the method returns the first occurrence of the specified substring at an index greater than or equal to the specified number.

const str = "Hello, there!";
str.indexOf("there");
// Output: 7

6. String .slice

String.prototype.slice

From MDN: The slice() method extracts a section of a string and returns it as a new string, without modifying the original string.

const str = "Hello, there!";
console.log(str.slice(7));
// Output: 'there!'

console.log(str.slice(1, 5));
// Output: 'ello'

console.log(str.slice(-6));
// Output: 'there!'

console.log(str.slice(-7, -3));
// Output: 'the'

7. String .replace

String.prototype.replace

From MDN: The replace() method returns a new string with one, some, or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced. The original string is left unchanged.

const str = "Hello, there!";
str.replace("there", "world");
// Output: 'Hello, world!'

That’s it!

After reading about these string methods, you might want to explore them more. We suggest clicking the links in the MDN descriptions, and reading more about them there.

Don’t forget to check out these array methods.