JavaScript ES6+ : Strings & Template Strings

Follow me on twitter @jaymanpandya

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

I am an UI designer with a flair for front-end development that makes any brand shine at what they do best. I am right now building amazing products for our clients both Indian and International at Interactive Digital Labs. I am part of the Design and Marketing Teams for Make WordPress and has spoken at local camps on Gutenberg as well as the importance of user experience. I am not intimidated by markup, languages, or tools: HTML to CSS, wireframing to prototyping, JavaScript to agile development, and design programs including Sketch, Adobe XD, Figma, Photoshop, Illustrator, InDesign etc. I love languages, and not just programming either. I speak English, Hindi, Marathi, and Gujarati. When I am not taking courses to improve my skills, I am trying new food, dabbling in filmmaking and photography, and running and cycling. Say hi to me on Twitter here @jaymanpandya.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.