`Tagged ${Template} Literals` ... wyjasnijcie fragment kodu

Odpowiedz Nowy wątek
2019-04-11 12:56
0
let person = {name: 'John Smith'}; 
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];  
tag `My name is ${person.name}!` // Output: My name is JOHN SMITH!

nie rozumiem zapisu z trzeciej liniki...
co robi w tym kontekście linijka nr 2?
przecież zamierzony efekt da :

let person = {name: 'John Smith'}; 
console.log(`My name is ${person.name}!`);

gdzie o tych szablonach poczytać po polsku najlepiej?

pozdrawiam
AK

edytowany 3x, ostatnio: andrzej.kmicic, 2019-04-11 23:36
Ha, nie wiedziałem, że tak można (że istnieją takie tagged template literals). Dzięki, @andrzej.kmicic. :) - Silv 2019-04-11 14:15
@Silv, a jak to zgrabnie można wykorzystać jako template engine w czystym js. - andrzej.kmicic 2019-04-11 21:15
Yy, nie rozumiem pytania. Chodzi Ci o taki template engine? - Silv 2019-04-11 21:17
@Silv zamieszczę fragment kodu, może nie wykorzystujący funkcji otagowanych wyrażeń ale właśnie jako template engine to mnie zrozumiesz. - andrzej.kmicic 2019-04-11 21:24
@andrzej.kmicic: przenieś to może do oddzielnego postu, bo chyba nie łączy się z tematem wątku. - Silv 2019-04-11 21:44

Pozostało 580 znaków

2019-04-11 14:01
1

tag `My name is ....... - Nie ma takiego słowa kluczowego jak tag

To tag nie występuje w pozycji słowa kluczowego. - Patryk27 2019-04-11 14:03

Pozostało 580 znaków

2019-04-11 14:43
0

Druga linijka to deklaracja funkcji tag. Według dokumentacji jako pierwszy argument przyjmuje tablicę stringów, z których składa się podany tekst (czyli tutaj My name is), a jako drugi i każdy kolejny, wartości, które chcemy podstawić (czyli tutaj ${person.name}.
A więc tag służy do "przetworzenia" stringa przed wypisaniem go. W tej sytuacji wykonuje się toUpperCase() zmiennej, którą wrzucimy w ${}

tag nie jest obowiązkową nazwą, można tę funkcję nazwać dowolnie

edytowany 1x, ostatnio: hifinit, 2019-04-11 14:44
definicja, nie deklaracja * - Patryk27 2019-04-11 14:59
Definicja funkcji (zwana też deklaracją funkcji, lub instrukcją funkcji) https://developer.mozilla.org[...]/Web/JavaScript/Guide/Funkcje - hifinit 2019-04-11 15:04
Zalinkowałeś do innego zjawiska - zauważ, że w tym wypadku nie mamy do czynienia z deklaracją funkcji tag, a utworzeniem anonimowej funkcji i przypisaniem jej do zmiennej tag. Stąd następuje deklaracja oraz definicja zmiennej tag, której wartością jest funkcja - w porównaniu do składni var tag;, która jest jedynie deklaracją (a nie definicją). - Patryk27 2019-04-11 15:33
@Patryk27: wydaje mi się, że dobrze kombinujesz, ale nie jestem pewien, czy ma to odzwierciedlenie w jakimś oficjalnym nazewnictwie. - Silv 2019-04-11 15:36

Pozostało 580 znaków

2019-04-11 14:58

Można by dodać, że przedstawiony przykład jest trochę prosty, więc wydaje się, że nie oddaje możliwości otagowanych wyrażeń. Nadto, nie jestem tego pewien, ale wydaje mi się, że można by to zaliczyć do wywołań funkcji bez nawiasów, tak jak w tym wątku na Stack Overflow: https://stackoverflow.com/a/35949617

PS. Tak patrząc dokładnie, jak określone w standardzie ECMAScript, to powiedziałbym, że to nie jest potwierdziłbym, że to jest wywołanie funkcji – ale można zobaczyć samemu: https://www.ecma-internationa[...]ndex.html#prod-CallExpression

edytowany 4x, ostatnio: Silv, 2019-04-11 15:11

Pozostało 580 znaków

2019-04-11 22:08
0

fragment kodu o którym wspomniałem w komentarzu generuje stronę z komponentami "card" oraz komplet modalnych okienek z formą na parametry:

var tbody = document.querySelector("#first_row");
var tmodal = document.querySelector("#modal_row");

//console.log(car);

function getModalForm(car) {
  var form=``;
  var params = car.params;
  params.forEach (item => {
  form += `
  <div class="row">
    <div class="input-field col s12">
      <input value="${item.value}" id="${item.id}" type="${item.type}" class="${item.class}">
      <label for="disabled">${item.label}</label>
    </div>
  </div>`;
  })
  return `
    <!-- Modal Structure -->
    <div id="${car.modalid}" class="modal modal-fixed-footer">
      <div class="modal-content">
        <h4>Parametry</h4>
        ${form}
      </div>
      <div class="modal-footer">
        <a href="#!" class="m modal-close waves-effect waves-green btn-flat">Zapisz</a>
      </div>
    </div>`
}       

function getCard(car) {
  return `<div class="col s6 m12">
  <div class="card blue-grey darken-1">
    <div class="card-content white-text">
      <span class="card-title">${car.type} ${car.model}</span>
      <p>${car.color}</p>
    </div>
    <div class="card-action">
      <a class="waves-effect waves-light btn modal-trigger" href="#${car.modalid}">Parametry</a>
      <a class="waves-effect waves-light right btn" href="#">Run</a>
    </div>
  </div>
