String Methods

📚 Table of Contents
toUpperCase()
concat()
charAt()
indexOf()
includes()
replace()
slice()
split()
Number()

JavaScript (and most programming languages) come with tons of built-in functions (called methods) that you can use
these built-in functions rule because you don't have to write your own functions and algorithms to do simple and common things
I'll show some common ones and ones that I use a lot but remember to always Google what you need or go right to the docs (opens in a new tab)

quick note before we jump in: in JavaScript, strings are immutable, meaning they cannot be changed. so when you use the following string methods, you are creating a new string with your modifications

a string to work with:

const wuTang = "Wu Tang Clan";

toUpperCase() & toLowerCase()

I probably don't need to explain what these both do, but they are a good place to start to see how string methods work
most of these methods work like this: string.method(). since the methods are functions, they often take arguments but some don't need them
these are also surpringly useful when you need to compare and find characters in a string and need to make your logic case insensitive

const wuTangUpperCase = wuTang.toUpperCase();
 
console.log(wuTangUpperCase);

gives you

WU TANG CLAN

I'll let you figure out what this gives you

wuTang.toLowerCase();

concat()

this one concatenates (opens in a new tab) (joins) two or more strings

const str1 = "Cash Rules";
const str2 = "Everything Around Me";
console.log(str1.concat(" ", str2));

check out that hard coded string of one space, " ". if I didn't put that, we'd get "Cash RulesEverything Around Me". .concat() takes however many strings you want, they can be hardcoded or variables

charAt()

"char" is short for "character" or "a single display unit of information equivalent to one alphabetic symbol, digit, or letter." 🤓
this method finds the character at a specific index

console.log(wuTang.charAt(0)); // gives you W

indexOf()

this is sort of the opposite of charAt(), indexOf() will give you the first index of what you are looking for
if what you are looking for is not found in the string, indexOf() will return -1

console.log(wuTang.indexOf("C")); // gives you 8
console.log(wuTang.indexOf("M")); // gives you -1

includes()

this one returns a boolean (true or false) if a string includes what you are looking for 🤯

console.log(wuTang.includes("C")); // true
console.log(wuTang.includes("M")); // false

replace()

this one is super useful
replace() takes two arguments, what you are looking for and what you want to replace that with

console.log(wuTang.replace("Wu Tang", "Adam")); // Adam Clan

the reason this one is so useful is because that first argument (what you are searching for) can be a regular expression (opens in a new tab) (or "regex") pattern
I haven't mentioned regex yet in this little course and don't want to get deep into it here. if you want to read ahead, I wrote a blog post (opens in a new tab) on regex. basically, regex are patterns to find things in text

slice()

this one slices out part of a string
it takes indecies as arguments, you give it the index of where you want your slice to start and then an optional second where you want it to end
you can also use negative numbers to go backwards and slice from the end of the string

console.log(wuTang.slice(3)); // Tang Clan
console.log(wuTang.slice(3, 7)); // Tang
console.log(wuTang.slice(-4)); // Clan

split()

this is maybe one of the most important string methods
split() will split your string up into "substrings" of an array
it turns your string into an array and you split it up by the argument you give it. if you give it a string with a single space, like this " ", you get an array of the words in your string
the reason this is so important is because it gives you the flexibility to now use array methods (see the next page)

console.log(wuTang.split(" "));

gives you

["Wu", "Tang", "Clan"]

Number()

technically this is not a "string method" but its totally applicable here
at the bottom of the comparison operators section, I mentioned equality (==) and strict equality (===) and showed how JS can be flexible with treating numbers in strings as actual numbers. sometimes, you will need to turn numbers in strings into actual numbers (and maybe back to strings again) or vice versa
there are a bunch of different ways to work with numbers & strings in JS and the Number() constructor is probably the most straight forward in terms of readability and use
Number() can convert strings to numbers (if possible)
use it by wrapping your string inside the Number() function like this:

let aNumAsAString = "420";
 
let anActualNumber = Number(aNumAsAString);
console.log(aNumAsAString); // 420

fun fact you can check this with the typeof keyword

console.log(typeof aNumAsAString); // string
console.log(typeof anActualNumber); // number

Number() even works with "floating-point" numbers, aka numbers with decimals
- in the context of computer science and mathematics, a floating-point number is a way to represent real numbers that can include fractions (decimal points) and are capable of representing a wide range of values

let aFloatAsAString = "420.69";
 
let anActualFloat = Number(aFloatAsAString);
console.log(anActualFloat); // 420.69

above I say Number() can convert strings to numbers if possible because it won't work on regular text strings for obvious reasons. if you try to convert a string of text to a number with Number() you will get NaN which stands for "Not a Number"

console.log(Number(wuTang)); // NaN

parseInt() & parseFloat()

for the sake of the deep dive and context, these are the other main functions to turn strings into numbers
these can be useful in the right scenario too
parseInt() will only return a whole number so you have to use parseFloat() if there is a decimal:

let aFloatAsAString = "420.69";
 
let anActualFloat = parseInt(aFloatAsAString);
console.log(anActualFloat); // 420

but these functions are cool because these can extract numbers from strings if the number is the first thing the function sees, where Number() will give you NaN

parseFloat("420.69 is the number"); // 420.69

toString()

lets close this string and numbers section out with a number method (I don't think I'm going to do a full blown number methods section)
use toString() to turn your number back to a string
this allows you to use all of the above string methods or to return the value back to its original type if need be

let aNumber = 420;
console.log(typeof aNumber); // number
 
let aString = aNumber.toString();
console.log(aString); // 420
console.log(typeof aString); // string

3.8 Logic & Control Flow 3.10 Array Methods