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 ✌️