</div>`
}
console.log(car);
car.forEach(element => {
  var crd = getCard(element);
  tbody.insertAdjacentHTML('beforeend',crd);
  var modal = getModalForm(element);
  tmodal.insertAdjacentHTML('beforeend',modal);     
});   

no i dowolne dane jako obiekt json :

const car = [
    {
        "type": "Fiat",
        "model": "500",
        "color": "white",
        "modalid": "fiatModal",
        "params": [
            {
                "id": "numbers",
                "name": "numbers",
                "label":"Liczb razem",
                "type": "text",
                "value": "10",
                "class": "validate"
            },
            {
                "id": "inline",
                "name": "inline",
                "label":"Liczb w zakładzie",
                "type": "text",
                "value": "10",
                "class": "validate"
            },
            {
                "id": "mode",
                "name": "mode",
                "label":"Opis",
                "type": "text",
                "value": "Hello",
                "class": "validate"
            }            
        ]
    },
    {   "type": "Cinquecento", 
        "model": "1100", 
        "color": "orange",
        "modalid": "cinqueModal",
        "params": [
            {
                "id": "numbers",
                "name": "numbers",
                "label":"Liczb razem",
                "type": "number",
                "value": "10",
                "class": "validate"
            },
            {
                "id": "inline",
                "name": "inline",
                "label":"Liczb Cinquecento",
                "type": "text",
                "value": "10",
                "class": "validate"
            },
            {
                "id": "mode",
                "name": "mode",
                "label":"Opis Cinquecento",
                "type": "text",
                "value": "Hello",
                "class": "validate"
            }            
        ]
    },
    {   "type": "Opel", 
        "model": "Corsa", 
        "color": "ecru",
        "modalid": "corsaModal",
        "params": [
            {
                "id": "numbers",
                "name": "numbers",
                "label":"Liczb Razem",
                "type": "text",
                "value": "10",
                "class": "validate"
            },
            {
                "id": "inline",
                "name": "inline",
                "label":"Liczb w wierszu",
                "type": "text",
                "value": "10",
                "class": "validate"
            },
            {
                "id": "mode",
                "name": "mode",
                "label":"Opis Opel",
                "type": "text",
                "value": "Hello",
                "class": "validate"
            }           
        ]
    },
    {   "type": "BMW", 
        "model": "2500", 
        "color": "black",
        "modalid": "bmwModal",
        "params": [
            {
                "id": "numbers",
                "name": "numbers",
                "label":"Liczb razem",
                "type": "text",
                "value": "10",
                "class": "validate"
            },
            {
                "id": "inline",
                "name": "inline",
                "label":"Liczb BMW",
                "type": "text",
                "value": "10",
                "class": "validate"
            },
            {
                "id": "mode",
                "name": "mode",
                "label":"Opis BMW",
                "type": "text",
                "value": "Hello",
                "class": "validate"
            }           
        ]
    }
];

Pozostało 580 znaków

2019-04-11 22:14
0

Ale jak ten fragment kodu ma się łączyć z tagged template literals? Chodzi Ci o to, że chciałbyś po prostu gdzieś w nim je wykorzystać, tak?


UPDATE: Przepraszam, ja chyba nie pomogę. Dopiero dziś zobaczyłem te literały, jak napisałem, a na razie nie widzę dla nich żadnego zastosowania. Można by oczywiście zamienić w podanym przez Ciebie kodzie każde wystąpienie template literal na tagged template literal, ale nie wiem, czy to ma sens z punktu widzenia tego kodu.

edytowany 3x, ostatnio: Silv, 2019-04-11 22:39

Pozostało 580 znaków

2019-04-11 23:19
0
Silv napisał(a):

Ale jak ten fragment kodu ma się łączyć z tagged template literals? Chodzi Ci o to, że chciałbyś po prostu gdzieś w nim je wykorzystać, tak?

No tak ale aby zastosować to muszę zrozumieć... w kodzie zastosowane są nasze `Tagged ${Template} Literals` ale w sposób tradycyjny: wielowierszowy fragment tekstu(tu html) służy jako szablon otagowany odwrotnym pojedynczym apostrofem z wstrzykiwaniem zmiennych w tagach ${zmienna}. W kodzie htmlowe fragmenty wielowierszowe z otagowanymi zmiennymi wywoływane są w tradycyjnej funkcji. Ale zastanowiła mnie ta nowa konstrukcja wywołania funkcji : fun`Tagged ${Template} Literals` której nie rozumiem.

Już chyba rozumiem. Ładnie to jest wyjaśnione na https://wesbos.com/tagged-template-literals/. Do funkcji można przekazać literał w postaci tablicy stringów rozczłonkowanej kolejno na granicach pomiędzy zmiennymi i kolejne wstrzykiwane zmienne. Tak więc w funkcji możesz dowolnie kombinować zwracany wynik operując tylko indeksami tablicy i zmiennymi. Jeżeli się mylę poprawcie mnie proszę.

function highlight(strings,...values) {
   let str = '';
   strings.forEach((string, i) => {
       str += string + values[i];
   });
   return str;
}

const name = 'Snickers';
const age = '100';
const sentence = highlight`My dog's name is ${name} and he is ${age} years old`;
console.log(sentence)
edytowany 4x, ostatnio: andrzej.kmicic, 2019-04-12 10:11
URL do wesbos jest niepoprawny. - Silv 2019-04-12 01:52

