Strings are an essential building block of any application. They are pieces of text encapsulated in either single- or double quotes. They can contain any letter, numbers, or special characters. It's important to understand how every character in a string has a positional value that can be accessed and also vital to know how you can use a variety of built-in methods (actions) to perform what you need to do. I'll show you how with examples. Ready to get started? Open up your JavaScript console and let's get to learning!
Indexing
Always remember that every character in a string (including whitespace) has its own positional value starting at 0. The way I understood that was by counting the numbers of characters within a string with my finger & remembering to count from zero. It's called zero-indexing. It's important to know this because you can easily access specific characters in a string.
Every string contains a length property that tells you how many characters are in a string.
The length of a string is always one greater than the last index.
Strings are immutable meaning you cannot change the individual value.
String Concatenation
You can use the addition operator to "concatenate" or combine strings. If you wanted to include space to separate the words and make it more readable, add whitespace either within the string or add space between the strings with quotation marks.
If you were to try to use the subtraction operator with 2 strings, you will get a return value of NaN (or Not a Number).
So What Are String Methods?
Methods are built-in actions that can be performed on any string and there are quite a few of them available for you to use. You can replace characters within a string, slice, search within, trim, capitalize or lowercase characters, and split, just to name a few.
You use dot notation to perform such actions as shown below. Be mindful that simply performing any methods on a string will not change the original string. In order to do that you would have to create a new variable where the value equals the string name
I highly encourage you to play around with the different string methods to get comfortable with manipulating strings. It is often asked of you to do so interviews to be honest.
String Arguments
Some methods let you pass in additional information inside of the parentheses to modify their behavior. Let me show you by example. I'll provide a solid example below.
To Find indexOf(), Slice, Or Replace, Goku asks
I wanted to point out 3 very important methods that I often to utilize in front-end interviews and on the job while working on more complex applications: .index(), .slice(), or .replace().
.()index method is where you can perform a search to see if a string contains specified characters. It will return the position of where the occurrence of the substring starts. It always returns a number. If it cannot be found then the answer will be -1.
.slice( method accepts one or two arguments and allows you to "slice" or cut out a sub-string of the string. It does not alter or change the actual string because again, strings are immutable. You can pass in 2 arguments (where slice begins and ends in a string)
.replace() methods takes in 2 arguments: the first argument is where you specify what you want to replace within the string and the second argument lets you describe what you want to replace it with.
Template Literals
Introduced in ES6, template literals allow you to interpolate strings which means you can evaluate and perform methods in strings. It is common in many other languages like Python, JavaScript is just catching up.
The code snippet in this section provide some practical examples to help you understand how it works. Be mindful that each template literal starts and ends with back ticks, not quotation marks like regular string and the expression you want to be evaluated within the string must start with a dollar sign and be encapsulated with brackets.
You can also use back ticks to create multiple lines which makes for even more readable code so this replaces the need to perform an escape sequence using the /n keyword. To format your code a bit better, perform the .trim() method outside of the string to rid yourself of whitespace.
What Will We Learn Next?
Hope you've enjoyed learning about how to create and manipulate strings utilizing all of the different methods we can use at our disposal. Next we'll learn more about the differences between null and undefined.
- Null & Undefined
- Loops, Objects, Arrays
Oldest comments (2)
I've had trouble using template literals. When you use them within a tag, does the the script need to have type="module"? ES6 is bit blurry for me overall.</p>
Thanks for this series!
In mentioning the immutability of strings, it's probably also worth mentioning for the newbies that the alternative is you just reassign the value of the variable in small tasks where you won't need the original value again (and if you need to keep the original value, you assign the new value to a new variable):
let faveQ = "The Marathon Continues";
faveQ
"The Marathon Continues"
faveQ = faveQ.slice(4);
"Marathon Continues"
faveQ
"Marathon Continues"
So, in my case above, it kinda looks like you could be mutating the string (and simply editing the text), but you're really reassigning a new string to the variable.