Escape Sequences

console.log('Hello World'); // Hello World
console.log("Hello World"); // Hello World
console.log("Hello 'World'"); // Hello 'World'
console.log('Hello "World"'); // Hello "World"
console.log('\'Hello\' "World"'); // 'Hello' "World"
console.log("'Hello' \"World\""); // 'Hello' "World"

console.log('\\'); // \

console.log('\u{1f339}'); // 🌹

console.log('Hi\tJohn'); // Hi   John

console.log('Alpha\nBeta'); 
// Alpha
// Beta

String Basic API

let person = 'Mr John Doe';

console.log(person); // 'Mr John Doe'

console.log(person.toUpperCase()); // 'MR JOHN DOE'

console.log(person.toLowerCase()); // 'mr john doe'

console.log(person); // 'Mr John Doe'

console.log(person[0]); // 'M'
console.log(person[1]); // 'r'

console.log(person[100]); // undefined

console.log(typeof person); // 'string'

console.log(person.length); // 11

console.log('😍 So fancy 🌹'); // '😍 So fancy 🌹'

Template Literals

basics

console.log(`Hello, World !`); // Hello, World !

console.log(`'Hello', "World" !`); // 'Hello', "World" !

console.log(`'Hello', "World" \`!\``); // 'Hello', "World" `!`

multiline

//Line 1
//Line 2

const traditional = 'Line 1 \n\
Line 2';

console.log(traditional);

const modern = `Line 1
Line 2`;

console.log(modern);

interpolation

const title = 'Mr';
const person = 'Burns';

console.log(title + ' ' + person); // 'Mr Burns'
console.log(`${title} ${person}`); // 'Mr Burns'

const itemCount = 11;

console.log('Total Items: ' + itemCount); // 'Total Items: 11'
console.log(`Total Items: ${itemCount}`);  // 'Total Items: 11'

// Escape Interpolation
console.log(`Total Items: \${itemCount}`);  // 'Total Items: ${itemCount}'

String Methods

Trim

const whitespaced = "\t   hello world   \n";

console.log(whitespaced.trim()); // 'hello world'
console.log(whitespaced.trimStart()); // 'hello world   \n'
console.log(whitespaced.trimEnd()); // '\t   hello world'

Replace

const dogs = 'The quick brown fox jumps over the lazy dog. The dog was on a break.';

console.log(dogs.replace('dog', 'hound'));
// 'The quick brown fox jumps over the lazy hound. The dog was on a break.'

console.log(dogs.replaceAll('dog', 'hound'));
// 'The quick brown fox jumps over the lazy hound. The hound was on a break.'

Repeat

const VIN_DIESEL = 'X'.repeat(3);
console.log(VIN_DIESEL);

const GO0GOL = `1${'0'.repeat(100)}`;
console.log(GO0GOL);

const echo = 'echo '.repeat(51);
console.log(echo);

Content Search

const sentence = 'The quick brown fox jumps over the lazy dog';

console.log(sentence.includes('fox')); // true
console.log(sentence.startsWith('The')); // true
console.log(sentence.endsWith('dog')); // true

Index Search

const message = "Brave, Brave New World";

console.log(message.indexOf("Brave")); // 0
console.log(message.lastIndexOf("Brave")); // 7

// -1 if not found
console.log(message.indexOf("america")); // -1

// case sensitive
console.log(message.indexOf("brave")); // -1

Padding

const first = 'Heartbreak';
const second = 'Hotel';

// Heartbreak
// Hotel
console.log(first);
console.log(second);

// Heartbreak
//      Hotel
console.log(first);
console.log(second.padStart(first.length));

// Heartbreak 🏩
// Hotel      🏩
console.log(first + ' 🏩');
console.log(second.padEnd(first.length) + ' 🏩');

Sub Strings

const message = 'Hello World';

// Everything after Hello
console.log(message.substring('Hello'.length)); // ' World'

// Everything before World
console.log(message.substring(0, message.indexOf('World'))); // 'Hello '

Transcript

00:00

A picture is worth a thousand words, but a word is worth 32 bits in se plus plus how C you can work with strings in a programming language greatly impacts your productivity. Fortunately, modern JavaScript strings are pretty damn awesome, and by the end of this lesson you will know all there is to know about strings, at least at the level of a professional JavaScript developer. So let's go. As we saw in our lesson on JavaScript primitives, we can create strings using single codes or double codes, and it's mostly a matter of preference, but for me personally, I prefer single codes as I don't have to press the shift key. Additionally,

00:34

we also saw that we can use the escape character backslash to embed a single coat within a single coated string or a double coat within a double coated string. Now because JavaScript uses the backslash character as an escape character, if you want to use backslash by itself, we have to escape it with another backslash. As you can see over here. Now there are plenty of other escape sequences within JavaScript as well. Among the popular ones is the Unicode escape sequence where we use back slash u, followed by a Unicode code point. Within curly brackets, there are a few relating to whitespace as well. For example,

01:09

back slash t for the tap character and back slash n for the new line character. Let's take a deeper look by first discussing some core behaviors of the JavaScript string data type. We create a simple variable called person that contains a very simple string, and of course if you log it out right now, you will see the string. The string data type provides a number of useful methods. For example, there is two uppercase, which can be used to convert the string to uppercase, and similarly there is to lowercase, which converts the characters to their lowercase values. A fact worth knowing about JavaScript strings is that they are immutable,

01:43

which means that calling functions on them might return a new string, but it doesn't change the original value of the variable. For example, if you log out person, it is still going to be that original string. We can actually access the individual characters of a string by using an index within square brackets. And this is zero based like all good programming languages. And of course if you go out of mos JavaScript returns set type that we've talked about before, which is undefined, which basically means un initialized. One additional thing worth pointing out is that JavaScript doesn't have a separate character type. Even individual characters are still a string.

