STRING METHODS AND CONCATENATION

src

Hi everyone, in this tutorial, I will take about String methods and concatenation, including properties and methods that are available with Strings.

const firstName = 'Vidder';
const surName = 'Vig';
const man = 'This is a man';

let gem;

gem = firstName + surName;


The output here is simple. It will take the first name and the surname and squeeze them together. It won't make sense because there won't be space in between them and this is why you need concatenation.

gem = firstName + ' ' + surName;

// This will provide space in it like 'Vidder Vig' 

// concat()

gem = firstName.concat(' ', surName);

// This will give the same result as above.

// Append- This is when you want to addon to a variable. 

gem = 'viddy ';
gem += 'viddo';

// Now, let's play with a sentence. 

gem = ' Hello, my name is ' + firstName + ' of ' + surName;

Here you will get ' Hello, my name is Vidder of Vig' In ES6 they introduce the Template literals/template strings. The aim is to make things easier to have a string and generate variable. I will talk about that later.

// Escaping.

gem = 'This\'s the genesis of knowing code';

// The 'This's is treated as the end of the string. In a situation like that, you could start by using a double quote or use the backslash \

// Length

gem = firstName.length;

// .length will just count the number of characters in a string. This will show 6 in my case. 

// Changing case

gem = firstName.toLowerCase(); // This will turn all the character of firstName to lowercase.
gem = firstName.toUpperCase(); // This will turn to uppercase

// indexOf()

gem = firstName.indexOf('d'); // This will give the index starting from the 0 base. The output here will be 2. vid-012

gem = firstName.lastIndexOf('d'); // This will give 3 because it is coming from behind and it is the second d. The opposite if indexOf() is charAt().

// charAt()

gem = firstName.charAt('3'); // This will output d. 

// You might want to get the last character in a string, and this is the formula to use. 

gem = firstName.charAt(firstName.length -1);

// substring()

gem = firstName.substring(0,5); // This will pick the characters within an index of 1 to 5, which is Vidde in my case. Another way is using slice.

gem = firstName.slice(0,4);
gem = firstName.slice(0,-4); // This will start from the back. 

// split()

gem = man.split(' '); // This will turn to array of 4 values based on the space between the string. (4) ["This", "is", "a", "man"]

// replace

gem = man.replace('man', 'woman'); // This will replace the man in the string to woman.

// includes. This will tell you if something is in a string

gem = man.includes('This'); // This will output true. If I input something that is not in the string, it will show me false. 

console.log(gem);

In the next post, I will talk about template literals which is part of ES6. Some of this may look boring at first, but you need to understand them to be able to build. We will get to a place where we will build a real project. Also, I might consider building a simple app tomorrow if I have plenty of time, otherwise, we will continue or tutorials.

Thank you.