🚀 26 Built-in String Methods | JavaScript
Tags: javascript, webdev, tutorial, codenewbie
Published: 2020-06-06 12:02:22

---
title: 🚀 26 Built-in String Methods | JavaScript
published: true
description: Being aware of the tools we have can make you a better developer. In this video/article we will go over 26 different string methods.
tags: javascript, webdev, tutorial, codenewbie
cover_image: https://imgur.com/WIBcOyk.png
---


You can watch the video version here or keep scrolling for the code snippets.
 
⏰ There is links in the video description for all the timestamps so you can jump to the parts you like. 💜 

{% youtube V--8XIWqjnY %}

🔗 All the titles are links to the MDN docs.

### [charAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt) 
Returns the character at the specified index.
```js
"Hello World".charAt(2); // returns "l"
// If we pass no value it defaults to an index of 0
"Hello World".charAt(); // returns "H"
// If we add an index that is undefined we get an empty string
"Hello World".charAt(20); // returns ""
```

### [charCodeAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt) 
Returns the unicode of the character at the specified index.
```js
"Hello world".charCodeAt(2); // returns 72 for "l"
// If we pass no value it defaults to an index of 0
"Hello world".charCodeAt(); // returns 108 for "H"
```

### [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat) 
Joins two or more strings, and returns a single concatenated string.
It's very similar to using the `+` operator on strings.
```js
"Hello".concat(" world"); // returns "Hello world"
// With multiple strings
"Hello".concat(" world", " and", " other", " planets"); // returns "Hello world and other planets"
```

### [endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith) 
Checks whether a string ends with specified string. We can add an optional second parameter with a limit to the string.
```js
"Dogs are the best!".endsWith('best'); // returns false
"Dogs are the best!".endsWith('best!'); // returns true
// With second parameter for ending index
"Dogs are the best!".endsWith('best', 17); // returns true (because we picked the end of the string is at index 17)
```

### [fromCharCode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode) 
Converts Unicode values to readable characters. 
`fromCharCode` is one of the few static methods available on the String Object. All the other ones we have been using have been what is known as an instance property. We access it by using the `String` keyword.
```js
String.fromCharCode(67); // returns "C"
// Using multiple characters
String.fromCharCode(67, 111, 100, 250); // returns "Codú"
```

### [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes) 
Checks whether a string contains a specific string.
```js
"Dogs are the best!".includes("Dogs") // returns true
// With optional starting index
"Dogs are the best!".includes("Dogs", 1) // returns false
"Dogs are the best!".includes("ogs", 1) // returns true
```

### [indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf) 
Returns the position of the first found occurrence of a specified value in a string.
```js
"test one two test".indexOf("test") // returns 0
"test one two test".indexOf("x") // returns -1
// With optional starting index
"test one two test".indexOf("test", 1) // returns 13
```
### [lastIndexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf) 
Returns the position of the last found occurrence of a specified value in a string.
```js
"test one two test".lastIndexOf("test") // returns 13
// With optional limit because search starts from index 12.
"test one two test".lastIndexOf("test", 12) // returns  0
```
### [match](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match)
The match() method retrieves the result of matching a string against a regular expression or string.
```js
// returns the first match
"This is the BEST".match("i"); // returns a regex iterator like this ["i", index: 2, input: "This is the BEST", groups: undefined]
// With a regex looking for uppercase characters
"This is the BEST".match(/[A-Z]/); // returns a regex iterator like this ["T", index: 0, input: "This is the BEST", groups: undefined]
// you can get all the matches without the details if you use a global regular expression
"This is the BEST".match(/[A-Z]/g); // returns [ 'T', 'B', 'E', 'S', 'T' ]
```

### [matchAll](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll)
**A new feature in ES2020 so check your browser compatibility.** matchAll is like the match method on steroids. It returns an `RegExpStringIterator` for the matches.

```js 
// Working with with the RegExpStringIterator can become easy to work with if we spread it into an array.
const matches = [..."This is the BEST".matchAll(/[A-Z]/g)];
matches.forEach(element => console.log(element)); 

/* 
console.logs 
[ 'T', index: 0, input: 'This is the BEST', groups: undefined ]
[ 'B', index: 12, input: 'This is the BEST', groups: undefined ]
[ 'E', index: 13, input: 'This is the BEST', groups: undefined ]
[ 'S', index: 14, input: 'This is the BEST', groups: undefined ]
[ 'T', index: 15, input: 'This is the BEST', groups: undefined ] */

```
For more information on working with the iterators check out the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll).

### [normalize](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize)

We can normalize a unicode string with normalize, what does that mean? Basically that we can see it in human readable form.
```js
"\u0043\u006f\u0064\u00fa".normalize(); // returns "Codú"
```
### [padEnd](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd)
We can add "padding" to the end of a string so it equals a certain length. We pad it with whitespace by default but can choose replacement characters too.
```js
// Entire length is 10 after padding
"Hello".padEnd(10); // returns "Hello     "
// Entire length is 10 after padding with characters too
"Hello".padEnd(10, "*"); // returns "Hello*****"
```

