Why do we use string methods in JavaScript?
Almost all programming languages have a data type called string. Strings are an inevitable data type when it comes to programming languages. To make the processing of strings easier, various methods are used in each programming language. It may change depending on the programming language that we use, but the result of the functions mostly remains the same.
In this blog, let’s discuss the various string methods used in Java Script.
As we all know, JavaScript is a scripting language used to program the web. There may come various instances where we need to manipulate strings in it. So we need to have a thorough knowledge of the string methods in JavaScript. Before getting started, keep in mind that JavaScript is case-sensitive. Hence, JavaScript treats capital letters and small letters differently. So, let’s discuss the basic string methods in JavaScript.
1) Length Method
2) CharAt Method
3) EndsWith Method
4) Includes Method
5) IndexOf Method
6) Match Method
7) Repeat Method
8) Replace Method
9) Slice Method
10) Split Method
11) StartsWith Method
12) Substr Method
13) Substring Method
14) ToLowerCase Method
15) ToUpperCase Method
Here, I have mentioned 15 string methods that are commonly used in javascript. Let’s discuss them in detail.
1) Length Method
The length method is used to calculate the length of the string.
Syntax:
string_variable.length();
The length method returns the length of the string, including white spaces.
Eg:
var str = "Hello Cybrosys";
var str_len = str.length();
console.log("length", str_len);
In the console, we see the value 14, which includes 13 characters and 1 white space.
2) CharAt Method
The charAt method is used to get the character at the specified index of the string. In a string, the count starts from position zero. So, in order to get the first element of a string, we should return the index 0.
Syntax:
string_variable.charAt(‘index’);
The charAt method returns the character at the index mentioned.
Eg:
var str = "Hello Cybrosys";
var char_at = str.charAt(6);
console.log(char_at);
Consoling this we get the value ‘C’, which is the character at the 6th position.
3) EndsWith Method
The endsWith method returns ‘true’ if the string ends with the character or group of characters passed in the endsWith method. If not, the method returns ‘false’.
Syntax:
string_variable.endsWith(‘characters’);
If the ‘characters’ passed is the last character of the string, the function returns true, else false.
Eg:
Case: 1
var str = "Hello Cybrosys";
var is_last = str.endsWith('sys');
console.log(is_last);
The console gives the value true as the string ends with the character ‘sys’.
Case: 2
var str = "Hello Cybrosys";
var is_last = str.endsWith('C');
console.log(is_last);
The console gives a false value as the string does not end with the character ‘C’.
4) Includes Method
The Includes method returns ‘true’ if the character or group of characters passed in the method is present in the string. Else, it returns false.
Syntax:
string_variable.includes(‘characters’);
If the ‘characters’ passed are present in the string, the function returns true, else false.
Eg:
Case: 1
var str = "Hello Cybrosys";
var is_incl = str.includes('sys');
console.log(is_incl);
The console gives the value true as the string contains the characters ‘sys’.
Case: 2
var str = "Hello Cybrosys";
var is_incl = str.includes('xyz');
console.log(is_incl);
The console gives a false value as the string does not contain the characters ‘xyz’.
5) IndexOf Method
The indexOf method returns the index of the first occurrence of the character or characters passed. If the passed character is not present in the string, then the function returns -1.
Syntax:
string_variable.indexOf(‘characters’);
If the characters are present in the string_variable, the method returns the index of the first occurrence of the characters, else it returns -1.
Eg:
Case: 1
var str = "Hello Cybrosys";
var index_char = str.indexOf('sys');
console.log(index_char);
The console gives value 11 as the first occurrence of ‘sys’ occurs at the 11th index.
Case: 2
var str = "Hello Cybrosys";
var index_char = str.indexOf('xyz');
console.log(index_char);
The console gives value -1 as the string does not contain the characters ‘xyz’.
6) Match Method
The match method returns an array with the matches got from the string. If there is no match, the method returns null.
Syntax:
string_variable.match(‘expression’);
Eg:
Case: 1
var str = "Hello Cybrosys";
var match_expr = str.match("sys");
console.log(match_expr);
The console gives an array containing the expression, group, index, and input.
Case: 2
var str = "Hello Cybrosys";
var match_expr = str.match("xyz");
console.log(match_expr);
The console gives ‘null’ as there is no match for the expression in the string.
7) Repeat Method
The repeat method returns a string value with a number of copies of the given string and count.
Syntax:
string_variable.repeat(‘count’);
Eg:
var str = "Hello Cybrosys";
var repeat_expr = str.repeat(3);
console.log(repeat_expr);
The console gives a string ‘Hello CybrosysHello CybrosysHello Cybrosys’. We can see that the string is multiplied by the count we passed.
8) Replace Method
The replace method searches the string for the first occurrence of the first argument passed and replaces it with the second argument. If the searched argument is not present in the string, the function returns the string itself.
Syntax:
string_variable.replace(‘first_value’, ‘second_value’);
Eg:
Case 1:
var str = "Hello Cybrosys";
var replace_expr = str.replace('Hello', Hai);
console.log(replace_expr);
The console gives ‘Hai Cybrosys’, because the function replaced the first argument ‘Hello’ with ‘Hai’.
Case 2:
var str = "Hello Cybrosys";
var replace_expr = str.replace('Hai', 'Bye');
console.log(replace_expr);
The console gives ‘Hello Cybrosys’, because the function was unable to find ‘Hai’, so it returns the string itself.
Case 3:
var str = "Hello Cybrosys Hello";
var replace_expr = str.replace('Hello', 'Hai');
console.log(replace_expr);
The console gives ‘Hai Cybrosys Hello’, because the function replaces the first occurrence of ‘Hello’ from the string.
9) Slice Method
In the slice method, we pass two indices. The first argument is the starting index, and the second argument is the ending index. The method slices the string between these indices and returns it.
Syntax:
string_variable.slice(‘start index’, ‘end index’);
Eg:
var str = "Hello Cybrosys";
var slice_expr = str.slice('6', '11');
console.log(slice_expr);
The console gives ‘Cybro’, that is from the 6th position of the string to the 11th position of the string.
When we pass only one argument to the function, the function takes the argument as the starting index and returns the string from the start index to the end of the string.
10) Split Method
The split method splits the string into an array of substrings, excluding the arguments passed to it, and returns the array. We can also pass a limit to limit the elements in the array returned.
Syntax:
string_variable.split(‘character’, ‘limit’)
Eg:
var str = "Hello Cybrosys";
var split_expr = str.split(' ');
console.log(split_expr);
The console gives an array of two elements ‘Hello’ and ‘Cybrosys’. If I pass a limit 1, then an array containing only one element will be passed. In this case, an array with the element ‘Hello’ is passed.
11) StartsWith Method
The startsWith method returns True if the string starts with the character/ characters passed as an argument, else False. We can also pass an index along with the character as a second argument to check if the index of the string starts with the character/ characters.
Syntax:
string_variable.startsWith(‘value’, ‘index’)
Eg:
Case 1:
var str = "Hello Cybrosys";
var start_expr = str.startsWith("He");
console.log(start_expr);
In this case, the console gives true as the string starts with the given argument.
Case 2:
var str = "Hello Cybrosys";
var start_expr = str.startsWith("Cy");
console.log(start_expr);
In this case, the console gives false as the string doesn't start with the given argument.
Case 3:
var str = "Hello Cybrosys";
var start_expr = str.startsWith("Cy", 6);
console.log(start_expr);
Here, we pass an index along with the value, and since the start index of the value is correct, the console gives true.
12) Substr Method
The substr method is used to extract the characters between the given index. The extracted characters will begin from the ‘start value,’ and extraction ends according to the length passed with the method.
Syntax:
string_variable.substr(‘start_index’, ‘length’)
Eg:
var str = "Hello Cybrosys";
var substr_expr = str.substr(6, 8);
console.log(substr_expr);
In this case, the console gives us the value ‘Cybrosys’. The Substr method extracted the string from the 6th index and length 8.
If the length exceeds the count of the string, then all characters after the index is returned. The same happens if we don’t mention the length.
13) Substring Method
The substring method extracts the string from the start index up to the end index passed in the method. If the start value is greater than the end value, the method interchanges the arguments and performs the function.
Syntax:
string_variable.substring(‘start_index’, ‘end_index’);
Eg:
var str = "Hello Cybrosys";
var substring_expr = str.substr(13, 5);
console.log(substring_expr);
Here, the console gives us the value ‘Cybrosys’. The start and end indices are interchanged here for the function to work.
14) ToLowerCase Method
The toLowerCase method converts the string to lowercase letters.
Syntax:
string_variable.toLowerCase();
Eg:
var str = "Hello Cybrosys";
var toLowerCase_expr = str.toLowerCase();
console.log(toLowerCase_expr);
Here, the console gives us the value “hello cybrosys”. The uppercase letters are changed to lowercase letters.
15) ToUpperCase Method
The ToUpperCase method is like the inverse of the toLowerCase method. It converts the string to uppercase letters.
Syntax:
string_variable.toUpperCase();
Eg:
var str = "Hello Cybrosys";
var toUpperCase_expr = str.toUpperCase();
console.log(toUpperCase_expr);
Here, the console gives us the value “HELLO CYBROSYS”. The lowercase letters are changed to uppercase letters.
So, these are the most commonly used string methods in JavaScript. Now that you have gone through this blog, I hope you get the idea of string methods, their difference, and how to use them in JS.