15 Highly Used JavaScript String Methods That You Should Know

Below are 15 commonly used JavaScript string methods that are worth remembering. Consider it a simple, readable guide on how to each one.

Let’s dive straight in!

1. charAt

The charAt method tells you what character is at the entered index passed into it. It takes one argument, and that's the index of a string.

The syntax looks like this: something.charAt(index)

For example,

const str = 'Here are a couple of words'

str.charAt(5) //returns 'a'

//or on a string itself
'Hey how are ya'.charAt(2) //returns 'y'
'hello'.charAt(4) //returns 'o'

2. charCodeAt

The charCodeAt method will tell you the UTF-16 code for the index passed in. It accepts one argument, and that's an index of a string.

The syntax looks like this: something.charCodeAt(index)

For example,

const str = 'Here are a couple of words' 
str.charCodeAt(5) //returns '97'

//or on a string itself
'Hey how are ya'.charCodeAt(2) //returns '121'

3. concat

The concat method combines or concatenates strings together. It takes one argument, and that is the string(s) which we are combining with the other string that this method is originally called upon. It will return a new string.

The syntax looks like this: something.concat(string1, string2, ...,stringN)

For example,

const str = 'Here are a couple of words'

str.concat(', and here is another couple of words')
//returns 'Here are a couple of words, and here is another couple of words'

//It can also concatenate strings held in variables
const otherStr = 'Hey how are ya'

str.concat(otherStr) //returns 'Here are a couple of wordsHey how are ya'

4. includes

The includes method in JavaScript is used to determine whether a string contains a specified substring. It returns a boolean value ( true or false) depending on whether the substring is found. The arguments are a string (required), and its index (optional).

The syntax looks like this: something.includes(value, index)

For example,

const str = 'Here are a couple of words'

str.includes('are') //returns true
str.includes('yes') //returns false 
'hello how are you'.includes('hi') //returns false 
'hello how are you'.includes('hello') //returns true
'hello how are you'.includes('hello', 2) //returns false

5. indexOf

The indexOf method is used to find the first occurrence of a specified substring within a string. It will return the index of the first character of that substring if found, and it will return -1 if not found. The arguments passed into indexOf is the substring you are looking for (required), and the position you are looking for (optional).

The syntax looks like this:something.indexOf(value, index)

For example,

const str = 'Here are a couple of words'

str.indexOf('are') //returns 5
 /*
'H' -> 0, 'e' -> 1 , 'r' -> 2, 'e' -> 3, ' ' -> 4, 'a' ->5,
which is where 'are' is!
*/ 

'hello how are you'.indexOf('hey') //returns -1, it doesn't exist!
'hello how are you'.indexOf('hello', 0) //returns 0
'hello how are you'.indexOf('hello', 2) //returns -1

6. indexOf

The match method in JavaScript is used to retrieve matches when working with strings and regular expressions. It returns an array of results or null if no match is found. It takes one argument, and that is a regular expression.

The syntax looks like this:something.match(RegEx)

For example,

const str = 'Here are a couple of words'
str.match(/couple/) //returns ['couple']
str.match(/\w+/g) //returns ["Here", "are", "a", "couple", "of", "words"]
/*
Returns all the words in the string as an array. The `\w+` pattern
matches one or more word characters.
*/

str.match(/z/) //returns null

7. repeat

The repeat method creates a new string by repeating the original string a specified number of times. It takes one argument, and that is the number of times you want the string to be repeated. Note that only whole numbers are excepted, and something like 1.5 will get floored to 1.

The syntax looks like this:something.repeat(count)

For example,

const str = 'Here are a couple of words'
str.repeat(5) 
/*
returns 'Here are a couple of wordsHere are a couple of wordsHere
are a couple of wordsHere are a couple of wordsHere are a couple of words'
*/

'Go! '.repeat(3) //returns 'Go! Go! Go! '
'hello'.repeat(2) //returns 'hellohello'

8. replace

The replace method returns a new string with some or all matches of a pattern replaced by a replacement string or function. The original string remains unchanged. It takes the required arguments of a substring or regular expression to match, and the value that we will replace our substring with. If it is a string, only the first occurrence will be replaced.

