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

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

1

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

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

0

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-international.org/ecma-262/9.0/index.html#prod-CallExpression

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

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.

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)

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ę).

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