DEV Community

Cover image for 13 Most Common JavaScript String Methods You Should Know About
Shefali
Shefali

Posted on • Originally published at shefali.dev

13 Most Common JavaScript String Methods You Should Know About

In JavaScript, strings are sequences of characters. JavaScript provides a rich set of methods to manipulate and work with strings. In this post, I’ll introduce you to the 13 most commonly used JavaScript string methods and their functionalities.

String length

If you want to find the number of characters in a string, then you can use the length property.

const str = "This is a string.";
const lengthOfStr = str.length;
console.log(lengthOfStr); // Output: 17
Enter fullscreen mode Exit fullscreen mode

This also counts white spaces.

String toUpperCase()

If you want to convert a string to uppercase, then you can use the toUpperCase() method.

const str = "This is a string.";
const uppercaseStr = str.toUpperCase();
console.log(uppercaseStr); // Output: THIS IS A STRING.
Enter fullscreen mode Exit fullscreen mode

String toLowerCase()

If you want to convert a string to lowercase, then you can use the toLowerCase() method.

const str = "This Is a String.";
const lowercaseStr = str.toLowerCase();
console.log(lowercaseStr); // Output: this is a string.
Enter fullscreen mode Exit fullscreen mode

String indexOf()

If you want to find the first occurrence of a substring in a string then you can use the indexOf() method.

const str = "This is a js string and js string is nice.";
const indexOfJs = str.indexOf("js");
console.log(indexOfJs); // Output: 10
Enter fullscreen mode Exit fullscreen mode

String lastIndexOf()

If you want to find the last occurrence of a substring in a string then you can use the lastIndexOf() method.

const str = "This is a js string and js string is nice.";
const lastIndexOfJs = str.lastIndexOf("js");
console.log(lastIndexOfJs); // Output: 24
Enter fullscreen mode Exit fullscreen mode

String slice()

If you want to extract a part of a string, then you can use the slice() method. This will return the extracted part in a new string.

Syntax:

string.slice(start position, end position);
Enter fullscreen mode Exit fullscreen mode

The end position will not be included.

//Example:1
const str1 = "This is a string.";
const slicedStr1 = str1.slice(0, 7);
console.log(slicedStr1); // Output: This is

//Example:2
const str2 = "This is a string.";
const slicedStr2 = str2.slice(3, 9);
console.log(slicedStr2); // Output: s is a
Enter fullscreen mode Exit fullscreen mode

If you don’t specify the end position then this will slice out the rest of the string.
For example:

const str = "This is a string.";
const slicedStr = str.slice(5);
console.log(slicedStr); // Output: is a string.
Enter fullscreen mode Exit fullscreen mode

You can also give it negative parameters.

For example:

const str = "This is a string.";
const slicedStr = str.slice(-3, -1);
console.log(slicedStr); // Output: ng
Enter fullscreen mode Exit fullscreen mode

To put it simply, you can understand this as:

str.slice(-3, -1);
str.slice(str.length-3, str.length-1);
str.slice(17-3, 17-1);
str.slice(14, 16);
Enter fullscreen mode Exit fullscreen mode

String substring()

The substring() method is similar to the slice() method, but the difference is that if you give it negative parameters (less than 0) then they will be treated as 0.

const str = "This is a string.";
const slicedStr = str.substring(-3, 5);
console.log(slicedStr); // Output: This
Enter fullscreen mode Exit fullscreen mode

String substr()

The substr() method is similar to the slice() method, but the difference is that the end parameter is the length of the characters to be extracted.

const str = "This is a string.";
//This will extract the characters staring from index 11 
//and will extract 4 characters.
const slicedStr = str.substr(11, 4); 
console.log(slicedStr); // Output: trin
Enter fullscreen mode Exit fullscreen mode

String charAt()

If you want to get a character at a specified index in a string, then you can use the charAt() method.

const str = "This is a string.";
const character = str.charAt(13);
console.log(character); // Output: i
Enter fullscreen mode Exit fullscreen mode

String concat()

If you want to concatenate two or more strings, then you can use the concat() method.

const firstName = "John";
const lastName = "Doe";
const fullName = firstName.concat(" ", lastName);
console.log(fullName); // Output: John Doe
Enter fullscreen mode Exit fullscreen mode

String trim()

You can remove whitespace from both ends of a string using the trim() method.

const str = "    This is a string.    ";
const trimmedStr = str.trim();
console.log(trimmedStr); // Output: This is a string.
Enter fullscreen mode Exit fullscreen mode

String replace()

If you want to replace a specified substring with another string, then you can use the replace() method.

const str = "JavaScript is amazing!";
const replacedStr = str.replace("amazing", "awesome");
console.log(replacedStr); // Output: JavaScript is awesome!
Enter fullscreen mode Exit fullscreen mode

String split()

You can convert a string into an array using the split() method.

const str1 = "JavaScript is amazing!";
const arr1 = str1.split();
console.log(arr1); // Output: ['JavaScript is amazing!']

//Example:2
const str2 = "JavaScript is amazing!";
const arr2 = str2.split(" ");
console.log(arr2); // Output: ['JavaScript', 'is', 'amazing!']
Enter fullscreen mode Exit fullscreen mode

That’s all for today.

Thanks for reading.

For more content like this click here.

You can also follow me on X(Twitter) for getting daily tips on web development.

Keep Coding!!

Buy Me A Coffee

Top comments (8)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
devshefali profile image
Shefali

Thank you so much, Andrew!

Collapse
 
robertobutti profile image
Roberto B.

Wow, it is a great list. Thank you for sharing. It is a good list of the String functions included in this opensource book : drops-of-javascript.hi-folks.dev/

Collapse
 
devshefali profile image
Shefali

Didn't know about the book. Thanks for sharing.

Collapse
 
devluc profile image
Devluc

Great article Shefali

Collapse
 
devshefali profile image
Shefali

Thanks for your feedback, Lucian!

Collapse
 
devshefali profile image
Shefali

Thanks for checking out!😊

Collapse
 
anurag_vishwakarma profile image
Anurag Vishwakarma

Let me know if you’re interested in writing for firstfinger in return you will get full credit as author.