5 Useful JavaScript String Methods

JavaScript contains a lot of useful methods. Today, we shall look at 5 useful methods for working with strings.

concat()
The concat() method is used to concatenate two or more strings.

const myString = "The quick brown fox";
const myOtherString = " jumped over the lazy dog.";

In this example, we have two string variables named myString and myOtherString respectively. Using the concatenate method, we can create a third string variable. Let’s name the new variable myNewString.

We assign the concatenated string to the new string variable by attaching the .concat() method to the end of the first string and inserting the second string as the only argument between the brackets.

const myNewString = myString.concat(myOtherString);

This results in the creation of a new string containing the combined text of the original two strings.

console.log(myNewString)
>> The quick brown fox jumped over the lazy dog.

In our example, we created a new string variable containing the results of the concatenation. We do not always have to create a new variable. The .concat() method can also work on its own. The only requirement is a variable to be attached to, and either another variable, text, or number inside the brackets.

console.log(myString.concat(' is 5 years old.'))
// The quick brown fox is 5 years old.

Using .concat() in the manner above is really not ideal. That example was to illustrate that the method works in different ways. It is much easier to use a + sign to display the contents of myString with additional items.

console.log(myString + ' is 5 years old.')
// The quick brown fox is 5 years old.

substring()
The substring() method is used to extract a portion of a string.

The substring method accepts up to two parameters:

substring(start, ?end)

1. start
2. end (optional)

The numeric position of strings is zero-based, just like in arrays. This means that the first character is 0, the second is 1, etc. For some reason, this method does not include the character which exists at the end position. Think of the end position as more of an ‘up to.’ To include this character, set the end to one number higher. If the start number > end, JavaScript will reverse the order therefore substring(10,5) == substring(5,10).

const myString = "The quick brown fox";

In the following example, we will create a new string containing the word ‘quick’ from the myString variable which contains ‘The quick brown fox’. The first letter in ‘quick’ is at position 4 and the last at position 8. In order to include the character at position 8, select 9 as the end position.

const myNewString = myString.substring(4,9);
console.log myNewString
// quick

If we want to extract ‘brown fox’, we do not need to specify and end position since fox is the last word in the string. All we need to do is specify the start position which is the position of first letter in ‘brown’.

const myNewestString = myString.substring(10);
console.log myNewestString
// brown fox

toUpperCase()
The toUpperCase() method is self-explanatory. It is used to convert a string to all caps.

const myString = "The quick brown fox";
const myNewString = myString.toUpperCase();
console.log(myNewString);
// THE QUICK BROWN FOX

toLowerCase()
The toLowerCase() method is like the toUpperCase() methods except it converts a string to lowercase.

const myString = "The quick brown fox";
const myNewString = myString.toLowerCase();
console.log(myNewString);
// the quick brown fox

repeat()
The repeat() method repeats a string a specified number of times.

const myString = "The quick brown fox";
myString.repeat(2);
// The quick brown foxThe quick brown fox