Template string w JavaScript

Dzisiaj przedstawię Ci kolejną nowość wprowadzoną w ES6, o której pisałem w poprzednich artykułach. Coś dzięki czemu, działanie na stringach stało się jeszcze bardziej wygodne, mowa o tzw. template string, czyli szablonie string'a. Co to takiego template string i w czym ułatwia działanie na stringach? Zapraszam do czytania.

Zobacz na początek przykład zapisania znaku nowej linii bez używania template string'a, przed ES6:

let example1 = 'Czesc!\nProgramuje w:\n-JavaScript,\n-C#,\n-Java';
console.log(example1);
/*
Czesc!
Programuje w:
-JavaScript,
-C#,
-Java
*/

Przyznasz, że niezbyt wygodny zapis. Dzięki template string identyczne zdanie możesz zapisać w taki sposób:

let example2 = 
`Czesc!
Programuje w:
-JavaScript,
-C#,
Java`;
console.log(example2);
/*
Czesc!
Programuje w:
-JavaScript,
-C#,
-Jave
*/

Od razu lepiej :) Nie wiem jak dla Ciebie, ale mi dużo bardziej odpowiada zapis w 2 przykładzie. Stringi przed ES6 mogły być zapisane w cudzysłowach ("string") lub apostrofach ('string'). Zauważ, że 2 przykładzie tekst jest objętymi tzw. backtick'ami (`string`), czyli odwrotnymi apostrofami. Nie wiem jak te znaki nazywają się w Polsce, nie znalazłem tłumaczenia, ale na klawiaturze jest on na tym samym klawiszu gdzie znajduje się znak tyldy ('~'). Dzięki backtick'om wszystkie znaki nowej linii są interpretowane w prawidłowy sposób.

Kolejnym ułatwieniem w działaniu na string'ach jest wprowadzenie tak zwanej interpolacji string'ów. Zobacz na poniższy zapis przed ES6:

let firstName = 'Kazimierz';
let lastName = 'Szpin';
let example3 = 'Nazywam się ' + firstName + ' ' + lastName + '.';
console.log(example3);

Niby proste zdanie, a zobacz jak dużo apostrofów musiałem wprowadzić, żeby był oczekiwany efekt. Dzięki interpolacji string'ów możemy to samo zdanie napisać w taki sposób:

let firstName = 'Kazimierz';
let lastName = 'Szpin';
let example4 = `Nazywam się ${firstName} ${lastName}.`;
console.log(example4);

Dzięki interpolacji string'ów, chcąc wprowadzić wartość zmiennej, wystarczy umieścić ją w nawiasy klamrowe, oraz nawiasy te poprzedzić znakiem dolara. W nawiasy klamrowe możesz wprowadzić zmienne o różnych typach, jak również wyrażenia czy funkcje.

function add(number1, number2) {
    return number1 + number2;
}

let myNumber = 24;
let example5 = 
`Zmienna number: ${myNumber}.
Użycie funkcji add: ${add(12, 42)}.
Wyrażenie: ${2*2}`;
console.log(example5);
/*
Zmienna number: 24.
Użycie funkcji add: 54.
Wyrażenie: 4
*/

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Obiekt date w JavaScript.
Następny artykuł - Funkcje strzałkowe w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły