Web Development
MEAN-Stack from A to Z
Fundamentals
Level1
Working with strings and manipulating them in various ways is one of the most common and repetitive tasks. We will review some operations that we frequently need, such as:
- Initially, a string or `string` datatype is similar to an array in that it is considered an array of characters, where each character holds a letter, symbol, or number, like this:
const myTxT = 'Hello world @ JS 4ever'
Therefore, each character has an index number, which is its position in the array, starting from zero.
For example, you can identify the second character in the string as follows:
let mySTR = 'Hello world @ JS 4ever';
console.log(mySTR[1]) // e
You can also determine the length of a string as follows:
let mySTR = 'Hello world @ JS 4ever';
console.log(mySTR.length) // 22
You can also identify a character by its index in another way using:
let mySTR = 'Hello world @ JS 4ever';
console.log(mySTR.charAt(0)) //H
There is also the `indexOf` property, which determines whether the string contains a specific character or substring, like this:
let mySTR = 'Hello world @ JS 4ever';
console.log(mySTR.indexOf('o')) // 4
In the previous code, the index number of the character `o` is determined, which is 4 (keeping in mind that counting starts from zero). Also, note that the character `o` appears twice in the string, but it identifies the position of the first `o` in the string.
console.log(mySTR.indexOf('o',5)) // 7
In the previous example, when passing the second argument (which is optional) and giving it the number 5, it searches the string starting from the sixth element. If the argument is not passed, it searches from the beginning of the string.
console.log(mySTR.indexOf('world')) // 6
You can also search for the starting position of a complete word, not just a character, as in the previous example.
console.log(mySTR.indexOf('z')) // -1
In the previous example, when the text or character you are searching for is not found, it returns `-1`.
Also, like in arrays, there is `lastIndexOf`, which performs the same task as `indexOf`, but instead of searching for the first position containing the text or character, it searches for the last position containing the text or character.
console.log(mySTR.lastIndexOf('o')) // 7
Another operation that can be performed on strings, similar to arrays, is `slice`, which cuts the string starting from a specific index to another index. If the start is not specified, it is considered to be from position 0, and if the end is not specified, it is considered to be the end of the string, as in the following code:
let mySTR = 'Hello world @ JS 4ever';
console.log(mySTR.slice(6,11)) //world
console.log(mySTR.slice(11)) // @ JS 4ever
console.log(mySTR.slice()) //Hello world @ JS 4ever
- Another operation that can be performed on strings is converting the text to uppercase or lowercase, like this:
let mySTR = 'Ahmed';
console.log(mySTR.toUpperCase()) //AHMED
console.log(mySTR.toLowerCase()) //ahmed
- Sometimes, we need to ensure that the text does not contain spaces, for example, when dealing with passwords. We can remove spaces from the beginning and end of the string in case the user copies and pastes their password and accidentally includes extra spaces, as in the following example:
let mySTR = ' hello world ';
console.log(mySTR.trim())//hello world
You can also specify whether to ignore spaces at the beginning or end of the string only, using:
let mySTR = ' hello world ';
console.log(mySTR.trimEnd())// hello world (ignores spaces at the end only)
console.log(mySTR.trimStart())//hello world (ignores spaces at the beginning only)
- Another method for splitting strings is:
let mySTR = 'hello world';
console.log(mySTR.substring(0,5)) //hello
It takes the start and end of the cut, and as usual, if the end is not specified, the end of the cut is considered to be the end of the string, like this:
let mySTR = 'hello world';
console.log(mySTR.substring(6)) //world
- Checking if a substring exists within the string:
You can use the `includes` method, as in the following code:
let mySTR = 'hello world';
console.log(mySTR.includes('world')) //true
console.log(mySTR.includes('hello',5)) //false
As in the previous code, the `includes` method takes two arguments: the first is the text to be checked, and the second is an optional argument. If passed, it checks for the text starting from the specified position, as in the second line of the previous code. If not passed, it defaults to 0, meaning it checks from the beginning of the original string. The method returns `true` if the original string contains the text to be checked, and `false` if it does not or if it is not found from the specified position.
Alternatively, you can use the `startsWith` method to check if the text to be searched for is at the beginning of the original string:
let mySTR = 'hello world';
console.log(mySTR.startsWith('hello',5)) //false
console.log(mySTR.startsWith('hello',0)) //true
console.log(mySTR.startsWith('hi')) //false
Like the `includes` method, the `startsWith` method takes two arguments: the first is the text to be checked, and the second is the starting position for the check. As usual, if the starting position is not passed, it defaults to 0, meaning it checks from the beginning of the original string.
Alternatively, you can use the `endsWith` method to check if the text to be searched for is at the end of the original string:
let mySTR = 'hello world';
console.log(mySTR.endsWith('world')) //true
console.log(mySTR.endsWith('hi')) //false
console.log(mySTR.endsWith('hello',5)) //true
In the previous code, note that `endsWith` takes two arguments: the first is the text to be checked, and the second is an optional argument that specifies the end position for the check. For example, if you specify the number 5, it considers the original string to end at the sixth character. If the end position is not specified, the method searches the entire original string.
- You can also split a string using a symbol or word and create an array of the other words that were between the word or character used to split the original string, as in the following code:
let mySTR = 'hello world i am a live';
console.log(mySTR.split(' ')) //[ 'hello', 'world', 'i', 'am', 'a', 'live' ]
In the previous code, I split the string using a space (white space), and each word before and after the space was separated and considered an element in the array.
If no separator is specified and an empty string is passed as an argument, each character in the string will be separated and made into an item in the array, like this:
let mySTR = 'hello';
console.log(mySTR.split('')) //[ 'h', 'e', 'l', 'l', 'o' ]
If no argument is passed to the method, the entire string will be made into a single item in the array, like this:
let mySTR = 'hello';
console.log(mySTR.split()) //[ 'hello' ]