10 Must know JavaScript string methods for everybody
Tags: javascript, codenewbie, beginners, tutorial
Published: 2020-01-13 23:17:28

---
canonical_url: https://inspiredwebdev.com/10-javascript-string-methods
---

> This article was originally posted on my [blog](https://inspiredwebdev.com/10-javascript-string-methods). Head over to [inspiredwebdev.com](https://inspiredwebdev.com/10-javascript-string-methods) for more articles and tutorials.

Hi, I am Alberto Montalesi, a full-stack self-taught developer. I create practical JavaScript tutorials and courses on my website [inspiredwebdev.com](https://inspiredwebdev.com) to inspire other developers to grow and build the career that they want.

<br />

`string` is a `JavaScript`'s primitive type that is used to represent a sequence of characters.
They are used to store much different information, from names, product descriptions, etc.. and hopefully NOT passwords!.

In this article, we are going to look at 10 String methods that you will see yourself use on an almost daily basis once you start working with `JavaScript`.

At the end of this article you will find a link to download a set of **flashcards** to bring with you and revise the concepts discussed in this article.

If you are not too familiar with `JavaScript` you may be wondering why `string` (the primitive) and `String.` in the method names are written in two different cases. The answer is that lowercase `string` refers to the primitive type while uppercase `String` refers to the global object on which we can call several built-in methods.

The conversion between the primitive `string` and the `String` object is done automatically and that is why you don't have to write code like the following:

```javascript
const primitiveString = 'Alberto';

const str = new String([primitiveString]);
str.length; // 7
```

Here we are creating a new `String` object from our original string but since JavaScript does the conversion automatically we can simply call the `String` methods directly on the primitive like this:

```javascript
const primitiveString = 'Alberto';
primitiveString.length; // 7
```

Now that we covered some basics, let's start looking at some useful methods.

<br />

## String.prototype.indexOf()

The `String.prototype.indexOf()` returns the index of the **first** occurrence in the calling `String` object of the value that we specify as an argument.

```javascript
const str = "Watermelon";
str.indexOf("melon"); // 5
const str2 = "My dog is named boo. My dog is 7 years old";
str2.indexOf('dog'); // 3
const str3 = "My DOG is named boo. My dog is 7 years old";
str3.indexOf('dog'); // 24
```

In the second `String`, the word "dog" appears twice but `indexOf()` only returns the index of the **first** occurrence.

In the third `String` you will see that "DOG" is now uppercase, thus the result changed from '3' to '24' because the `indexOf()` method is **case sensitive**.

<br />

## String.protoype.includes()

The `String.protoype.includes()`  method is similar to the previous, in that it's used to find one string inside another one but it won't return the index of it but simply a boolean, whether the first string can or cannot be found in the second one.

```javascript
const str = "Watermelon";
str.includes("melon"); // true
const str2 = "WATERMELON";
str2.includes("melon"); // false
```

As you can see, this method is also **case sensitive**, returning us `false` where looking for lowercase "melon" inside of uppercase "WATERMELON".

Since these two methods are very similar, you may be wondering why you should use one over the other and the answer is simply to choose the one that best fits what you are trying to achieve.

Do you need to know at what index does string B appear in string A? use `indexOf()`. Conversely, are you just checking if string B is present in string A? You could use something like: `a.indexOf(b) !== -1 ` but you should just use `includes()` for better clarity of your code.

<br />

## String.protoype.startsWith() / String.protoype.endsWith()

These two methods have been added with the ECMAScript 2015 (ES6) specification and are used to determine if one string starts, or ends, with a specified set of characters returning `true` of `false` appropriately.

Similar to the two methods above, these two are also **case sensitive**

Both methods can take two parameters, the first one is the same for both and it's a string. The second one differs between the two methods:

- `startsWith()` can take an optional parameter indicating the **starting position** where to begin searching for a string. It defaults to 0
- `endsWith()` can take an optional parameter indicating the **length** of the original string to check. It defaults to the length of the string.

Let's look at the following examples for `startsWith()`

```javascript
const str = "Watermelon";
str.startsWith('Water'); // true
str.startsWith('Water', 1); // false
str.startsWith('melon',5 ) // true
str.startsWith('lon',7 ) // false
```

Let's break the code down:

- `str.startsWith('Water');` returns `true` because "Watermelon" includes the string 'Water' right at the beginnng
- `str.startsWith('Water', 1);` returns `false` because the string that is used as the base to check is the original string starting at index 1 which equals to 'atermelon'
- `str.startsWith('melon',5 )` and `str.startsWith('lon',7 )` both return `true` because the string we used to check are the original string starting from index 5 and index 7, which equal to 'melon' and 'lon'.

Now let's look at some examples for `endsWith()`:

```javascript
const str = "Watermelon";

str.endsWith('melon'); // true
str.endsWith('me', 7) // true
str.endsWith('melon', 8) // false
```

Let's break the code down:

- `str.endsWith('melon')` returns `true` because 'Watermelon' ends with 'melon'
- `str.endsWith('me', 7)` returns `true` because we are only checking the first 7 characters of the string, which in turn transforms it from 'Watermelon' to 'Waterme'.
- `str.endsWith('melon', 8)` returns `false` because we specified a max length of 8 which transformed the string to check to 'Watermel' which does not end with 'melon'.

<br />

## String.protoype.slice()

`String.protoype.slice()` is a useful method to extract a section of a string into another string without modifying the original one.

This method takes two parameters: a beginning index and an end index. The second one is optional and it defaults to the end of the string if not specified.

Let's look at an example:

```javascript
const str = "Watermelon";

const str2 = str.slice(1);
// atermelon
const str3 = str.slice(1,5);
// ater
const str4 = str.slice(5);
// melon
const str5 = str.slice(10);
// ''
```

Let's look at what we just did:

- `str.slice(1)` extracts every character from index 1 to the end of the string
- `str.slice(1,5)` extracts characters from index 1 to index 5
- `str.slice(5)` extracts characters from index 5 to the end of the string
- `str.slice(11)` extracts characters from index 11 to the end of the string. Since the string does not have 11 characters, the result we got was an empty string

<br />

<SelfPromoteEducativeBanner />

<br />

## String.prototype.substring()

`String.prototype.substring()` is very similar to the previous `slice()` method, in that it is used to extract a portion of a string. 

It takes two arguments, one for a start index and one for an end index.

Let's look at some examples:

```javascript
const str = "Watermelon";

const str2 = str.substring(1);
// atermelon
const str3 = str.substring(1,5);
// ater
const str4 = str.substring(5);
// melon
const str5 = str.substring(10);
// ''
```

If you look at the examples above and compare them with the ones from the `slice()` method you will wonder what's the difference as they both returned the same substring.

While for the most part, you can use them interchangeably, there are differences between the two.

Look at this example for the first difference:

```javascript
const str = "Watermelon";

const subStr = str.substring(10,0);
// Watermelon
const sliceStr = str.slice(10,0);
// ''
```

In this case, the start index was higher than the end index I've provided and as you can see the two methods behaved differently:

`substring()` will **swap** start and end index if start is **higher** than end while `slice()`, on the other hand, won't do that, thus returning an empty string.

Another difference we can observe has to do with negative indexes:

```javascript
const str = "Watermelon";

const subStr = str.substring(-3);
// Watermelon
const sliceStr = str.slice(-3);
// lon
```

When we set the starting point as a negative value, `substring()` will simply treat it as 0 (and that is also valid for `NaN` values) while `slice()` will start counting the index from the **end** of a string.

That is why `str.slice(-3)` returned 'lon', because it started counting from 3 steps from the end of the string, all the way to the end.

For the most part, you will be fine using either `slice` or `substring()` but it is useful to know that there are some differences between the two.

<br />

## [Keep reading...](https://inspiredwebdev.com/10-javascript-string-methods#section_5)

<br />

---

Thank you very much for reading. Follow me on [DevTo](https://dev.to/albertomontalesi) or on my blog at [inspiredwebdev](https://inspiredwebdev.com/) or on [twitter](https://twitter.com/montalesi). Check out [Educative.io](https://www.educative.io/explore?aff=BqmB) for interactive programming courses. 

Disclaimer: Links to Amazon and Educative are affiliate links, purchases you make will generate extra commissions for me. Thank you

<div className="promotional_banner">
<a href="http://a-fwd.to/5gUojI8" target="_blank">
<img alt="book banner" src="https://raw.githubusercontent.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript/master/assets/banner.jpg" />
</a>
<span>Get my ebook on <a href="http://a-fwd.to/5gUojI8" target="_blank">Amazon</a> and <a href="https://leanpub.com/thecompleteguidetomodernjavascript2019" target="_blank">Leanpub</a></span>
</div>