ES6 has introduced 4 new methods to manipulate strings.
.startsWith();
.endsWith();
.includes();
.repeat();
They are pretty straightforward. Some examples to show what they are useful for.
const panNo = "AQAPP1865C"; // .startsWith(); checks if the string starts with the characters that are specified in the parameter panNo.startsWith('AQ'); //Will return true panNo.startsWith('P'); //Will return false //skip 3 characters and check for a characters panNo.startsWith('A', 3); //Will return true // .endsWith(); is similar to startsWith but checks for the end panNo.endsWith('5C'); //Will return true panNo.endsWith('A'); //Will return false // check if the third last character is 6 panNo.endsWith('6', 7); //Will return true. // .includes(); checks if the string contains characters that are specified in the parameter panNo.includes('18'); // Will return true panNo.includes('36'); // Will return false //.repeat(); repeats the string for the number of times requested in the parameter panNo.repeat(5); //Will return 'AQAPP1865CAQAPP1865CAQAPP1865CAQAPP1865CAQAPP1865C';
ES6 eliminates the need of concatenating strings in order to inject variables in them. You can pass variables inside a string when the string is wrapped with backticks.
const name = 'Jayman'; const teachingExp = 2; const designExp = 8; const frontendExp = 5; // This is the concatenation method const concatenatedStatement = "Hi, My name is " + name + " and I have " + teachingExp + " years of Teaching Experience, " + designExp + " years of Design Experience, " + frontendExp + " years of FrontEnd Experience. My total work experience is " + (teachingExp + designExp + frontendExp) + " years."; // This is the template string method const templateStringStatement = `Hi, My name is ${name} and I have ${teachingExp} years of Teaching Experience, ${designExp} years of Design Experience, ${frontendExp} years of FrontEnd Experience. My total work experience is ${teachingExp + designExp + frontendExp} years.` console.log(`Concatenated String : ${concatenatedStatement}`); console.log(`Template String : ${templateStringStatement}`);
You can have multi-line strings, nested template strings and if statements when you use Template Strings
const clubName = "Club Oasis"; const dayDesc = "Republic Day"; const date = "26/01/2020"; const publicholiday = true; // This is an example of Multi line string const markup = ` <div class="info-box"> // ${publicholiday} template string is using nested template string and checking a condition using ternary operation ${clubName} is ${publicholiday === true ? `closed` : `open`} as it is ${date} and is a public holiday on account of ${dayDesc}; </div> `; console.log(markup);
You can call and run a function inside the Template String
const clubFacility = { name : "Swimming Pool", capacity : 25, allowedUsers : ["Owners", "Owner's Family", "Owner's Guests", "Tenants", "Tenant's Family", "Tenant's Guests"] }; // This function is function userList(allowedUsers) { return ` <ul> ${allowedUsers.map(user => ` <li>${user}</li> `).join('')} </ul> `; } const markup = ` <div class="club-facility-chunk"> <h2>Name of the facility is ${clubFacility.name}</h2> Capacity of ${clubFacility.name} is ${clubFacility.capacity} Following users are allowed ${userList(clubFacility.allowedUsers)} </div> `; console.log(markup);
Template strings can be tagged to functions for additional control to the strings.
// function that will run when clubUpdate variable will be logged in console as the string is tagged function updateVariablesInClubUpdate(strings, ...values) { let update = ''; //loop through the template string using forEach loop strings.forEach((string, i) => { // concatenating and updating using template strings update += `${string} <span class="bold-text">${values[i] || ''}</span>` }); return update; } const nameOfMember = "Jayman Pandya"; const nameOfClub = "Club Oasis"; // The template string is tagged "updateVariablesInClubUpdate" which will refer to the function declared above const clubUpdate = updateVariablesInClubUpdate`Hello, ${nameOfMember}, welcome to ${nameOfClub}.`; console.log(clubUpdate);
So that is it with the Strings and Template Strings.
Peace ✌️