JavaScript Matn Shablonlari (String Templates)

Shablonli matnlar (String Templates yoki Template Literals) — bu JavaScript-da matnlar bilan ishlashning eng qulay va zamonaviy usulidir.

Sintaksis

Shablonli matnlar odatiy qo'shtirnoqlar ("" yoki '') o'rniga teskari tirnoqlar (back-ticks) (`) yordamida yaratiladi:

Misol

let text = `Salom Dunyo!`;

Matn ichida qo'shtirnoqlar

Shablonli matnlar ichida ham bir tirnoq, ham qo'sh tirnoqlarni hech qanday cheklovlarsiz ishlatish mumkin:

Misol

let text = `U ko'pincha "Johnny" deb chaqiriladi`;

Ko'p qatorli matnlar

Shablonli matnlar yordamida matnlarni bir necha qatorga bo'lib yozish juda oson. Buning uchun hech qanday maxsus belgi (masalan, \n) kerak emas:

Misol

let text =
`Tezkor
jigarrang tulki
dangasa itning
ustidan sakrab o'tdi`;

---

Interpolyatsiya (Interpolation)

Shablonli matnlar matn ichida o'zgaruvchilar va ifodalarni osongina joylashtirish (interpolyatsiya qilish) imkonini beradi.

Buning uchun ${...} sintaksisidan foydalaniladi.

O'zgaruvchilarni almashtirish (Variable Substitutions)

Misol

let firstName = "John";
let lastName = "Doe";

let text = `Xush kelibsiz ${firstName}, ${lastName}!`;

Ifodalarni almashtirish (Expression Substitution)

Siz ${...} ichida matematik amallar va boshqa ifodalarni ham bajarishingiz mumkin:

Misol

let narx = 10;
let QQS = 0.25;

let jami = `Jami: ${(narx * (1 + QQS)).toFixed(2)}`;

---

HTML Shablonlari

Shablonli matnlar HTML kodlarini yaratishda juda qo'l keladi, chunki ular o'zgaruvchilarni matn ichiga chiroyli tarzda joylashtirishga imkon beradi:

Misol

let header = "Matn Shablonlari";
let tags = ["template strings", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;

for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

---

Brauzerlar tomonidan qo'llab-quvvatlanishi

Shablonli matnlar ES6 (ES2015) xususiyati hisoblanadi. Ular 2017-yil iyunidan beri barcha zamonaviy brauzerlar (Chrome 51, Edge 15, Firefox 54, Safari 10, Opera 38) tomonidan to'liq qo'llab-quvvatlanadi.