Commonly Used String Methods

A String is a data type that is synonymous with all programming languages, and that is because it is the most frequently used data type. In JavaScript, String is used to holding text, and in most cases, these texts are variables. Strings are used to convey messages, store values in the form of variables and manipulate and modify them. A string is any variable whose value is stored in-between quotes (“ “). Strings can also represent non-text characters that are treated as texts e.g phone numbers in a form. A phone number can be represented by a string because they are not used in arithmetic calculations and most cases, they are usually preceded by a “+” sign, unlike what you will consider an integer which can perform mathematical operations.

Let’s highlight some of the important characteristics of a string data type:

1. Their values are stored in quotes (“ “).
2. They can be used to store phone numbers.

3. You cannot mutate a string.

4. Length(): The length property is used to calculate the length of the string. Let’s see how to apply the length property.
   

const myString = 'My name is Michael'
const lengthofString = myString.length;
console.log('The length of the string is', lengthofString);

In the console, the output will be:

The length of the string is 18.

There are 15 characters and 3 white spaces. White spaces will be counted alongside characters.

1. Concat(): This method is used to add two or more string variables together. The strings can be combined using the concatenation symbol (+).

const myString = 'My name is Michael '
const secondString = 'and I like to code';
const stringConcat = myString + '' + secondString
console.log(stringConcat);

This method can also be done using the string concat method.

const myString = 'My name is Michael '
const secondString = 'and I like to code';
const stringConcat = myString.concat(secondString)
console.log(stringConcat);

For both methods that were used, the output will be the same. In your console, the result will be:
My name is Michael and I like to code

1. CharAt(): This method returns the value or character at the specified index of the string. The charAt method is zero index based, so it starts counting from position 0.

const myString = 'My name is Michael'   
const charOfString = myString.charAt(11);   
console.log(charOfString); // M

The character at the index of 11 is M.

1. IndexOf(): This method returns the index position of the given string. If the given string does not exist, it will return -1. Let’s try to play around with both cases and see its return.

const myString = 'My name is Michael'
const indexOfString = myString.indexOf('eis');
console.log(indexOfString);// The output is -1

The output of this case is -1 because our given string (‘eis’) does not exist in the string. Now let’s try the availability of the given string.

const myString = 'My name is Michael'
const indexOfString = myString.indexOf('is');
console.log(indexOfString);// The return in the console is 8

The return in the console is 8 because our given string (‘is’) exists and the first index of the string is 8.

1. LastIndexOf(): This method works just like the indexOf only that it returns the last index of the given string. Let’s see how it works.

const myString = 'My name is Michael and the color of my car is green'
const indexOfString = myString.lastIndexOf('is');
console.log(indexOfString);// 43

In the string above, our given string (‘is’) appeared twice in the sentence, so the lastIndexOf method picked the index of its last occurrence which is 43.

1. ToLowerCase(): This method converts the string to lowercase. It removes every capitalization in the string.

const myString = 'I LOVE JAVASCRIPT AND REACT'
const stringMethod = myString.toLowerCase();
console.log(stringMethod);// i love javascript and react

1. ToUpperCase(): It works as the opposite of the toLowerCase method. This method capitalizes all the characters in the string.

const myString = 'I love javascript and react'
const stringMethod = myString.toUpperCase();
console.log(stringMethod);// I LOVE JAVASCRIPT AND REACT

1. Trim(): This method is used to remove all the white spaces in the string.

const myString = ' I love javascript and react '
console.log(myString.length);

const stringMethod = myString.trim();
console.log(stringMethod);
console.log(stringMethod.length);

The result of the above code is:

If you take note, myString has a white space before the first text and another white space after the last text, so when we console.log the length, it returned 29. Then we used the trim() method, and the white spaces were removed thereby returning 27 after we checked the length.

1. Includes(): This is one very useful string method. It comes in handy when searching through a large list, and maybe sifting data from an API. It is used to check if a string passes an argument. It returns a boolean and it is case-sensitive.

const myString = ' I love javascript and react '
const stringMethod = myString.includes("java");
console.log(stringMethod);// true

From the code above, we checked if our string includes java, and Yes it does, from the javascript word, that was why it returned true.

1. StartsWith(): This is used when trying to check if a string starts with a given string or character. It returns a boolean too like the includes and it is case-sensitive.

const myString = 'I love javascript and react'  
const stringMethod = myString.startsWith("I");  
console.log(stringMethod);// true

const myString = 'I love javascript and react'  
const stringMethod = myString.startsWith("i");  
console.log(stringMethod);// false

1. EndsWith(): Just like the startsWith, it checks if a string ends with a given string or character. It is case-sensitive and it returns a boolean.

const myString = 'I love javascript and react'
const stringMethod = myString.endsWith("act");
console.log(stringMethod);// true

const myString = 'I love javascript and react'
const stringMethod = myString.endsWith("treat");
console.log(stringMethod);// false

1. Replace(): This method searches through the string, finds the first occurrence of a string and replaces it with the second argument. It receives two (2) parameters, the first being the one to be replaced, and the second the one to be replaced with. Let’s see it in action.

const myString = 'I love javascript and react'
const stringMethod = myString.replace("react", "python");
console.log(stringMethod);// I love javascript and python

1. Slice(): It returns a part of a string as set in the parameter. The parameter sets the start and the end of the string.

const myString = 'I love javascript and react'
const stringMethod = myString.slice(7, 17);
console.log(stringMethod);// javascript

There are a couple of other string methods that are important to know, even though you may not get to use them everyday.

I hope this tutorial has been helpful. If Yes, you can like and follow me.

Thanks and have a great day.

Comments

[Ben Sinclair]

bug report: trim doesn't remove all the whitespace in a string, only that at the start and end.

[Toby]

Yes that's true. Thanks mate.

[fruntend]

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