🟨JavaScript strings

looking at and manipulating plain text in JavaScript

String syntax

A String consists of consecutive alphanumeric characters (this includes whitespace, special characters and even emoji!)

We also encapsulate Strings with quotation marks (either with 'single quotes' or "double quotes", depending on preference)

Concatenating Strings

We can concatenate, or join, Strings together using the + operator, e.g.

let string1 = "I"
let string2 = "am" 
let string3 = "tedious!"

console.log(string1 + " " + string2 + " " + string3 + " Yes I am!"
> "I am tedious! Yes I am!"

We can also join any number of Strings together with the concat() method, by passing each String per argument:

let string1 = "I"
let string2 = "am" 
let string3 = "tedious!"

console.log(concat(string1, " ", string2, " ", string3, " Yes I am!")
> "I am tedious! Yes I am!"

Searching within Strings with indexOf()

We can use the indexOf() method to check whether a substring exists within a String:

• If the substring exists, indexOf() will return the position where it exists

  • if it finds the substring in the first character, it will return 0

  • the index includes whitespace

• If the substring does not exist, the indexOf() will return -1

• If the substring exists in more than one place, the indexOf() will just return the index of the first occurrence

Note that indexOf() is case-sensitive, so that "Word" and "word" are not the same thing!

Some examples:

let myString = "If the substring exists!"

console.log(myString.indexOf("If"))
> 0
// indices start at 0

console.log(myString.indexOf("the"))
> 3 
// includes spaces

console.log(myString.indexOf("!"))
> 23 
// myString.length - 1

console.log(myString.indexOf("i"))
> 13 
// also exists on 19 but outputs only 13

console.log(myString.indexOf("ggg"))
> -1 
// not found

console.log(myString.indexOf("if"))
> -1 
// not found due to case sensitivity

The includes() method

The includes()method determines whether some text (a substring) exists within a string, by returning either trueor false:

let myString = "If the substring exists!"

console.log(myString.includes("substring"))
> true

console.log(myString.includes("the"))
> true

console.log(mystring.includes("something else"))
> false (not found)

console.log(myString.includes("The"))
> false (due to case sensitivity) 

Like the indexOf()method, the includes()method is also case-sensitive!

This method also has an optional second parameter that checks for the substring only at or past a certain index in the string:

let myString = "If the substring exists!"

console.log(myString.includes("If", 2))
> false 
// "If" does not exist at or past index 2

console.log(myString.includes("If", 0))
> true 
// "If" exists at index 0

console.log(myString.includes("the", 0))
> true 
// "the" exists past index 0

console.log(myString.includes("the", 2))
> true 
// "the" exists past index 2

Extracting a substring from a String with slice()

To take out a portion of text from a String, we can use the slice() method which takes in two parameters: an optional starting index and an optional "cutoff" index:

let myString = "If the substring exists!"

console.log(myString.slice(2))
> ' the substring exists'

console.log(myString.slice(0))
> 'If the substring exists'

console.log(myString.slice(0, 1))
> 'I'

console.log(myString.slice(0, 2))
> 'If'

console.log(myString.slice(0, 3))
> 'If '
// (the above contains a space after If)

console.log(myString.slice(0, 4))
> 'If t'

console.log(myString.slice(1, 4))
> 'f t'

console.log(myString.slice(-1))
> '!' 
// this refers to the last character
// negative numbers look at the string from right-to-left

console.log(myString.slice(-2))
> 's!'
// last two characters

console.log(myString.slice(-7))
> 'exists!'

console.log(myString.slice(5, -3))
> 'e substring exis'
// returns all text from index 5 to length-3

console.log(myString.slice(9, -1))
> 'bstring exists'

console.log(myString.slice())
> 'If the substring exists!'

Notice how the "cutoff" index refers to the index at which the substring stops, and would not include the character at that index!)

Also, in the last example, we can see that both parameters are actually optional. However, not having any arguments for the parameter gives a trivial result: the entire string itself!

Changing the case of a String : toUpperCase() and toLowerCase

To change the case (i.e. uppercase or lowercase) of a text, JavaScript has two built-in methods, toUpperCase() and toLowerCase() which we can use as such:

let mixedCase = "I am learning JavaScript!"
let upperCase = mixedCase.toUpperCase()
let lowerCase = mixedCase.toLowerCase()

console.log(upperCase)
> I AM LEARNING JAVASCRIPT!

console.log(lowerCase)
> i am learning javascript!

We may use these methods when collecting user input from a search query box (some users may use capital letters, others might not) and comparing it with a database entry (from which we would also transform to all lowercase, or to all uppercase!)

Replacing substrings with replace()

To replace a portion of text with a different text, we can use the replace() method:

let message = "Hello World! Hello world! Hello world!"
let update = message.replace("world", "URL")

console.log(update)
> "Hello World! Hello URL! Hello world!"

replace() is case-sensitive and only replaces the first match; the original string also does not change

We need to use something called regular expressions (more details on this later!) in order to add more complexity to our replace() method:

let message = "Hello World! Hello world! Hello world!"
let justOne = message.replace("world", "URL")
let allowMany = message.replace(/world/g, "URL")
let firstIgnoringCase = message.replace(/world/i, "URL")
let manyIgnoringCase = message.replace(/world/gi, "URL")

console.log(justOne)
> "Hello World! Hello URL! Hello world!"

console.log(allowMany)
> "Hello World! Hello URL! Hello URL!"

console.log(firstIgnoringCase)
> "Hello URL! Hello world! Hello world!"

console.log(manyIgnoringCase)
> "Hello URL! Hello URL! Hello URL!"

Notice the replacement (no pun intended) of "quotation marks" with /slashes/ when using regular expressions!

Also:

• The "g" flag after the slashes means "global replacement"

• The "i" flag after the slashes means "ignore case"

• Thus, a "gi" flag would mean "globally replace, ignore case"

Repeating Strings and substrings with repeat()

To repeat a string, just use the built-in method repeat(times) where times is any positive number or zero:

let single = "Hello"

let triple = single.repeat(3)
console.log(triple)
> "HelloHelloHello"

let zero = single.repeat(0)
console.log(zero)
> "" 
// (trivial - empty string)

let one = single.repeat(1)
console.log(one)
> "Hello"
// (trivial - the string itself)

let minus = single.repeat(-1)
console.log(minus)
> ⚠️ RangeError
// (edge case - positive integers only!)

let decimal = single.repeat(2.7)
console.log(decimal)
> "HelloHello"
// (edge case - takes only the integer)

The repeat() method can save us from using loops!

Trimming Strings with trim(), trimStart(), trimEnd()

To remove whitespace (blank characters) at the start or from the end of a string, we can use the trim() method (and other related methods):

let message = "   Oh my this is spread out!   "
let trimmed = message.trim()

console.log(trimmed)
> "Oh my this is spread out!"

Other methods to remove whitespace include:

• trimStart(), at the beginning of a string

• trimEnd(), at the end of a string

let message = "   Oh my this is spread out!   "
let trimmedL = message.trimStart()
let trimmedR = message.trimEnd()

console.log(trimmedL)
> "Oh my this is spread out!   "

console.log(trimmedR)
> "   Oh my this is spread out!"