String methods you need to know in JavaScript

Working with strings without knowing the methods can be a developer’s nightmare.

To get rid of these nightmares, you need to know the most important properties and methods of strings in JavaScript.

Let’s look at them one by one.

length

length property returns the length of the string.

 const company = "GeekFlare";

console.log(company.length);

toUpperCase()

The toUpperCase method converts all characters in a string to uppercase and returns them. The original string remains unchanged.

 const company = "GeekFlare";

const upperCaseCompany = company.toUpperCase();

console.log(upperCaseCompany);

toLowerCase()

The toLowerCase method converts all characters in a string to lowercase and returns them. The original string remains unchanged.

 const company = "GeEkFlaRe";

const lowerCaseCompany = company.toLowerCase();

console.log(lowerCaseCompany);

trim()

The method trim removes starting and ending whitespace from a string. This is an in-place operation, i.e. updates the original string.

 const company = "         Geek   Flare           ";

console.log(company);
console.log(company.trim());

charAt(index)

Method charAt returns the character at the specified index. 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)

Method charCodeAt Returns the character ASCII code at the specified index. Returns NaN if the index is not valid.

 const company = "GeekFlare";

console.log(company.charCodeAt(2));
console.log(company.charCodeAt(10));

Slice (start index, end index)

Method slice Returns a substring from a string from startIndex to endIndex (exclusive). string.slice(0, 6) returns the substring from index 0th to index 5th .

 const company = "GeekFlare";

console.log(company.slice(0, 4));

It also accepts a slice sing argument for the method. Passing a single argument to the slice method returns the substring from the specified index to the end of the string.

 const company = "GeekFlare";

console.log(company.slice(4));

The method slice also accepts negative indices. Negative indices are counted from the end of the string. Let’s look at an example, since it’s new to most people.

Given the string GeekFlare , a negative index would be:

G = -9, e = -8, e = -7, k = -6

and so on…

The code string.slice(-9, -5) returns Geek in the above example.

 const company = "GeekFlare";

console.log(company.slice(-9, -5));

The code string.slice(-5) returns Flare in the above example.

 const company = "GeekFlare";

console.log(company.slice(-5));

Note: Negative indexing does not work in IE8 and earlier versions.

substr(startIndex, length)

The substr method is similar to the slice method. The only difference is that the method substr accepts the length of the substring that needs to be extracted from the original string.

 const company = "GeekFlare";

console.log(company.substr(4, 5));

There is also a method called substring , which is similar to the slice method. However, substring method does not accept negative indexes . Try it.

replace(substring, new substring)

The replace method replaces the first instance of substring with newSubString .

 const statement = "Visit the site Google";

console.log(statement.replace("Google", "GeekFlare"));

IndexOf(substring)

Method indexOf Returns the starting index of the specified character from a string. Returns -1 if there are no characters in the string.

 const company = "GeekFlare";

console.log(company.indexOf("Flare"));
console.log(company.indexOf("O"));

The method indexOf accepts a second argument, which is the index at which to start searching for the specified substring.

 const company = "GeekFlare";

console.log(company.indexOf("e"));
console.log(company.indexOf("e", 5));

There is another method similar to the method indexOf called lastIndexOf . The only difference is that the method lastIndexOf searches for a character from the end of the string and returns the index of the first instance of the character. Try with the code company.lastIndexOf('e') .

Split (substring)

The split method splits the specified string into substrings 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. Check out the rest of the string methods from the documentation. There may be other methods that may be useful in your particular case.

If it’s not listed here, search for your specific one and use it.

Have fun coding 🙂

Next, let’s explore some of the popular JavaScript frameworks.