roadToReact
Szymon Ludwikowski

Łańcuchy szablonowe (Template strings)

Łańcuchy znaków pozwalają na łatwe interpolowanie wartości zmiennych i wyrażeń wewnątrz łańcucha znaków oraz tworzenie wielowierszowych ciągów znaków bez konieczności używania specjalnych znaków nowej linii.

JavaScript

Nauka

Sprawdź również moje inne projekty :)
19 marca 2023

Łańcuchy szablonowe

Razem z wejściem nowego standardu ES wprowadzony został nowy rodzaj literałów łańcuchowych — łańcuchy szablonowe. W odróżnieniu od zwykłych łańcuchów do ich zapisu zamiast 'apostrofów` bądź "cudzysłowów" korzystamy z `grawisów`, po angielsku nazywanymi backticks.
Aby zobaczyć, z czym mamy do czynienia, posłużmy się przykładem.

Zwykły łańcuch znaków 

const name = 'Szymon';
const age = 29;


const greeting = 'Cześć, nazywam się ' + name + ' i mam ' + age + ' lat.';


console.log(greeting); 
// Cześć, nazywam się Szymon i mam 29lat.
W zwykłym łańcuchu znaków, aby dodać wartość zmiennych do łańcucha, trzeba użyć operatora konkatenacji ( + ), który łączy ciągi znaków i zmienne. W przykładzie użyliśmy trzech zmiennych name, age oraz łańcucha znaków 'Cześć, nazywam się ' i ' i mam ' oraz ' lat.'.

Szablon literału

const name = 'Szymon'
const age = 29


const greetingTemplate = `Cześć, nazywam się ${name} i mam ${age} lat.`;


console.log(greetingTemplate); 
// Cześć, nazywam się Szymon i mam 29 lat.
Jak widać, przykład użycia template strings jest dużo czytelniejszy. Zamiast operatora ( + ) używamy tutaj zapisu `${nazwa_zmiennej}`, co pozwala na wprowadzenie zmiennej bez konieczności wstawiania jej wprost do ciągu znaków.

Wieloliniowe łańcuchy szablonowe

W starszych wersjach języka JavaScript, przed wprowadzeniem ES6, aby utworzyć wieloliniowy łańcuch znaków, musieliśmy użyć ciągów znaków złożonych z operatora ( + ) i specjalnego znaku nowej linii ( \n ). Oto przykład: 
const multiLineString = 'To jest łańcuch \n' +
                        'znaków wielowierszowy. \n' +
                        'Można go tworzyć poprzez \n' +
                        'dodanie znaku nowej linii \n' +
                        'i operatora konkatenacji.';


console.log(multiLineString);
Używając łańcuchów szablonowych, nie musimy stosować dodatkowej składni. Wystarczy umieścić go wewnątrz backticków i wcisnąć w odpowiednim miejscu klawisz enter, a system automatycznie wykryje każdą nową linię. Ten sam przykład z użyciem nowej wersji ES, prezentuje się w ten sposób:
const multiLineString = `To jest łańcuch 
znaków wielowierszowy. 
Można go tworzyć poprzez 
umieszczenie każdej nowej linii 
wewnątrz backticków.`;


console.log(multiLineString);

Oznaczone łańcuchy szablonowe.

Jest to dodatkowa funkcjonalność wprowadzona w ES6. Pozwala na bardziej zaawansowane manipulowanie łańcuchami.
Funkcja ta zazwyczaj przyjmuje dwa argumenty. Pierwszy argument funkcji zawiera tablicę wartości łańcuchowych drugi to tablica wyrażeń przekazanych do łańcucha.
function taggedTemplate(strings, ...values) {
  // jakas wartość
}
Oznaczone łańcuchy szablonowe pozwalają na bardziej zaawansowane manipulowanie łańcuchami szablonowymi, ale wymagają dodatkowego kodu w postaci funkcji oznaczającej. W starszych wersjach języka JavaScript nie było takiej funkcjonalności, co oznaczało, że bardziej zaawansowane operacje na łańcuchach szablonowych wymagały bardziej skomplikowanego kodu. Przykłady użycia:
Formatowanie daty:
function formatDate(strings, ...values) {
  const date = new Date(...values);
  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
}


const date = new Date("2023-03-19");
const formattedDate = formatDate`Date: ${date}`;


console.log(formattedDate); //"19/3/2023"
W powyższym przykładzie funkcja formatDate oznacza łańcuch szablonowy i przetwarza wartości wstawione do niego, aby sformatować datę w odpowiedni sposób.
Walidacja danych wejściowych: 
function validateInput(strings, ...values) {
  const regex = /^[a-zA-Z0-9]+$/;
  for (const value of values) {
    if (!regex.test(value)) {
      return "Invalid input";
    }
  }
  return "Valid input";
}


const input1 = "ValidInput123";
const input2 = "Invalid Input 123";
const validationResult = validateInput`Input 1: ${input1}, Input 2: ${input2}`;


console.log(validationResult); // "Invalid input"
W tym przypadku funkcja validateInput oznacza łańcuch szablonowy i wykonuje walidację danych wejściowych, aby upewnić się, że każda wartość składa się tylko z liter i cyfr.

Podsumowanie

ECMAScript 2015 przyniosło wiele usprawnień wraz z wprowadzeniem nowych literałów. Między innymi:
  1. Łatwiejsze tworzenie złożonych ciągów znaków tekstowych.
  2. Unikanie problemów związanych z koniecznością łączenia wielu znaków ciągów tekstowych (nie trzeba korzystać z operatora konkatenacji).
  3. Wsparcie dla wieloliniowych ciągów znaków (nie musimy korzystać ze znaków specjalnych takich jak np. ( \n ).
  4. Interpolacja wartości - dzięki temu, że łańcuchy szablonowe pozwalają na umieszczanie zmiennych wewnątrz ciągów tekstowych, można łatwo wstawiać zmienne do szablonów, co ułatwia pisanie kodu.
  5. Oznaczone szablony - łańcuchy szablonowe pozwalają na tworzenie oznaczonych szablonów, które pozwalają na przetwarzanie wartości umieszczonych wewnątrz szablonu przed zwróceniem wyniku.
Podsumowując, łańcuchy szablonowe są łatwiejsze w użyciu niż tradycyjne ciągi tekstowe i oferują szereg funkcjonalności, które ułatwiają pisanie kodu.
W przyszłym tygodniu omówimy FUNKCJE STRZAŁKOWE.

Źródła