JS - TTL ex. 2 - CODELINE

Kolejne ćwiczenie z tagged template literals, będące kontynuacją poprzedniego ćwiczenia. Rozwijamy swoje umiejętności.

Ok, przypomnijmy sobie ostatnie ćwiczenie:

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>" ]

Jeżeli wszystko bezbłędnie rozumiemy, zobaczmy co chcemy osiągnąć:

let ul = wrapIntoList`${"ul"}<li>${languages}</li>`;
console.log(ul);
//<ul><li>JS</li><li>PHP</li><li>C#</li></ul>

let ol = wrapIntoList`${"ol"}<li>${languages}</li>`;
console.log(ol);
//<ol><li>JS</li><li>PHP</li><li>C#</li></ol>

Ok, zastanówmy się jak wygląda tzw. zmienna strings do której przekazujemy coś w ten sposób:

function strings(strs){
    console.log(strs);
}

strings`${"expr1"}txt1${"expr2"}txt2`;
//Array(3) [ "", "txt1", "txt2" ]

Tak wygląda – na początku pusty string, potem pierwszy tekst, potem drugi. Ok, dalej drążymy temat, aż zrozumiemy co chcemy osiągnąć:

function expressions(strs, ...exprs){
    console.log(strs);
    console.log(exprs);
}

let expr1 = "ul";
let expr2 = ["JS", "PHP", "C#"];

expressions`${expr1}txt1${expr2}txt2`;
//[ "", "txt1", "txt2" ]
//["ul",  ["JS", "PHP", "C#" ]]

Ok, już powinniśmy mieć jakiś pomysł, jak powinna wyglądać sygnatura funkcji:

function signature(tags, tag, elements ){
    console.log(tags);
    console.log(tag);
    console.log(elements);
}

signature`${expr1}txt1${expr2}txt2`;
//[ "", "txt1", "txt2" ]
//"ul"
//["JS", "PHP", "C#"]

Teraz mała popraweczka:

function signature(tags, tag, elements ){
    tags = tags.slice(1);
    console.log(tags);
    console.log(tag);
    console.log(elements);
}

signature`${expr1}txt1${expr2}txt2`;
//[ "txt1", "txt2" ]
//"ul"
//["JS", "PHP", "C#"]

Ok, możemy pracować. Piszemy funkcję:

function wrapIntoList(tags, tag, elements){
    
    tags = tags.slice(1);

    const newHTML = elements.map(function(content){
        return `${tags[0]}${content}${tags[1]}`;
     });
    
    let htmlString = newHTML.reduce(function(acc, curr){
        return acc + curr;
    }, `<${tag}>`);

    htmlString += `</${tag}>`;

    return htmlString;

}

let ul = wrapIntoList`${"ul"}<li>${languages}</li>`;
console.log(ul);
//<ul><li>JS</li><li>PHP</li><li>C#</li></ul>

let ol = wrapIntoList`${"ol"}<li>${languages}</li>`;
console.log(ol);
//<ol><li>JS</li><li>PHP</li><li>C#</li></ol>

Jeżeli tak sobie będziemy rozkładać zawsze wszystko na drobne części zanim zaczniemy pisać funkcję dla tagged template literal (aż zrozumiemy i zapamiętamy jak one działają) to nigdy nie będziemy mieć problemu

Zagadnienie jest „trudne” bo jest inne niż to, do czego jesteśmy zazwyczaj przyzwyczajeni.

JS – TTL ex. 2