String

We already discussed the primitive string type found in JavaScript in this tutorial, but we also talked about the fact that on top of the primitive type, we have a more complex String object. You can actually create a string by instantiating a String object, but there's no need to - you can still access the methods found on the String object on a primitive string, since JavaScript will automatically wrap the primitive string as a String object if needed.

With that in mind, let's discuss some of the most interesting properties and methods found on the String object.

String properties

string.length

Using the length property, you can see how long a string is, like this:

let s = "Hello, world!";
alert(s.length);

Just be aware that if the string includes complex unicode characters, like emojis or obscure chinese symbols, it might not be accurate. However, for all common use cases, the length property will be accurate and tell you how many characters your string includes.

String methods

The String object comes with lots of useful methods, and we'll discuss the most interesting ones here. For a complete list, check the String object reference.

string.at()

Use the at() method on the string to get a single character from a specific position of the string. It takes one parameter: The index of the character you're looking for. If the index is positive, it will be the index counted from the start the start of the string (starting with 0). If the index is negative, it will be counted backwards from the end of the string. Here's a couple of examples:

let s = "Hello, world!";
alert(s.at(7)); // w
alert(s.at(-1)); // !

Very simple to use, but will only get you a single character. If you need a bigger part of the string than that, you should have a look at the slice() method, as described below.

string.endsWith() / string.startsWith()

Using the endsWith() method, you can specify a search string and see if your string ends with this search string. Of course, the startsWith() method does the exact same thing, but looks at the start of the string instead of the end. Here's a couple of examples:

let s = "Hello, world!";
alert(s.endsWith("!")); // true
alert(s.endsWith("world!")); // true
alert(s.startsWith("h")); // false (wrong case)
alert(s.startsWith("H")); // true

As you can see, I'm free to specify a single character or an entire string, to search for. You will also notice that the method is case-sensitive.

string.includes()

The includes() method allows you to quickly test if a string is contained within another string. The method is case-sensitive and can be used with string parameters of varying length, as you can see from this example:

let s = "Hello, world!";

alert(s.includes("world")); // true
alert(s.includes("World")); // false (wrong case)
alert(s.includes(",")); // true

string.indexOf()

The indexOf() method will also look for a string within another string, but instead of returning just true or false, like the includes() method, it will instead return the position of the substring. If the string is not found, it will instead return -1. This method is case-sensitive as well:

let s = "Hello, world!";

alert(s.indexOf("H")); // 0
alert(s.indexOf(",")); // 5
alert(s.indexOf("world")); // 7
alert(s.indexOf("World")); // -1 (wrong case)

Be aware that only the position of the first occurrence will be returned, which is true for the includes() method as well. However the method takes a secondary, optional parameter, which allows you to specify a starting position for performing the search. We can use this to discover all occurrences of the substring, if needed:

let s = "Hello, world, how are you, today?";
let pos = s.indexOf(",");
while(pos >= 0)
{
	alert("A comma found at position " + pos);
	pos = s.indexOf(",", pos + 1);		
}

In this example, I want to find all occurrences of a comma. So, i start by finding the first position, and then I use a while loop to keep iterating through the subject string, each time updating the position variable and letting the next search start after the previous position.

string.lastIndexOf()

The lastIndexOf() method works just like indexOf(), but as the name indicates, it will return the position of the last occurrence of the search string instead of the first:

let s = "Hello, world, how are you, today?";
alert(s.lastIndexOf(",")); // 25

string.replace() / string.replaceAll()

The replace() and replaceAll() methods are very useful! It takes two parameters: A search string, and a replacement string. It will allow you to easily replace one string with another, for instance like this:

let s = "Hello, world - what a crazy world indeed!";


alert(s.replace("world", "universe"));
// Result: Hello, universe - what a crazy world indeed!

alert(s.replaceAll("world", "universe"));
// Result: Hello, universe - what a crazy universe indeed!

As you can see, the replace() method will only replace the first occurrence of the search string, while the replaceAll() method will take care of all occurrences.

Be aware that the search is case-sensitive. If you want a case-insensitive search/replace operation, we need to use regular expressions - we will talk much more about that in a later chapter, where we look into all the advanced possibilities you get with regular expressions.

string.slice()

The slice() method will basically accomplish the same as the substring() method and the deprecated substr() method: It will give you a part of a string, based on the index(es) you supply. It takes at least one parameter, used to specify from which index you want to start extracting the substring. You can specify a second parameter, which will act as the (non-inclusive) end position. If you only specify one parameter, the rest of the string will be included.

Hopefully all of this should be more clear after you check out this example:

let s = "Hello, world, how are you, today?";
alert(s.slice(0, 5)); 	// Hello
alert(s.slice(7, 12)); 	// world
alert(s.slice(14)); 	// how are you, today?

This method also works with negative indexes. If a negative position is used, it will count backwards from the end of the string instead of forwards from the start of the string:

let s = "Hello, world, how are you, today?";
alert(s.slice(-6)); 	// today?
alert(s.slice(-6, -1)); // today

This method is often used in combination with the indexOf()/lastIndexOf() methods, to search for, and extract, a part of the string, for instance like this:

let s = "Hello, world, how are you, today?";
let startPos = s.indexOf("how");
let endPos = s.lastIndexOf(",");
alert(s.slice(startPos, endPos)); 	// how are you

string.substring()

The substring() will accomplish the same as the slice() method, with the slice() method being a more recent addition to the language and therefore often the preferred method to use to extract a part of a string. There is a minor difference between these two methods though, and while it's not often relevant, I still want you to know about it:

When passing a start and end index to these methods, and the end index is larger than the start index, you will get different behavior: the slice() method will simply return nothing, while the substring() method will swap the two arguments and then return the resulting string. Here's an example to show the difference:

let s = "Hello, world, how are you, today?";
alert(s.slice(12, 7)); 	// "" (empty string)
alert(s.substring(12, 7)); // world

The behavior you see here with the substring() method is an example of the old-school JavaScript approach, where the language would try to always always produce a result even if you gave it input/parameters which didn't make sense. The slice() method removes this behavior and can therefore be considered a bit more "clean". However, in the real world, you won't really feel the difference, but I suggest that you use the slice() over the substring() method, as it will at least save you a few keystrokes each time you use it.

string.toLowerCase() / string.toUpperCase()

These two methods will do exactly what you think they do, based on their names: They will change the case of the string to either lowercase or UPPERCASE. Here's an example:

let s = "Hello, World!";
alert(s.toLowerCase()); // hello, world!
alert(s.toUpperCase()); // HELLO, WORLD!

string.trim() / string.trimStart() / string.trimEnd()

Trimming a string in JavaScript is all about removing any potential whitespace from either the start or the end of the string, or from both ends, depending on which of the trim*() methods you call:

let s = "   Hello, World!   ";
alert(s.trimStart()); 	// "Hello, World!   "
alert(s.trimEnd()); 	// "   Hello, World!"
alert(s.trim()); 		// "Hello, World!"

Quite simple, but very useful - you will quickly find yourself in a position where you need to make sure that there are no excessive whitespace at the end(s) of your string.

Summary

As you can see, the built-in String object has quite a few helpful methods. We've been through most of them, but I left out some of them, mostly because they were a too trivial or obscure.

I also left out some methods related to regular expressions, because I have dedicated an entire chapter to everything related to regular expressions. Go read that chapter later on if you want to know more about advanced string search/replace operations.