JS – TTL ex. 1

Ćwiczymy tagged template literals. Proste ćwiczenie pokazujące jak potężne jest to narzędzie. Do dzieła!

Ok, zobaczmy co chcemy osiągnąć:

let languages = ["JS", "PHP", "C#"];

//(...)

let res = wrapMany`<li>${languages}</li>`;
console.log(res);
//Array(3) [ "<li>JS</li>", "<li>PHP</li>", "<li>C#</li>" ]

Czyli tak:

• Funkcja ma 2 stringi i 1 expression
• Expression może i 1, ale zawiera wiele replacementów, bo jest tablicą (ciężko na początku może być to pojąć)
• String[0] to tag otwierający, string[1] to tag zamykający
• Expr[0] to pierwszy content, który trzeba opleść tagami, expr[1] to drugi content, który trzeba opleść tagami…
• Funkcja ma przyjąć string z jednym expression (będącym tablicą)

Ok, tak to wygląda:

let languages = ["JS", "PHP", "C#"];

function wrapMany(tags, elements){
     const newHTML = elements.map(function(content){
        return `${tags[0]}${content}${tags[1]}`;
     });
     return newHTML;
}


let res = wrapMany`<li>${languages}</li>`;
console.log(res);
//Array(3) [ "<li>JS</li>", "<li>PHP</li>", "<li>C#</li>" ]

Nie jest to szczególnie trudne, jeżeli chodzi o sam kod, ale zrozumienie tego wymaga czasu i chęci. Zwłaszcza, że na początku wszystko będzie nam się mylić – jeden expression zawierający tablicę z tablicą zawierającą wiele expressions (typu prostego) i tak dalej.