Modest Programmer logo
12 września 2018
Tagi: 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.
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista C#/.NET. Głównie pisze aplikacje w ASP.NET MVC, WPF oraz Windows Forms.
Autor bloga ModestProgrammer.pl
Dodaj komentarz
© Copyright 2019 modestprogrammer.pl. Wszelkie prawa zastrzeżone. Polityka prywatności. Design by Kazimierz Szpin