In the previous blog, we learned about some useful string methods like length, slice, startsWith, and valueOf that can be handy in many scenarios when we have to do string manipulation. Now we will learn a few more important methods of javascript string.

1. toLowerCase:

The toLowerCase() method returns the calling string value converted to lower case.

str.toLowerCase()

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

console.log(sentence.toLowerCase());
// expected output: "the quick brown fox jumps over the lazy dog."

toLowerCase() does not affect the value of the string str itself.

2. toUpperCase:

The toUpperCase() method returns the calling string value converted to uppercase.

str.toUpperCase()

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

console.log(sentence.toUpperCase());
// expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."

3. charAt:

Returns the character (exactly one UTF-16 code unit) at the specified index.

let character = str.charAt(index)

"I❤U".charAt(1) // "❤"
let str = "Home"
str.charAt(1) // "o"

If no index is provided to charAt(), the default is 0.

"Hello".charAt() // "H"
"Hello".charAt(0) // "H"

If the index you supply is out of this range, JavaScript returns an empty string.

"Hello".charAt(20) // ""

4. indexOf:

The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, Returns -1 if the value is not found.

str.indexOf(searchValue [, fromIndex])

const str = 'Brave new world'
str.indexOf("new")

If no string is explicitly provided, search value will be “undefined“, and this value will be searched for in str.

"Hellow India".indexOf() // -1
"undefined unefine".indexOf() // 0

There is an optional parameter named fromIndex. The default value is 0

"Hello".indexOf('e') // 1
"Hello".indexOf('e', 0) // 1

For fromIndex values lower than 0, or greater than str.length, the search starts at index 0 and str.length, respectively.

str = 'Brave new world'
// Here fromIndex will be 0 since it is lower than 0
str.indexOf("new", -1) // 6
// Here fromIndex will be  str.length since it is greater than length of string
str.indexOf("new", 30) // -1

An empty string searchValue produces strange results. With no fromIndex value, or any fromIndex value lower than the string’s length, the returned value is the same as the fromIndex value:

'hello world'.indexOf('') // returns 0
'hello world'.indexOf('', 0) // returns 0
'hello world'.indexOf('', 3) // returns 3
'hello world'.indexOf('', 8) // returns 8

indexOf() is case-sensitivity

'hello world'.indexOf('h') // returns 0
'hello world'.indexOf(H'') // returns -1

5. substring:

The substring() method returns the part of the string between the start and end indexes, or to the end of the string.

str.substring(indexStart[, indexEnd])

const str = 'Mozilla';

console.log(str.substring(1, 3));
// expected output: "oz"

If indexEnd is omitted, substring() extracts characters to the end of the string.

var str = "Hello India"
console.log(str.substring(2)) // "lo India"

If indexStart is equal to indexEnd, substring() returns an empty string.

var str = "Hello India"
console.log(str.substring(2,2)) // ""

If indexStart is greater than indexEnd, then the effect of substring() is as if the two arguments were swapped.

let anyString = 'Mozilla'

console.log(anyString.substring(0, 1)) // "M"
// Here indexStart is greater than indexEnd
console.log(anyString.substring(1, 0)) // "M 

console.log(anyString.substring(0, 3)) //"Moz"
// Here indexStart is greater than indexEnd
console.log(anyString.substring(3,0)) // "Moz"

If either or both of the arguments are negative or NaN, the substring() method treats them as if they were 0.

let text = 'Mozilla'
//Here both argument are -ve so, it treated as zero
console.log(text.substring(-5, -2))  // => "" 
//Here one argument (-5)  is -ve so, it treated as zero
console.log(text.substring(-5, 2))  // => "zil"

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Properties