CodeGym/Kursy/Frontend SELF PL/Template Literals

Template Literals

Dostępny

3.1 Zagnieżdżone wyrażenia

W Template Literals możesz używać dowolnych wyrażeń, w tym wywołań funkcji, operatorów warunkowych i Template Literals wewnątrz innych Template Literals.

Przykład:

W wyrażeniu ${a + b} wykonywana jest operacja matematyczna, a wynik jest wstawiany do ciągu result.

JavaScript
const a = 5;
const b = 10;

const result = `The result of ${a} + ${b} is ${a + b}.`;
console.log(result); // "The result of 5 + 10 is 15."

3.2 Zagnieżdżone Template Literals

Template Literals mogą być zagnieżdżone, co pozwala tworzyć skomplikowane ciągi tekstowe.

Przykład:

Wywołanie metody greet() obiektu user jest zagnieżdżone w Template Literal message.

JavaScript
const user = {
  name: 'Bob',
  age: 25,
  greet() {
    return `Hello, ${this.name}!`;
  }
};

const message = `${user.greet()} You are ${user.age} years old.`;

console.log(message); // "Hello, Bob! You are 25 years old."

3.3 Templaty oznaczone (Tagged Templates)

Templaty oznaczone pozwalają wywołać funkcję do przetwarzania ciągów szablonowych. Dzięki temu można wykonywać dodatkowe manipulacje na ciągach, takie jak internacjonalizacja, bezpieczne wstawianie HTML itp.

Składnia:

function tag(strings, ...values) {
  // przetwarzanie ciągów i wartości
  return rezultat;
}

const result = tag`Szablonowa linia z ${zmienna}`;

Przykład:

Funkcja highlight() przetwarza ciągi i wartości, opakowując wartości w znaczniki HTML <span> z klasą highlight.

JavaScript
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) =>
    `${result}${str}${values[i] || ''}`, '');
}

const name = 'Carol';
const hobby = 'painting';
const message = highlight`My name is ${name} and I love ${hobby}.`;

console.log(message);
// "My name is <span class="highlight">Carol</span> and I love <span class="highlight">painting</span>."

3.4 Bezpieczne wstawianie wartości

Template Literals pomagają unikać niektórych powszechnych problemów z bezpieczeństwem, takich jak XSS (Cross-Site Scripting), poprzez bezpieczne wstawianie wartości. To szczególnie przydatne przy wstawianiu danych użytkownika w HTML.

Przykład:

Funkcja safeHTML() zastępuje niebezpieczne znaki w wartościach, zapobiegając atakom XSS.

JavaScript
function safeHTML(strings, ...values) {
  return strings.reduce((result, str, i) =>
    `${result}${str}${String(values[i]).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}`, '');
}

const userInput = '<script>alert("XSS")</script>';
const message = safeHTML`User input: ${userInput}`;

console.log(message);
// "User input: &lt;script&gt;alert("XSS")&lt;/script&gt;"
1
Zadanie
Frontend SELF PL,  poziom 37lekcja 2
Niedostępne
Matematyczne szablony
Matematyczne szablony
1
Zadanie
Frontend SELF PL,  poziom 37lekcja 2
Niedostępne
Formatowanie tekstu
Formatowanie tekstu
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy