DEV Community

loading...
Cover image for JavaScript Made Easy: Part 14

JavaScript Made Easy: Part 14

dtetreau profile image David Tetreau ・3 min read

There are many built-in methods in JavaScript that we can use to make programming easier. For Part 14, we will go over some of the more common string methods. Open up your repl and code along!

String Methods

String methods help you to work with strings. It can save a lot of time! These built-in methods handle tasks much more quickly and efficiently than doing things manually. It is important to note that these methods don't change the string, but create a new string. Strings in JavaScript are immutable. Here are some important string methods:

.length

This is a method that will return the number of characters in a string. Here's an example:

const animal = "gorilla";
console.log(animal.length); // logs 7
Enter fullscreen mode Exit fullscreen mode

The .length method checked the animal string and returned its length. Then, the number 7 was logged to the console. This represents the total number of characters in the string.

indexOf()

This method tells you the location (index) of the first time specified characters appear in a string. Here's an example:

const color = "light blue";
console.log(color.indexOf("blue")); // returns 6
Enter fullscreen mode Exit fullscreen mode

This method is different from .length because .length returns the total character count, whereas .indexOf returns the index of the first character of the part of the string you're looking for. The indexes in a string start at 0. If the .indexOf method does not find the specified characters in a string, it will return -1.

lastIndexOf()

This method gives you the location (index) of the last time specified characters appear in a string. The number that is returned is the location of the first character of the specified characters which the method is searching for.

const shark = "My favorite shark is the Great White Shark";
console.log(shark.lastIndexOf("shark")); // returns 12
Enter fullscreen mode Exit fullscreen mode

Notice the lastIndexOf("shark") is case sensitive. Therefore, it returns the index of 12 because that is last time the lowercase version of "shark" appears in the sentence. Also, notice that it returns the index of the first character of that word.

slice(index1, index2)

This method takes strings and returns the part you slice out of it. The method takes a start point and an end point (indexes). To use this method, you have to know where the substring you are interested in starts. Here’s an example:

let superheroes = "Superman";
console.log(superheroes.slice(1 , 3)); //up
console.log(superheroes); //Superman
Enter fullscreen mode Exit fullscreen mode

If you run this code, you will see that when you slice from index 1 to index 3 in the array, it just makes a copy of that part of the array without changing the original string. You can see this by running console.log() on the original string after slicing. If you only provide one parameter, the remainder of the string will be sliced. If you provide a negative parameter, the slice will start from the end of the string and work backwards.

substring()

According to MDN Web Docs "The substring() and slice() methods are almost identical, but there are a couple of subtle differences between the two." Here are the differences:

  1. With the substring method, if the first index is greater than the second index, the arguments are automatically swapped. The slice method will return an empty string.
  2. The substring method automatically treats arguments that are negative or NAN as being the number 0. Whereas, with the slice method, negative values are counted backwards from the end of the string. Here's an example:
let movie = "Soul";
console.log(movie.slice(0, -1)); // Sou
console.log(movie.substring(0, -1)); // becomes (0, 0)
Enter fullscreen mode Exit fullscreen mode

replace(" "," ")

This method is very simple. It replaces a group of characters in a string and substitutes another. Here's an example:

let favoriteColor = "My favorite color is green";
favoriteColor.replace("green", "blue");
Enter fullscreen mode Exit fullscreen mode

toUpperCase() and toLowerCase()

A string is converted to upper case with toUpperCase() and a string is converted to lower case with toLowerCase(). Here is an example of both of these methods:

let alphabet = "a, B, c, D, e, F, g, H, i, J, k, L, m";
console.log(alphabet.toUpperCase());// all uppercase
console.log(alphabet.toLowerCase());// all lowercase
Enter fullscreen mode Exit fullscreen mode

concat()

concat() joins strings together. Here is an example:

let brand = "Microsoft";
let system = " Windows";
let operatingSystem = brand.concat(system);
console.log(operatingSystem);
Enter fullscreen mode Exit fullscreen mode

This method is another way to accomplish string concatenation which we learned about in a previous post.

I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily.

Discussion (1)

Collapse
raddevus profile image
raddevus

That's a very nice article. Succinct and informative with very nice examples. Thanks for sharing. I'm going to go read more of your entries. πŸ‘πŸ½

Forem Open with the Forem app