Day 14: Strings and JSON

Lesson 2: String Methods

Strings are primitive types but they still come with a host of functions (aka methods) and properties that you can call on them. Let's rattle though the most common here.

.length

You've already seen this one, .length tells you the number of characters in the string. This is a property not a method, so you don't use () with it.

<h1>Hello World<h1>

let str = "All The Code";
console.log(str.length);

.slice()

Let's you slice out a portion of a string between two indexes (positions)

<h1>Hello World<h1>

let name = "All The Code";
const the = name.slice(4,7);
console.log(the);

If you omit the second number then it just runs to the end of the string. Take the 7 out from the above (don't forget to remove the comma as well)

If you make the numbers negative then they count back from the end of the string. So slice(-1) gives you the last character. Change the above playground to get the last 4 characters.

It's important to note that slice gives you a new string and leaves the string you applied it to alone. Log out name above to see what I mean.

.replace()

If you want to replace the first instance of something in a string then replace is your friend.

<h1>Hello World<h1>

let name = "All The Code";
const changed = name.replace("The","We");
console.log(changed);

.replace() is case sensitive. So in the above replace("the","We") won't work.

You can also use Regular Expressions in replace, we won't be going into them in this course though, so this is just a thing for you to be aware of.

.replaceAll()

Not added until 2021, replaceAll() is the the same as replace except it does all instances.

<h1>Hello World<h1>

let text = "Dogs are the best animal in the world. Dogs are amazing!";

const isCatPerson = true;

if(isCatPerson === true) {
  const changed = text.replaceAll("Dog","Cat");
  console.log(changed);
} else {
  console.log(text);
}

.toUpperCase() and .toLowerCase()`

You can change the case of a string with these two methods. Most commonly I will use toLowerCase() when I want to validate user input against some value where casing isn't important.

<h1>Hello World<h1>

const destination = "Italy";

const validCountries = ['italy', 'greece', 'spain'];
const result = validCountries.includes(destination.toLowerCase());
console.log(result);

Trimming strings

Speaking of user validation. It's surprisingly common for people to enter extra white space when filling in forms. This can cause odd behavior - imagine the above example if the user had entered 'Italy    '?!

So we have the trim methods. We can trim() which removes whitespace at the start and end of a string, trimEnd() which takes it off the end and trimStart() which takes it off the beginning.

<h1>Hello World<h1>

const destination = "Italy    ";

const validCountries = ['italy', 'greece', 'spain'];
const trimmed = destination.trim();
const lowerCased = trimmed.toLowerCase()
const result = validCountries.includes(lowerCased);
console.log(result);

And now we get something we can test against.

1const cleanedDestination = destination.toLowerCase().trim();
2const result = validCountries.includes(cleanedDestination);

.split()

One of the most used string functions is .split(). It lets you split a string into an array based on a certain character.

Very commonly you will use this on URLs or file paths and split on / or when when working with comma separated data and split on the ,

Like this:

<h1>Hello World<h1>

const path = "/home/users/allthecode/desktop/30days/";

const pathParts = path.split("/");

console.log(pathParts);

const user = pathParts[3];
console.log(user);

Very often when you are in a coding interview you will be tasked dealing with strings and very often the first thing you will do is call .split() in some way to get it into more manageable data.

<h1>Hello World<h1>

const names = ["Harry", "Ron", "Hermione"];
const namesList = names.join(',');
console.log(namesList);