Skip to content

Template literals

Vroeger: concatenatie met +

Wanneer je een text variabele, een string, wilt maken van meerdere variabelen kan je gebruik maken van concatenation. Hiervoor gebruik je het + teken:

let aapString = 'aap';
let nootString = 'noot';
let miesString = 'mies';

let leesPlank = aapString + " " + nootString + " " + miesString;

De variabele leesPlank bevat nu de string "aap noot mies".

Nu: Template strings

Het kan ook anders, met behulp van template strings:

let leesplank = '${aapString} ${nootString} ${miesString}';

Merk op dat de template string omgeven is door backticks, het ` karakter dat op je keyboard vaak te vinden is op de toets waar ook de ~ (tilde) staat.

Deze wijze is veel overzichtelijker en sneller dan string concatenation en zeker een betere optie bij het genereren van complexe strings.

Functional tags

Soms wil je een variabele op een meer intelligente manier omzetten een string. De volgende functie rapporteert een race waarbij je aangeeft op welke plaats de kandidaat is geëindigd:

function reportRace(str, place){
    // de postfix voor elk getal om er een bijvoeglijk naamwoord van te maken 
    const postfix = ['th','st','nd','rd','th','th','th','th','th','th']    
    // plak de postfix aan het getal
    const placeString = `${place}${postfix[place]}`;
    // bepaal of er een medaille behaald is
    const hasMedalString = `did${(place <= 3 ? '' : 'n\'t')}`;

    return `${str[0]}${placeString} place and ${hasMedalString} earn a medal`;
}

Deze functie is nu te gebruiken als template literal:

console.log(reportRace`My horse finished at ${2}`)

geeft:

"My horse finished at 2nd place and did earn a medal"

en:

console.log(reportRace`My horse finished at ${4}`)

geeft:

"My horse finished at 4th place and didn't earn a medal"

Bron

Last update: December 9, 2022