Javascript String Methods ( 20 Methods That You Should know )

In the previous article, I wrote about javascript strings. In this article, I will explain Javascript string methods in details.

Javascript strings methods are useful for manipulating strings.

Before going to learn javascript string methods, you need to understand string indexing.

String index is the position of a string character which starts from 0 (zero).

For example, let’s consider the below string.

var name = "joovin";

In the above example “joovin” is the string. In this string, each and every character has a numeric position called index.

Character “j” has an index of 0, and character “o” has an index of 1.

And character “n” has an index of 5.

See the picture below for better understanding.

 

javascript string methods - diagram of string indexing

Hoping, now you understand how javascript stores the index for strings.

Javascript String Methods

Below is the list of most important javascript string methods.

1. charAt

charAt method displays a character of a string using the specified index which we provide.

Syntax:      string_name.charAt(index);

var name = "joovintechcafe";
console.log(name.charAt(0)) // prints  j
console.log(name.charAt(5)) // prints  n

2. concat

concat method clubs two string into a single string.

Syntax:       string_one.concat(string_two); 

var firstname = "joovin";
var lastname  = "south";
var fullname = firstname.concat(lastname); //combining two strings.
console.log(fullname); // displays joovinsouth

3. endsWith

endsWith method displays true if the string ends with the given pattern. And displays false if it does not end with the given pattern.

Syntax: string_name.endsWith(pattern);

var name = "joovintechcafe";
console.log(name.endsWith("cafe")); // displays true
console.log(name.endsWith("tech")); // displays false

4. includes

includes method displays true if the given pattern includes on the string. And displays false if the given pattern does not include on the string.

Syntax: string_name.includes(pattern); 

var name = "joovintechcafe";
console.log(name.includes("tech"));  //displays true
console.log(name.includes("joovin")); //displays true
console.log(name.includes("code"));
//displays false because name not includes the code.

5. indexOf

indexOf method displays the index of a given character on the string.

Syntax: string_name.indexOf(string_character);

var name = "joovintechcafe";
console.log(name.indexOf("j")); // displays 0
console.log(name.indexOf("f")); // displays 12
console.log(name.indexOf("o")); // displays 1

Note: When the same character occurs more than one time in a string only index of the first character will be returned.

6. match

This method mostly used in regular expressions. It returns an array if the given pattern matched with the string.

Syntax: string_name.match(pattern);

var name = "joovintechcafe";
console.log(name.match("joovin")); 

//output
["joovin", index: 0, input: "joovintechcafe", groups: undefined]

7. repeat

repeat method repeats a string, of a given number of times.

Syntax: string_name.repeat(number_of_times);

var name = "joovin";
console.log(name.repeat(2));
// displays  "joovinjoovin"
console.log(name.repeat(5));
// displays  "joovinjoovinjoovinjoovinjoovin"

8. replace

This method replaces a specific pattern with the new given pattern.

Syntax: string_name.replace(old_pattern,new_pattern):

var name = "joovintechcafe";
console.log(name.replace("joovin","code"));
// displays  "codetechcafe"

9. search

The search method is also used in regular expressions. We will learn about regular expressions, in later articles.

If the given pattern founds, it will return the index of the first character of a given pattern. If it not founds it will return -1.

Syntax: string_name.search(pattern);

var name = "joovintechcafe";
console.log(name.search("joovin")); //returns 0
console.log(name.search("tech")); //returns  6
console.log(name.search("south")); //returns -1

10. slice

slice method returns a string pattern from the starting index to the ending index, which we were given.

Syntax: string_name.slice(starting_index, ending_index);

var name = "joovintechcafe";
console.log(name.slice(0,6));   // returns joovin
console.log(name.slice(6,10));  // returns tech

11. split

It cuts the string into multiple parts and converts into an array using the separator we passed.

Syntax: string_name.split(separator);

var name = "joovin tech cafe";
console.log(name.split(" ")); //splitting string using space separtor
//prints   ["joovin", "tech", "cafe"]
console.log(name.split("c")); //splitting string using c as a separator.
//prints ["joovin te", "h ", "afe"]

12. startsWith

This method checks the string whether it starts with the given pattern or not. Returns true if starts with a given pattern. And return false if not starts with the given pattern.

Syntax: string_name.startsWith(pattern);

var name = "joovin tech cafe";
console.log(name.startsWith("joovin")); // displays true
console.log(name.startsWith("cafe"));  // displays false

13. substring

Returns the string pattern the between the starting index to ending index.

Syntax: string_name.substring(starting_index, ending_index);

var name = "joovin tech cafe";
console.log(name.substring(0,6)); // displays joovin
console.log(name.substring(6,12)); // displays tech cafe

14. toLowerCase

Converts all string characters into a lowe case characters.

Syntax: string_name.toLoweCase();

var name = "JOOVIN TECH CAFE";
console.log(name.toLoweCase()); // displays joovin tech cafe

15. toUpperCase

Converts all string characters into a upper case characters

Syntax: string_name.toUpperCase();

var name = "joovin tech cafe:;
console.log(name.toUpperCase()); // displays JOOVIN TECH CAFE

16. trim

This method removes the white spaces from string on the both sides. White spaces means (space,tab,no-break, etc).

Syntax: string_name.trim();

var name = " joovin tech cafe ";
console.log(name); // displays " joovin tech cafe ";
console.log(name.trim()); // displays "joovin tech cafe";

17. lastIndexOf

This method works similar to the indexOf method. But lastIndexOf method searches the index from right to left. And return the index value of a given character.

Syntax: string_name.lastIndexOf(character);

var name = "javascript";
console.log(name.lastIndexOf("i")); // displays 7
console.log(name.lastIndexOf("a")); // displays 3.

18. padEnd

padEnd method pads the string with the given character from the right side.

Syntax: string_name.padEnd(number_of_times,character);

var name = "javascript";
console.log(name.padEnd(20,' ')); // padding string with space
// displays "javascript          "
console.log(name.padEnd(20,'.')); // padding sting with dot.
// displays "javascript………."

19. padStart

Exactly works as a padEnd method. But It pads the given string from the left side.

Syntax: string_name.padStart(number_of_times,character);

var name = "javascript";
console.log(name.padStart(20,' ')); //padding string with space
// displays "          javascript"
console.log(name.padStart(20,'.')); //padding string with dot.
// displays "……….javascript"

20. toString

Converts any variable type into a string.

Syntax: variable.toString();

var name = 20;
console.log(name.toString()); // displays "20"
var result = true;
console.log(result.toString()); // displays "true"

In conclusion still, there is a lot of javascript string methods are there. But we use them rarely. So these 20 methods are important and we use them on regular basis.

If you want to know more about javascript string methods follow the below link

Complete String Reference

Hoping! This article may help you. If you like this article, please share with your friends. And If you have any doubts feel free to comment below.

Read other javascript tutorials on my blog.

  1. Follow This Tutorial To Learn Javascript In One Day.
  2. Javascript Variables – Learn How the Javascript Stores The data
  3. Javascript Operators – How Javascript Handle Different Types Of Operations
  4. Learn Javascript Strings.

 

Thanks for reading!

 

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by Pixelbart

Leave a Reply

Your email address will not be published. Required fields are marked *