### [padStart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart)
We can add "padding" to the start of a string so it equals a certain length. We pad it with whitespace by default but can choose replacement characters too.
```js
// Entire length is 10 after padding
"Hello".padStart(10); // returns "     Hello"
// Entire length is 10 after padding with characters too
"Hello".padStart(10, "*"); // returns "*****Hello"
```
These padding might seem irrelevant but there was a case where a popular library that was pulled from npm that did this was pulled and basically broke the internet. You can google the left-pad incident for information on that. 

### [repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat)
Takes a number as an argument and repeats the string as many times as specified and returns as a single string.
```js
"Hello".repeat(3); // returns "HelloHelloHello".
```

### [replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
Searches a string for a specified value, or a regular expression, and returns a new string where the specified value(s) are replaced. We can replace these values with a string or pass a function to operate on the match. Unless we pass a global regex it will only replace the first found occurance.
```js
"cat, cat, cat".replace(/cat/, 'dog'); // returns "dog, cat, cat"
"cat, cat, cat".replace(/cat/g, 'dog'); // returns "dog, dog, dog"
"cat, cat, cat".replace("cat", 'dog'); // returns "dog, cat, cat"
"cat, cat, cat, bird".replace("cat", (i) => i + "dog"); // returns "catdog, cat, cat, bird"
```

### [replaceAll](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)
We can use a regex or string to replace all instances of a string. We can replace these values with a string or pass a function to operate on the match. When working with global regex's there is not much difference between `replace` and `replaceAll`. Replace all only takes global regexs but if you pass it a string it will automatically replace all instances of that string. The second param can be a string to replace each instance or a function to operate on each instance.
```js
"cat, cat, cat, bird".replaceAll(/cat/g, 'dog'); // returns "dog, dog, dog, bird" 
"cat, cat, cat, bird".replaceAll("cat", 'dog'); // returns "dog, dog, dog, bird" 
// With a function
"cat, cat, cat, bird".replaceAll("cat", (i) => i + "dog"); // returns "catdog, catdog, catdog, bird"
```
### [search](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/search)
Searches a string for a specified value, or regular expression, and returns the starting position of the match.
```js
"cat, dog, cat".search("dog"); // returns 5
// With a regex
"cat, dog, cat".search(/dog/g); // returns 5
```

### [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice)
Extracts a part of a string and returns a new string.
```js
"This is a string I want to slice".slice(27); // returns 'slice'
"This is a string I want to slice".slice(27, 28); // returns 's'
// And we can work backwards with negative values such as
"This is a string I want to slice".slice(-5); // returns "slice"
"This is a string I want to slice".slice(-5, -1); // returns "slic"
```
### [split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) 
Splits a string into an array of substrings. We can give an optional limit as a second parameter.
```js
// For all characters to be split give an empty string
"Hello darkness".split(""); // returns ["H", "e", "l", "l", "o", " ", "d", "a", "r", "k", "n", "e", "s", "s"]
// To split at spaces
"Hello darkness my old friend".split(" "); // returns ["Hello", "darkness", "my", "old", "friend"]  
To limit the return length we can use an optional second parameter
"Hello darkness my old friend".split(" ", 2); // returns ["Hello", "darkness"] 
```

### [startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)
Checks, whether a string begins with specified characters and returns a boolean. We can give it an optional starting index as a second parameter.
```js
"Hello".startsWith("h"); // true
"Hello".startsWith("e"); // false
// With optional starting index
"Hello".startsWith("e", 1); // true
```

### [substring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring)
Extracts the characters from a string, between two specified indices. The second parameter is optional.
```js
"Hello".substring(1, 4); // "ell"
// If we give no second parameter it will pick assume you have no end index.
"Hello".substring(1); // returns "ello" 
```

### [toLowerCase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
Converts a string to lowercase letters
```js
"HeLlO wOrLd".toLowerCase(); // returns "hello world"
```

### [toUpperCase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) 
Converts a string to uppercase letters.
```js
"Hello world".toUpperCase(); // returns "HELLO WORLD"
```

### [trim](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim) 
Removes whitespace from both ends of a string.
```js
"   Hello world   ".trim(); // returns "Hello world"
```

### [trimEnd](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd)
Trims whitespace from the end
```js
"   Hello world   ".trim(); // returns "   Hello world"
```

### [trimStart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart)
Trims whitespace from the start of a string.
```js
"   Hello world   ".trim(); // returns "Hello world   "
```


---

[Follow me on Twitter](https://twitter.com/nialljoemaher)

Subscribe on [Codú Community](https://www.youtube.com/c/Cod%C3%BACommunity)