02:19

And speaking of types, there is a special operator within JavaScript called type of which returns the type of its opera. For example, if you apply to a variable of type string, it returns the literal string. String strings also have a length property which returns the number of U T F 16 characters of a string. And our example, Mr. John Doe has 11 characters including the spaces. Talking of Unicode, you can pretty much put any Unicode characters within the string that you want as an example, emojis are perfectly fine. Modern JavaScript has a feature called template lits,

02:52

which makes multiline strings and string and recognition much easier than it used to be. The way you define attempted literal within JavaScript is by using the Backtick character, which you can see on screen right now. And when you are using bres to create simple strings, it's also conventional to call these S template strings. Now of course, because these are limited by bts, we can actually use single codes and double codes inside of them without the need to escape them with the backslash. But as you would expect if you wanted to use backache inside of a backache, you have to escape it with the backslash as we are doing in this final example.

03:28

Now, let's say we want to create a string that contains two lines, a line one and a line two. Traditionally, we would have to insert the new line ourselves with the backslash N and then to make sure that we can continue onto the next line, we use a backslash at the end of the line. This basically means that the same string is continuing onto the next line of code template. Strings on the other hand are multi-line by default, so we can just write the code that we would write, which is line one, press the enter key line two, and now we have a string containing two lines, line one and line two as we can see the output. The other great thing about template strings is how they greatly simplify

04:04

concatenation, which is in layman terms, combining two strings to give a bigger string. Traditionally, if you wanted to combine Title N person with the space in between, we could do this with a plus operator, but with template strings, we can actually use this feature called interpolation where we can use dollar signs followed by curly braces to jump out of our string context into the surrounding JavaScript environment and bring in expressions like the title and the person so that we have a much neat way of saying title space person.

04:37

Now string interpolation will automatically convert any of the past in variables into the string equivalents. For example, if we have an item count, which is of type number, we could use the plus operator to add it to a string to get a bigger string. And the same works when we use interpolation in a template literal as well. Then number 11 gets converted to a string and becomes a part of the output string. Now of course, whenever we have special characters, the question that you should have is what happens if you want those characters as a part of the string. For example, if you wanted to use dollar curly bracket start, well,

05:10

the answer is quite simple. You just put a backslash before it and now the dollar curly bracket no longer acts like a string interpretation. Modern JavaScript strings are full of useful methods. So let's focus in and look at the ones that we are most likely to use in real world code. Kicking us off is the trim functionality, which can be used to remove white spaces from the starts and the ends of a string. So here we have a string that starts with the tab, has a few spaces, then hello world, and then on the end some spaces and a new line. The trim method will get rid of all of the white spaces from the edges of the string. So we are left with just plain old hello world.

05:45

We can also use trim start to just remove the starting white space and alternatively use trim and to just get rid of the trailing white space. And of course, if we run this code, you can see that the results match our expectation. Now, if you want to be more specific about the things that you want to replace, JavaScript also has a replace functionality in the form of the replace method. However, unlike what you might expect, it actually only replaces the first instance of the found value. So the first dog has been replaced with a hound, but the second dog has been left intact. Fortunately,

06:18

modern JavaScript has another method called replace all, which does replace all instances of the found value. So all instances of dog have been replaced by hound. When we use replace all, I think that often comes up in you are programming, is the desire to create repetition of the same stream. For example, we can repeat the character X three times to get triple X, or for a more real world example, we can combine one with a hundred zeros to get a Google and repeat also works with bigger character sequences. For example, we can do echo, echo, echo, echo, echo. Now let's talk a bit about search.

06:53

Modern JavaScript has this lovely method called Includes, which searches for a substring within a larger string. For example, we can check if this sentence includes the string fox, which of course it does. We can also use the method starts with to check if a string starts with another string, which this particular string does start with the, and similarly, there is a method called ends with which we can use to check if a string ends with a particular value. For example, this string does end with a dog. Now all of these methods are case sensitive, which is a good thing because if you are looking for a big dog,

07:28

we really don't want to get a small puppy by mistake. If you want to go more low level with your searches, we can do an index based search as well. For example, hey, we have a message, brave, brave New World. And if you look for the index of Brave, it is at index zero, and we can also look for the last index of brave, which of course in this particular case is at index seven. Now, if the string that we are searching for is not found, these methods will return minus one. And just like the other search methods that we saw, these are also case sensitive. Now let's talk a bit about formatting our strings.

08:02

We have a simple string called heartbreak and a second string called hotel. And right now, if you log out first and second, we get them aligned left. But what if you want to align them to the right by adding some more spaces before the hotel? The concept of adding some space is called bedding, and no surprise there is a method called Bad Start, which takes a desired lens and then automatically adds the correct number of spaces to make the string match that length. So here we are pairing the start of the second string to make it match the length of the first string. Now, we might want to pad the end of a string, for example, we might want to add these spaces before showing this hotel icon,

08:38

and we can do that with a similarly named pad end function. Another thing that you might want to do is some slicing and dicing of strings and JavaScript strings have this lovely method called Substring, which you can utilize for most use cases, you can pass in a single argument for the starting Index. For example, here we are saying that give us everything after the length of Hello, and we can actually even pass in two arguments. One for the starting index to start form and one for the ending index that we want to exclude. And here we are saying that give us everything starting from zero, but before the index of a world. As you hopefully noticed,

09:15

there is a lot of power built into JavaScript strings and that is to be expected from a programming language that was originally designed to work with user interfaces. As always, thank you for joining me and I will see you in the next one.

Account Required

Professional Modern JavaScript Lessons

JavaScript String Masterclass

Sign in to access this content