Pozostało 580 znaków

2019-04-12 02:09
0

w kodzie zastosowane są nasze Tagged ${Template} Literals ale w sposób tradycyjny (...)

Nie, w kodzie zastosowane są "zwykłe" template literals. Te, o które Ci chodzi, to tagged template literals (i z tego, co widzę, żadnego z nich nie ma w kodzie). (To tak gwoli poprawnego nazewnictwa).

Do funkcji można przekazać literał w postaci tablicy stringów rozczłonkowanej kolejno na granicach pomiędzy zmiennymi i kolejne wstrzykiwane zmienne. Tak więc w funkcji możesz dowolnie kombinować zwracany wynik operując tylko indeksami tablicy i zmiennymi.

Tak, ja to też tak rozumiem.

Przy czym można nawet więcej zrobić (tak, jak w przykładzie): jeśli przekażesz jako pierwszy argument strings, a jako drugi argument ...values (i żadnych innych nie przekażesz poza tymi dwoma), to operujesz wtedy tylko na dwóch parametrach – dwóch tablicach. Pierwsza to – tak, jak napisałeś – tablica kolejnych części naszego stringu, a druga to tablica wszystkich tych wstrzykiwanych zmiennych.

Uważam, że tym przykładzie brakuje wyspecyfikowania używanych parametrów (wiem, jest on ze strony wesbos). Funkcja highlight nie wie, jakie ma parametry, i wyrzuca błąd (https://jsfiddle.net/Lrcym35e/1/, otwórz sobie konsolę).

edytowany 6x, ostatnio: Silv, 2019-04-12 02:12
Dzieki tak brakowało parametrów już poprawiłem... Czy one zwykłe czy 'tagged' to swietne przemyślne narzędzie i elastyczne moożliwości zastosowania.. - andrzej.kmicic 2019-04-12 10:07
A jeżeli chodzi o nazewnictwo to oba sposoby to w zasadzie to samo w jednym przypadku jest stosowana funkcja w drugim nie. Patrz na banner i opis na : https://medium.freecodecamp.o[...]emplate-literals-48a70ef3ed4d - andrzej.kmicic 2019-04-12 12:53
Nie będę się kłócić o nazewnictwo (co nie znaczy, że się z Tobą zgadzam; i pamiętaj, że jestem perfekcjonistą ;) ) – ważne, byś wiedział, że istnieją dwie formy, jedna z tagiem, i jedna bez. - Silv 2019-04-12 13:49
PS. @andrzej.kmicic, dziś po obudzeniu się przyszło mi do głowy, że tagged template literals może realizują przynajmniej ten jeden cel (może jakieś inne, ale nie przychodzą mi do głowy): zasadę separation of concerns. Chodzi o oddzielenie dokładnego sposobu łączenia ciągów znaków od tych ciągów znaków. - Silv 2019-04-12 14:17

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0