Working with strings without knowing the methods will be a nightmare for developers.
To get rid of those nightmares, we need to know the most essential properties and methods of strings in JavaScript.
Let’s explore them one by one.
length
The property length returns the length of the string.
const company = "GeekFlare";
console.log(company.length);
toUpperCase()
The method toUpperCase turns every character in the string to the upper case and returns it. It doesn’t change the original string.
const company = "GeekFlare";
const upperCaseCompany = company.toUpperCase();
console.log(upperCaseCompany);
toLowerCase()
The method toLowerCase turns every character in the string to the lower case and returns it. It doesn’t change the original string.
const company = "GeEkFlaRe";
const lowerCaseCompany = company.toLowerCase();
console.log(lowerCaseCompany);
trim()
The method trim removes the starting and ending white spaces from the string. It is an in-place operation i.e.., updates the original string.
const company = " Geek Flare ";
console.log(company);
console.log(company.trim());
charAt(index)
The method charAt returns the character at the given index. It returns an empty string if the index is not valid.
const company = "GeekFlare";
console.log(company.charAt(2));
console.log(company.charAt(10));
charCodeAt(index)
The method charCodeAt returns the character ASCII code at the given index. It returns NaN if the index is not valid.
const company = "GeekFlare";
console.log(company.charCodeAt(2));
console.log(company.charCodeAt(10));
slice(startIndex, endIndex)
The method slice returns the substring from the string from startIndex to endIndex (not including). The string.slice(0, 6) returns the substring from the 0th index to 5th index.
const company = "GeekFlare";
console.log(company.slice(0, 4));
The method slice will accept a sing argument as well. If you pass a single argument to the slice method, then it will return the substring from the given index to the end of the string.
const company = "GeekFlare";
console.log(company.slice(4));
The method slice will accept negative indexes as well. The negative indexes are counted from the end of the string. Let’s see an example as it is new to most people.
Given string GeekFlare, the negative indexes are
G = -9, e = -8, e = -7, k = -6
and so on…
The code string.slice(-9, -5) will return Geek for the above example.
const company = "GeekFlare";
console.log(company.slice(-9, -5));
The code string.slice(-5) will return Flare for the above example.
const company = "GeekFlare";
console.log(company.slice(-5));
Note: Negative indexing will not work in IE8 and earlier versions.
substr(startIndex, length)
The method substr is similar to the slice method. The only difference is that the method substr accepts the substring length that needs to be extracted from the original string.
const company = "GeekFlare";
console.log(company.substr(4, 5));
There is another method called substring which is similar to the slice method. But, the method substring won’t accept negative indexes. Try it out.
replace(substring, newSubstring)
The method replace replaces the first instance of the substring with the newSubString.
const statement = "Visit the site Google";
console.log(statement.replace("Google", "GeekFlare"));
indexOf(substring)
The method indexOf returns the starting index of a given character from the string. It will return -1 if the character doesn’t present in the string.
const company = "GeekFlare";
console.log(company.indexOf("Flare"));
console.log(company.indexOf("O"));
The method indexOf will accept the second argument which is an index from which the searching starts for the given substring.
const company = "GeekFlare";
console.log(company.indexOf("e"));
console.log(company.indexOf("e", 5));
There is another method called lastIndexOf which is similar to the method indexOf. The only difference is that the method lastIndexOf searches the character from the ending of the string and returns the index of the first instance of the character. Try it out for the code company.lastIndexOf('e').
split(substring)
The method split splits the given string on the substring and returns the parts as an array.
const statement = "Visit, the, site, GeekFlare";
console.log(statement.split(" "));
console.log(statement.split(", "));
Conclusion
This is not the end. Explore the remaining methods of the strings from the documentation. There might be other methods that are useful in specific cases.
Search and use them in your specific if it’s not listed here.
Happy Coding 🙂
Next, explore some of the popular JavaScript frameworks.
