In this tutorial, we will learn the difference between string primitives and the
String object, how strings are indexed, how to access characters in a string, and common properties and methods used on strings.
String Primitives and String Objects
In order to test the difference between the two, we will initialize a string primitive and a string object.
// Initializing a new string primitive const stringPrimitive = "A new string."; // Initializing a new String object const stringObject = new String("A new string.");
We can use the
typeof operator to determine the type of a value. In the first example, we simply assigned a string to a variable.
In the second example, we used
new String() to create a string object and assign it to a variable.
String object wrapper without actually changing the string primitive you've created into an object.
How Strings are Indexed
Each of the characters in a string correspond to an index number, starting with
To demonstrate, we will create a string with the value
How are you?.
The first character in the string is
H, which corresponds to the index
0. The last character is
?, which corresponds to
11. The whitespace characters also have an index, at
Being able to access every character in a string gives us a number of ways to work with and manipulate strings.
We're going to demonstrate how to access characters and indices with the
How are you? string.
"How are you?";
Using square bracket notation, we can access any character in the string.
"How are you?";
We can also use the
charAt() method to return the character using the index number as a parameter.
"How are you?".charAt(5);
Alternatively, we can use
indexOf() to return the index number by the first instance of a character.
"How are you?".indexOf("o");
Although "o" appears twice in the
How are you? string,
indexOf() will get the first instance.
lastIndexOf() is used to find the last instance.
"How are you?".lastIndexOf("o");
For both of these methods, you can also search for multiple characters in the string. It will return the index number of the first character in the instance.
"How are you?".indexOf("are");
slice() method, on the other hand, returns the characters between two index numbers. The first parameter will be the starting index number, and the second parameter will be the index number where it should end.
"How are you?".slice(8, 11);
? is not part of the returned output.
slice() will return what is between, but not including, the last parameter.
If a second parameter is not included,
slice() will return everything from the parameter to the end of the string.
"How are you?".slice(8);
slice() will help return string values based on index numbers, and
lastIndexOf() will do the opposite, returning index numbers based on the provided string characters.
Finding the Length of a String
length property, we can return the number of characters in a string.
"How are you?".length;
Remember that the
length property is returning the actual number of characters starting with 1, which comes out to 12, not the final index number, which starts at
0 and ends at
Converting to Upper or Lower Case
The two built-in methods
toUpperCase() will convert all characters to uppercase characters.
"How are you?".toUpperCase();
OutputHOW ARE YOU?
toLowerCase() will convert all characters to lowercase characters.
"How are you?".toLowerCase();
Outputhow are you?
These two formatting methods take no additional parameters.
It is worth noting that these methods do not change the original string.
split() method to separate the array by a whitespace character, represented by
const originalString = "How are you?"; // Split string by whitespace character const splitString = originalString.split(" "); console.log(splitString);
Output[ 'How', 'are', 'you?' ]
Now that we have a new array in the
splitString variable, we can access each section with an index number.
If an empty parameter is given,
split() will create a comma-separated array with each character in the string.
By splitting strings you can determine how many words are in a sentence, and use the method as a way to determine people's first names and last names, for example.
trim() method removes white space from both ends of a string, but not anywhere in between. Whitespace can be tabs or spaces.
const tooMuchWhitespace = " How are you? "; const trimmed = tooMuchWhitespace.trim(); console.log(trimmed);
OutputHow are you?
trim() method is a simple way to perform the common task of removing excess whitespace.
Finding and Replacing String Values
We can search a string for a value, and replace it with a new value using the
replace() method. The first parameter will be the value to be found, and the second parameter will be the value to replace it with.
const originalString = "How are you?" // Replace the first instance of "How" with "Where" const newString = originalString.replace("How", "Where"); console.log(newString);
OutputWhere are you?
In addition to being able to replace a value with another string value, we can also use Regular Expressions to make
replace() more powerful. For instance,
replace() only affects the first value, but we can use the
g (global) flag to catch all instances of a value, and the
i (case insensitive) flag to ignore case.
This is a very common task that makes use of Regular Expressions. Visit Regexr to practice more examples of RegEx.
Strings are one of the most frequently used data types, and there is a lot we can do with them.
In this tutorial, we learned the difference between the string primitive and
String object, how strings are indexed, and how to use the built-in methods and properties of strings to access characters, format text, and find and replace values.