Checkout the latest course: Building REST APIs with Flask and Python in 2023

Lets learn about some important Javascript string methods

Article Author
Pratap Sharma4 mins read
javascriptstringmethod

In this article, I covered some of the most commonly used javascript string methods, and I tried to explain everything in detail with examples, hope it will help you in some way.

Also, I haven't cover methods such as toUpperCase or toLowerCase since they are straightforward to understand.

indexOf()

As the function name suggests, the indexOf method returns the index of the first occurrence of a specified value in a string.

let str =
  "Hey my name is Pratap, the author behind this article. Pratap loves coding";

console.log(str.indexOf("Pratap")); //15
// It returns 15 since the first occurance of "Pratap" in str string is at index 15.

lastIndexOf()

lastIndexOf() is just the opposite of indexOf(). The lastIndexOf() method returns the index of the last occurrence of a specified value in a string.

let str =
  "Hey my name is Pratap, the author behind this article. Pratap loves coding";

console.log(str.lastIndexOf("Pratap")); //55
// It returns 55 since the last occurance of "Pratap" in str string is at index 55.

Both indexOf() and lastIndexOf() methods are case sensitive. Both indexOf() and lastIndexOf() methods return -1 if the value you passed is not found in the string.

slice()

With the slice() method, we can extract part of a string, and this method returns the extracted portion of the string.

slice() method takes two parameters:

  • start: from which index you want to start extracting.
  • end: until which index you want to extract.
let str =
  "Hey my name is Pratap, the author behind this article. Pratap loves coding";

console.log(str.slice(0, 21)); //Hey my name is Pratap
// First parameter of slice is start and second parameter is end.

So, the above method prints Hey my name is Pratap. It is because we are asking it to extract a string that starts from the 0 index and ends at the 21 index.

You can use a negative number as an end parameter to define the index from the end of the string. If you fail to pass the second parameter, then it returns the exact string.

split()

The split() method is used to split a given string into an array of strings. It separates the given string into substring using a specified separator, provided as a parameter.

Split takes two parameters: separator & limit.

let str = "Hey my name is Pratap, the author behind this article.";

console.log(str.split(" ")); // ["Hey", "my", "name", "is", "Pratap,", "the", "author", "behind", "this", "article."]

In the example above, I have used " " empty space as a separator to split the given string, so split() splits the str string using the " " empty space.

But how does it splits?

The split() method will loop through the given string. Whenever it founds " " empty space or splitter, it splits that part. In the above example, it encountered a space between Hey and my it splits it, and it goes on till the end. Once it completes splitting, it returns an array of all the splitted strings.

Let's look at another example again:

let str = "Split;me;using;semi-colon";

console.log(str.split(";")); //["Split", "me", "using", "semi-colon"]

In the example above, we are using ; semi-colon as the separator. It starts splitting whenever it finds ; semi-colon in the string. Once splitting is done, then it will return the separated words/string as an array.

The limit parameter: split() method also takes a second parameter which is an optional parameter - limit. As the name suggests, we can limit the number of splits to be done.

let str = "Split;me;using;semi-colon";

console.log(str.split(";", 3)); //["Split", "me", "using""]

In the example above, we have set the limit of the split to 3. Therefore the split() method will split only 3 times and returns the array of those 3 strings.

replace()

The replace() method searches a string for a specific value or a regular expression, and if it matches the specified value, it replaces it with another string. replace() replaces only the first occurrence.

replace() takes two parameters:

A string that is to be replaced. A string that replaces the first param

replace() returns a new string with the replaced string.

let str =
  "Hey my name is Pratap, the author behind this article. Pratap loves coding";

console.log(str.replace("Pratap", "Sid")); // Hey my name is Sid, the author behind this article.

In the above example, the replace() method finds the first occurrence of "Pratap" and replaced it with "Sid", and it returns a new string with the replaced value.

You can also use Regular Expression to find and replace.

concat()

The concat() method is used to join two or more strings.

let str1 = "Hey my name is Pratap, the author behind this article.";
let str2 = "Pratap loves coding.";
let str3 = "This example will help you understand the example";

console.log(str1.concat(str2, str3));
// Hey my name is Pratap, the author behind this article.Pratap loves coding.This example will help you understand the example.

trim()

The trim() method removes the white spaces from both sides of the string.

let str = " Remove the spaces from start and end. ";

console.log(str.trim()); //Remove the spaces from start and end.

The trim() method does not change the original string but returns a new string after removing spaces from both the ends.

includes()

includes() method used to determine whether a string contains the given characters within the string or not. It will return true if the string contains the specified characters. Else, it will return false.

let str = "Remove the spaces from start and end.";

console.log(str.includes("start")); // true
console.log(str.includes("middle")); // false
console.log(str.includes("end")); // true

includes() also takes the second parameter, i.e., the starting position in which you want to start searching.

let str = "Remove the spaces from start and end.";

console.log(str.includes("Remove", 5)); //false

In the above example, we defined the starting position 5. Now includes() will start searching "Remove" from the 5th index and returns false as there are no "Remove" after the 5th index.

To sum it up

This is it from this article. If you'd like to know more about other string methods, do drop a comment so that I can come up with the second part.

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

Please don't hesitate to drop a comment here if I miss anything. Also, let me know if I can make the post better.

Discussions

Up next