Which template literal to use
Creating multiple lines
Combine strings together
Here are 4 different methods to create a string.
// Single quotes const guyName = 'John'; // Double quotes const girlName = "Jenny"; // Backtick quotes const babyName = `Jo`; // String constructor const foo = new String('bar');
The first 3 examples single, double, and backtick quotes are called template literals.
Even though template literals get converted to string objects, you shouldn't create new string variables like method #4.
If your code doesn't need to support IE browsers, use backtick quotes.
Sometimes strings need to have quotes, for example:
So Dorothy said, "she crazy!"
The solution to this problem is to use the backslash (
const sentence = "So Dorothy said, \"she crazy!\"";
Notice how I've used the backslash before any double quote that is within the string. The same goes for single quotes.
const sentence = 'You\'re so funny!';
Sometimes it's nicer to read shorten forms of words than the longer versions.
These are one of the benefits of using backticks. You don't have to worry about escaping characters.
const sentence1 = `So Dorothy said, "she crazy!"`; const sentence2 = `You're so funny!`;
Sometimes your strings are way too long, and you need a way to break it into a new line.
This is where adding a backslash (
\) will come in handy again.
It's also important to note that there SHOULD NOT be any space after the backslash. Otherwise it will not work.
We can avoid using the backslash by just using backtick quotes.
const longSentence = `Sometimes your strings are way too long, and you need a way to break it into a new line. `;
If you ever need to access any of the individual characters, you have 2 methods of achieving this.
The first method is using
const petType = 'cat'; petType.charAt(2); // Returns "t"
Note: Accessing the array of characters always starts at 0.
Another method is to use brackets (
) and the index number.
const petType = 'cat'; petType; // Returns "c"
Either method is valid, but most engineers just use the bracket method.
Sometimes you want to join two string variables to make 1.
You can always use the
concat() string method.
const fullName = 'John'; fullName.concat(' Doe'); // Return John Doe
Even though that's a valid method, it's not recommended to use
concat() for performance reasons. You should always use
const name = 'Mary'; const age = '25'; const greetMessage = "Hi there! My name is " + name; // Hi there! My name is Mary greetMessage += ", and I'm " + age + " years old."; // Hi there! My name is Mary, and I'm 25 years old.
Here are a few methods and properties that are helpful to manipulate strings.
length property returns the length of the string.
const name = 'Mary Jane'; name.length // 9
If you count the number of letters, it's only 8 letters but in the code example above it says 9.
That's because spaces count as characters as well.
replace() returns a new string with some or all matches with the replacement.
Since this method returns a new string, and not modify the current string, you must attach it to a new variable.
const sentence = "I'm a cat lover!"; const newSentence = sentence.replace('cat', 'dog'); // I'm a dog lover!
In the example above, I said to replace the word
includes() is a handy method utility checks if a string pattern is found in another string.
This method will return a boolean result.
const sentence = 'The red fox jumped over the picnic table.'; const word = 'dog'; sentence.includes('fox'); // true sentence.includes(word); // false