5.1 Working With Strings

Hi folks, in this section of the course, we're going to take a look at some of the most useful properties and methods we can use in order to work with the different types of data used in JavaScript. Starting with strings in this lesson, so let's see how we can work with strings. We know from earlier in the course that we can create strings as literals or as objects. And we also know that it's best to create them as literals. One interesting feature of JavaScript is type coercion. Not the kind that takes place when using conditionals that don't compare strictly. But when wrapper objects for strings, numbers, or Booleans are created for us automatically by JavaScript when we call methods or access properties on literals or primitives. So first of all, let's define a string that we can work with throughout the rest of this lesson. So in this case, we've declared a simple string literal which has the value, this is a test string. So even though a string is a primitive, we can call properties and methods on it. One property that strings have is the length property, which tells us how long the string is. Let's just check the output in a browser, and this tells us that there are 21 characters in the test string, and that includes the space characters. So a string is a primitive, and primitives don't have properties or methods. So the fact that we can look at the length property of a string tells us something interesting about JavaScript. Whenever we try to access the property of a primitive or invoke one of its methods, behind the scenes, JavaScript will wrap the primitive in an object. This process is known as boxing, it's not something that you need to worry about. JavaScript boxes and unboxes primitives as and when it needs to, based on what we're doing in our code, it's just interesting to be aware of. So the length property is really the only property with strings that we'll need to work with. There are, however, a lot of different methods that we can use. Let's look at a few of the more common ones now. One thing that we can do with a string is turn it into an array, which can be really useful, and is something that you'll probably do quite frequently. To do this, we can use the split method. So we passed the split method a single argument, and that argument is the character that you want to split the string on. In this case, we use the space character. So we should get an array with five items, because there are five words separated with spaces. Let's check the browser's output. We do indeed get an array of five items, and the characters that we split on, the space characters, are not included in that array. Another thing that we might want to do quite often is to check whether a string contains another string. We can do this using the index of or last index of methods. The indexOf method returns the index of the first occurrence of the search string within the context string. So the indexOf method will return the index that the test string, which we passed to the indexOf method, is found within the string that the method is invoked on. So in this case, the first index of the substring is, is at index 2. So just like arrays, strings are zero indexed, which means that the very first index is 0, so index 2 is here. So indexOf just returns the index of the first occurrence of the test string. It doesn't return the indexes of all instances. So it doesn't care about the second occurrence of the word is, which is here. If the string that we are searching for is not found within the context string that is being searched, this method returns -1. The lastIndexOf method works in exactly the same way as the indexOf method, except that it starts at the end of the string and works backwards through the string. Instead of starting at the beginning of the string, like the indexOf method does. If we use lastIndexOf, however, we should see the index should equal 5. Don't forget that the first index is actually index 0, and not index 1. If we want to convert the string into capitals, we can use the toUpperCase method. So one point to note is that toUpperCase doesn't actually change the value of the string that it's called on. It just returns a new version of the string which is all in capitals. There is also a toLowerCase method which works in a similar way. We can select specific parts of a string using the substring method. This method can take up to two arguments, both of them are numbers, and correlate to the index in the string. With the first argument specifying the start index to begin selecting from, and the second argument specifying the end index to stop selecting from, let's take a quick look. So we passed 8 to the substring method, which indicated that we wanted to start selecting the substring from the 8th index. We didn't specify an ending index, so it selects everything to the end of the string. We can change that so that we do specify an ending index by passing the second argument. And this time it just selects the character a, because it only selects a single index. And you can tell from this actually, that when we include an end index, that index does become part of the substring that gets returned by the substring method. If either of the arguments that we pass to the substring method are negative or NaN values, they are replaced with the value 0. Another way to select part of the string, is with the slice method, which operates in a similar way, just with some slight differences. So this works in a similar way to the substring method did earlier when we selected everything from the 8th index. If we pass two positive arguments, including zero, this slice method works in exactly the same way as substring. So again, we just select the character a in this case. The difference between slice and substring is that we can provide negative numbers to the slice method. If we supply a single argument to the slice method and it's a negative number, the slice will begin from the end of the string instead of the start of the string. So in this case, we just get the last 6 characters, because we specified -6. That’s the main difference between slice and substring. There are quite a number of other methods that we can use. We won't cover all of them, we'll just look at one more for today. This is the trim method, and it's used to trim space characters from the start or end of strings, let's use a different string this time So notice how we can call the method on the string literal directly. Again, this is thanks to JavaScript's automatic boxing. And let's just go and check the output in a browser now. So we can see that there are no space characters either before or after the string test. This is because the trim method has trimmed them from both the start and end of our test string. So in this lesson, we learned about the different properties and methods that we can use to work with strings. I say properties, but actually, there's only one property that we'll ever be interested in, which is the length property. We also covered turning a string into an array with the split method, and how to find the index of individual characters within a string using indexOf or the lastIndexOf methods. We saw how to convert a string to either all capitals or all small letters with the toUpperCase or toLowerCase methods. And we saw how to select different parts of the string with either the substring or slice methods. Lastly, we saw how to use the trim method to remove white space from either the start or end of a string. In the next lesson, we'll look at another type of string, the template literal. Thanks for watching.