szczecinski.eu

szczecinski.eu

  • Kurs React
  • Zaawansowany React
  • Kurs Redux
  • Kurs ES6
  • Blog
  • Kontakt

›Szybki kurs ES6

Szybki kurs ES6

  • Specyfikatory zasięgu - const, let
  • Template strings, tagged template strings
  • Arrow functions
  • Parametry domyślne, destructuring i rest
  • Skrócona notacja obiektowa, dynamiczne właściwości obiektu, spread
  • Klasy
  • Moduły
  • Kod asynchroniczny - Promise
  • Dekoratory

Template strings, tagged template strings

template strings

Definiowanie łańcuchów tekstowych, które zawierały w sobie dynamiczny kod, lub rozciągały na wiele linii było dosyć nie wygodne, dlatego w ES6 wprowadzono nowy typ łańcuchów tekstowych - template strings. Aby je zdefiniować, tekst otaczamy znacznikami `.

Jeżeli tekst zostanie owinięty znacznikami ` będzie on traktowany jako łańcuch tekstowy i wszelkie znaki specjalne zostaną potraktowane dosłownie aż do napotkania kolejnego znacznika `.

Jeżeli chcemy w takim łańcuchu osadzić wartość dynamiczną używamy zapisu ${wyrażenie}

const a = `klasyczny łańcuch tekstowy`;
const b = `łańcuch tekstowy
w wielu liniach`;

const c = `łańcuch z osadzoną zmienną: ${a}`

tagged template strings

Template literals można użyć także do wywołania funkcji - zapis ten może wydawać się nieco dziwny, ale jest on popularny w niektórych rozwiązaniach np. w bibliotece styled-components

function logToConsole(input) {
  console.log("Loguję: ", input);
}            

logToConsole`Witaj świecie!`; // "Loguję: ", ["Witaj świecie"];

const Component = styled.div`
  color: 'red'
`;
← Specyfikatory zasięgu - const, letArrow functions →
  • template strings
  • tagged template strings
Bartosz Szczeciński © 2019 Materiał dostępny na zasadach licencji MIT.