The syntax looks like this: something.replace(pattern, replacement)

For example,

//Using a string
const str = 'Here are a couple of words'
str.replace('are', 'were') //returns a new string of 'Here were a couple of words'

//Using a regular expression
str.replace(/o/g, '0') //returns 'Here are a c0uple 0f w0rds'

9. search

The search method is used to search a string for a match against a regular expression and returns the index of the first match found. If no match is found, it returns -1. The only argument accepted is a regular expression to search for within the string.

The syntax looks like this: something.search(regexp)

For example,

const str = 'Here are a couple of words'

str.search('couple') //returns 10 
//The word "couple" starts at index 10 in the string.

str.search('missing') //returns -1

10. slice

The slice method extracts a shallow copy of a portion of a string (or array) and returns it as a new string (or array). It doesn't modify the original string. It takes the arguments of the index where you want to begin slicing (required) and the index where you want to end slicing (optional). Note that the end index is not actually included in the sliced array. Additionally, if our beginning index is negative, it will count from the end of the string.

The syntax looks like this:something.slice(beginIndex, endIndex)

For example,

const str = 'Here are a couple of words'
str.slice(5) // returns 'are a couple of words'
str.slice(5, 8) // returns 'are'
str.slice(-5) // returns 'words'
str.slice(-15, -6) //returns 'couple'

11. split

The split method splits a string into an array of substrings based on a specified separator. The method returns a new array and does not modify the original string. It takes the arguments of the string or regular expression that tells the method where each split should happen (required). If empty it will split between each character. The second argument it takes is the maximum number of splits it should make (optional). If not included, it will split as many times as possible.

The syntax looks like this:something.split(separator, limit)

For example,

const str = 'Here are a couple of words'
str.split(' ') // returns ["Here", "are", "a", "couple", "of", "words"]

const fruits = 'apple,banana,cherry'
fruits.split(',') // returns ["apple", "banana", "cherry"]

12. substr

The substr method is used to extract a portion of a string, starting at a specified index and extending for a specified number of characters. The arguments it takes is the starting index (required) and the number of characters to extract, starting from the startIndex (optional). If not provided, it will extract the characters from the startIndex until the end of the string.

The syntax looks like this:something.substr(startIndex, length)

For example,

const str = 'Here are a couple of words'

str.substr(5, 3) // returns "are"
str.substr(-5, 3) // returns "words"
str.substr(5); //returns "are a couple of words"

Note: The substr method is considered legacy and is not recommended for use in new code since it is being replaced by the more standard methods like slice. Use slice if you're working on newer projects, as it offers better compatibility and clarity.

13. toLowerCase

The toLowerCase method is used to convert all characters in a string to lowercase. It takes no arguments. It does not modify the original string.

The syntax looks like this:something.toLowerCase()

For example,

const str = 'Here Are A Couple Of Words'
str.toLowerCase() // returns "here are a couple of words"
'HEY I AM AWESOME'.toLowerCase() //returns 'hey i am awesome'
'UPPERCASE'.toLowerCase() //returns uppercase

14. toUpperCase

Similarly to toLowerCase, the toUpperCase method is used to convert all characters in a string to uppercase. It takes no arguments. It does not modify the original string.

The syntax looks like this: something.toUpperCase()

For example,

const str = 'Here Are A Couple Of Words'
str.toUpperCase() //returns "HERE ARE A COUPLE OF WORDS"
'hey i aM awEsome'.toUpperCase() //returns 'HEY I AM AWESOME'
'lowercase'.toUpperCaes() //returns LOWERCASE

15. trim

The trim method removes whitespace from the beginning and/or the end of a string. If there is no whitespace at the beginning or end, nothing changes. It takes no arguments. It returns a new string with leading and trailing whitespace removed. It does not modify the original string.

The syntax looks like this:something.trim()

For example,

const str = ' Here are a couple of words   '
str.trim() // returns 'Here are a couple of words'
' hello'.trim() //returns 'hello'

const str = ''
str.trim() //returns ''. An empty string remains empty.

Well, that’s all for 15 commonly used JavaScript string methods. I really hope you learned something from this article, and I hope you implement these methods within your own code.

Happy coding!