3.1 Daxili ifadələr
Şablon literallarında istənilən ifadələri, o cümlədən funksiyaların çağırılmasını, ternar operatorlarını və şablon literallarını digər şablon literalları içində istifadə edə bilərsən.
Misal:
${a + b} ifadəsində riyazi əməliyyat yerinə yetirilir və nəticə result sətirinə daxil edilir.
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 İç-içə Şablon Literalları
Şablon literalları iç-içə yerləşə bilər, bu da mürəkkəb sətirlər yaratmağa imkan verir.
Nümunə:
message şablon literalı içərisində user obyektinin greet() metodu çağırılmışdır.
const user = {
name: 'Bob',
age: 25,
greet() {
return `Salam, ${this.name}!`;
}
};
const message = `${user.greet()} Sən ${user.age} yaşındasan.`;
console.log(message); // "Salam, Bob! Sən 25 yaşındasan."
3.3 Tagged Templates (Təğlər ilə Şablon Literalları)
Təğlər ilə şablon literalları şablon sətirlərini emal etmək üçün bir funksiya çağırmağa imkan verir. Bu, sətirlərlə əlavə manipulyasiyalar aparmağa imkan verir, məsələn, beynəlxalqlaşma, HTML-in təhlükəsiz daxil edilməsi və s.
Sintaksis:
function tag(strings, ...values) {
// sətir və dəyərlərin emalı
return nəticə;
}
const result = tag`Şablon sətiri ilə ${dəyişən}`;
Nümunə:
highlight() funksiyası sətirləri və dəyərləri emal edir, dəyərləri <span> HTML təğlərinə highlight sinfi ilə bükür.
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${values[i] || ''}`, '');
}
const name = 'Carol';
const hobby = 'rəsm çəkmək';
const message = highlight`Mənim adım ${name} və mən ${hobby} sevirəm.`;
console.log(message);
// "Mənim adım <span class="highlight">Carol</span> və mən <span class="highlight">rəsm çəkmək</span> sevirəm."
3.4 Dəyərlərin təhlükəsiz yerləşdirilməsi
Şablon literalları bəzi təhlükəsizlik problemlərinin, məsələn, XSS (cross-site scripting), qarşısını almağa kömək edir, dəyərlərin təhlükəsiz yerləşdirilməsi vasitəsilə. Bu, xüsusilə istifadəçi məlumatlarını HTML-ə yerləşdirərkən faydalıdır.
Nümunə:
safeHTML() funksiyası dəyərlərdə təhlükəli simvolları əvəz edir və XSS hücumlarının qarşısını alır.
function safeHTML(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${String(values[i]).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')}`, '');
}
const userInput = '<script>alert("XSS")</script>';
const message = safeHTML`İstifadəçi məlumatı: ${userInput}`;
console.log(message);
// "İstifadəçi məlumatı: <script>alert("XSS")</script>"
GO TO FULL VERSION