JavaScript template literals: ${} bilan matnga qiymat joylash va ko'p qatorli satr

Qisqacha: Template literal — backtick (`) ichida yoziladigan satr. Uning ichiga ${...} qo'yib, istalgan o'zgaruvchi yoki ifodani joylash mumkin: `Salom, ${ism}!`. Bunday satr bir necha qatorga ham bemalol yoziladi. U "..." + ism + "..." ko'rinishidagi uzun birlashtirishlarning o'rnini bosadi.

Bu darsda

• Template literal yozib, ichiga ${} bilan qiymat joylay olasiz.
• ${} ichida hisob, ternary va satr metodlarini ishlata olasiz — va u yerga nima yozib bo'lmasligini bilasiz.
• Ko'p qatorli matn yasay olasiz va ortiqcha bo'sh joy tuzog'ini taniysiz.
• Template literal bilan HTML qator yasay olasiz va foydalanuvchi matnini HTML'ga qo'shish xavfini tushuntira olasiz.
• Template literal bilan bog'liq 5 ta ko'p uchraydigan xatoni taniysiz.

Oldin bilishingiz kerak: String asoslari, Ternary operatori, Turlarni aniq o'zgartirish.

1. Nega bu kerak?

Oldingi darsda satrlarni yozish, indeks va length bilan tanishdik. Endi satrlarni yig'ish haqida gaplashamiz.

Tasavvur qiling: yetkazib berish xizmati uchun Telegram bot yozyapsiz. Mijozga shunday xabar borishi kerak:

Jasur, 1024-buyurtma yo'lda. Jami: 45000 so'm.

Ism, buyurtma raqami va summa har safar boshqacha. Hozircha bilgan yo'lingiz — + bilan yopishtirish:

const ism = "Jasur";
const raqam = 1024;
const jami = 45000;

const xabar = ism + "," + raqam + "-buyurtma yo'lda. Jami:" +
  jami + " so'm.";
console.log(xabar);

Konsolda:

Jasur,1024-buyurtma yo'lda. Jami:45000 so'm.

Xatoni ko'rdingizmi? Vergul va "Jami:" dan keyin bo'sh joy tushib qoldi. Qaysi tirnoq qayerda ochilib yopilganini kuzatish qiyin. Bo'sh joyni unutish esa undan ham oson.

Template literal bilan xuddi shu xabar:

const ism = "Jasur";
const raqam = 1024;
const jami = 45000;

const xabar = `${ism}, ${raqam}-buyurtma yo'lda. Jami: ${jami} so'm.`;
console.log(xabar);

Konsolda:

Jasur, 1024-buyurtma yo'lda. Jami: 45000 so'm.

Matn qanday ko'rinsa, kodda ham shunday yozilgan. O'zgaradigan joylar esa ${...} bilan belgilangan.

2. Template literal nima?

2.1 Backtick bilan yoziladigan satr

Template literal (shablon satr) — backtick (`) belgisi ichida yoziladigan satr. Backtick klaviaturada 1 raqamining chap tomonida, ~ bilan bir tugmada turadi.

Hayotdan o'xshatish: davlat xizmatlari markazidagi ariza blanki. "Men, ______, ______ shahrida yashayman" — matnning asosiy qismi tayyor. Siz faqat bo'sh joylarni to'ldirasiz. Template literal ham xuddi shunday: matn tayyor, ${...} — to'ldiriladigan bo'sh joy.

Ichida hech qanday ${} bo'lmasa, backtick'li satr oddiy satrdan farq qilmaydi:

const a = `Toshkent`;
const b = "Toshkent";

console.log(typeof a); // string
console.log(a === b); // true

Alohida "template" turi yo'q. Natija — oddiy satr, oldingi darsdagi hamma narsa unga ham tegishli: length, indeks, o'zgarmaslik.

Backtick'ning yana bir qulayligi: uning ichida apostrof ham, qo'shtirnoq ham bemalol turadi.

console.log(`U "O'zbekiston" gazetasini o'qidi`);

Konsolda:

U "O'zbekiston" gazetasini o'qidi

2.2 Interpolatsiya: ${}

Interpolatsiya (interpolation) — satr ichiga qiymat joylash. Template literal'da buning uchun ${ va } orasiga qiymat yoziladi. JavaScript satrni yasayotganda ${...} ni o'sha qiymat bilan almashtiradi:

const ism = "Malika";
const shahar = "Namangan";

console.log(`Salom, ${ism}!`); // Salom, Malika!
console.log(`${ism} ${shahar}dan`); // Malika Namangandan

Bitta satrda ${} lar soni cheklanmagan. Ular matnning boshida, o'rtasida, oxirida — istalgan joyda tura oladi.

Diqqat: ${} faqat backtick ichida ishlaydi. Oddiy qo'shtirnoq ichida u shunchaki belgilar bo'lib qoladi:

js

const ism = "Malika";
console.log("Salom, ${ism}!"); // Salom, ${ism}!

O'zingiz to'ldiring: const son = 7; bo'lsa, `Sizda ${son} ta xabar` natijasi [:Sizda 7 ta xabar], "Sizda ${son} ta xabar" niki esa [:Sizda ${son} ta xabar].

Tekshirib ko'ring: const taom = "manti"; bo'lsa, konsolda nima chiqadi?

js

console.log(`Bugun ${taom}, ertaga ham ${taom}`);

3. ${} ichida ifodalar

3.1 Istalgan ifoda

${} ichiga faqat o'zgaruvchi emas, istalgan ifoda yozish mumkin. Sintaksis asoslari darsini eslang: ifoda — qiymat beradigan kod bo'lagi. JavaScript avval ifodani hisoblaydi, keyin natijani satrga qo'yadi.

Hisob-kitob:

const narx = 12000;
const soni = 3;

console.log(`Jami: ${narx * soni} so'm`); // Jami: 36000 so'm
console.log(`Qaytim: ${50000 - narx * soni}`); // Qaytim: 14000

Ternary — ikki variantdan birini tanlash:

const soni = 12;

console.log(`Narx turi: ${soni >= 10 ? "ulgurji" : "chakana"}`);

Konsolda:

Narx turi: ulgurji

Zaxira qiymat — ?? va || (?? darsi):

const ism = null;

console.log(`Xush kelibsiz, ${ism ?? "mehmon"}!`);

Konsolda:

Xush kelibsiz, mehmon!

Satr xususiyatlari va metodlari — oldingi darsdagi length, at() va toUpperCase():

const ism = "Malika";

console.log(`${ism.toUpperCase()} — ${ism.length} harf`);
console.log(`Bosh harf: ${ism[0]}, oxirgisi: ${ism.at(-1)}`);

Konsolda:

MALIKA — 6 harf
Bosh harf: M, oxirgisi: a

Keyinroq funksiyalarni o'rganganingizda, ularni ham ${} ichida chaqira olasiz — funksiya chaqiruvi ham ifoda.

3.2 Ifoda — ha, ko'rsatma — yo'q

${} ichida qiymat bo'lishi kerak. Shuning uchun u yerga ko'rsatma (statement) yozib bo'lmaydi — masalan, o'zgaruvchi e'lon qilish:

const matn = `Natija: ${const b = 5}`;

SyntaxError: Unexpected token 'const'

Tarjimasi: "Kutilmagan belgi: const". JavaScript ${ dan keyin qiymat kutgan edi, const esa qiymat bermaydi — u ko'rsatma. Yechim: o'zgaruvchini oldinroq e'lon qiling, ${} ga esa faqat uning nomini yozing.

Maslahat: ${} ichiga uzun hisob yozish mumkin, lekin o'qish qiyinlashadi. Qoida: ifoda qisqa bo'lsa — to'g'ridan-to'g'ri ${} ga, uzun bo'lsa — avval nomli o'zgaruvchiga. ${jami} ni o'qish ${narx * soni - narx * soni * chegirma / 100} ni o'qishdan ancha oson.

3.3 Qiymat satrga qanday aylanadi?

${} ichidagi natija satrga String() qoidasi bo'yicha aylanadi. Son, boolean, null va undefined kutilgandek chiqadi:

console.log(`${5} ${true} ${null} ${undefined}`);

Konsolda:

5 true null undefined

Massiv va obyekt esa kutilmagan ko'rinishda chiqadi (ular bilan shu qismning oxirida — massiv va obyekt darslarida to'liq ishlaymiz):

const ballar = [5, 4, 5];
const talaba = { ism: "Ali" };

console.log(`Ballar: ${ballar}`); // Ballar: 5,4,5
console.log(`Talaba: ${talaba}`); // Talaba: [object Object]

[object Object] — obyektning satr ko'rinishi. Konsolda buni ko'rsangiz, demak ${} ga butun obyektni berib yuborgansiz. Kerakli xususiyatni ko'rsating: ${talaba.ism}.

Tekshirib ko'ring: const n = 4; bo'lsa, `${n} ${n % 2 === 0 ? "juft" : "toq"}` nima beradi?

4. Ko'p qatorli matn

4.1 Enter bosib yozish

Oddiy tirnoqli satr bitta qatorda tugashi shart edi. Ko'p qatorli matn uchun \n yozardik. Backtick ichida esa shunchaki Enter bosasiz — yangi qator satrga kiradi:

const mijoz = "Dilnoza";
const summa = 87000;

const sms = `Hurmatli ${mijoz}!
To'lovingiz qabul qilindi.
Summa: ${summa} so'm`;

console.log(sms);

Konsolda:

Hurmatli Dilnoza!
To'lovingiz qabul qilindi.
Summa: 87000 so'm

Xuddi shu natija oddiy satrda "Hurmatli " + mijoz + "!\nTo'lovingiz..." bo'lardi. Qaysi biri o'qishga osonroq — o'zingiz ko'rib turibsiz.

4.2 Tuzoq: bo'sh joylar ham matnga kiradi

Backtick ichidagi hamma narsa satrga kiradi — qator boshidagi bo'sh joylar ham. Kodni chiroyli tekislash uchun qo'shilgan probellar matnni buzishi mumkin:

const chek = `Chek:
    Non — 4000
    Choy — 3000`;

console.log(chek);

Konsolda:

Chek:
    Non — 4000
    Choy — 3000

Har qatordagi 4 ta probel ham satr ichida — konsolda ular ko'rinib turibdi. chek.length ni tekshirsangiz, 36 chiqadi: matnning o'zi 28 ta belgi, qolgan 8 tasi — o'sha probellar. Agar shu probellar kerak bo'lmasa, qatorlarni chap chetdan boshlang. Yoki \n ishlating.

Bu ayniqsa SMS va xabarlarda muhim: ortiqcha probellar ham belgi hisoblanadi va length ni oshiradi.

4.3 Backtick ichida maxsus belgilar

Backtick ichida ham \n, \t kabi escape ketma-ketliklar ishlaydi. Faqat ikki belgi uchun alohida qoida kerak:

• backtick'ning o'zi — \` bilan;
• ${ ning o'zi (joylash emas, oddiy matn sifatida) — \${ bilan.

console.log(`Backtick belgisi: \``);
console.log(`Kodda \${narx} deb yoziladi`);

Konsolda:

Backtick belgisi: `
Kodda ${narx} deb yoziladi

Ikkinchi qatorda narx degan o'zgaruvchi yo'q — va xato ham chiqmadi. \$ tufayli JavaScript ${narx} ni joylash emas, oddiy matn deb o'qidi.

5. HTML qator yasash

5.1 Ro'yxat elementi

Siz HTML'ni bilasiz. Template literal HTML qismlarini matn sifatida yasash uchun juda qulay:

const taom = "Lag'mon";
const narx = 28000;

const qator = `<li>${taom} — ${narx} so'm</li>`;
console.log(qator);

Konsolda:

<li>Lag'mon — 28000 so'm</li>

Ko'p qatorli HTML ham xuddi shunday:

const nomi = "Samsung A15";
const narx = 2100000;
const bor = true;

const kartochka = `<div class="mahsulot">
  <h3>${nomi}</h3>
  <p>${narx} so'm</p>
  <span>${bor ? "Sotuvda bor" : "Tugagan"}</span>
</div>`;

console.log(kartochka);

Konsolda:

<div class="mahsulot">
  <h3>Samsung A15</h3>
  <p>2100000 so'm</p>
  <span>Sotuvda bor</span>
</div>

HTML'dagi qo'shtirnoq (class="mahsulot") backtick ichida muammo tug'dirmaydi. Hozircha bu shunchaki satr. Uni sahifaga qanday qo'yishni kontentni o'zgartirish darsida o'rganamiz.

6. Hujumchi nigohi

HTML yasash qulay, lekin bu yerda xavfli teshik bor. ${} qiymatni qanday bo'lsa, shunday qo'yadi. U ichidagi < va > belgilarini hech qanday tekshirmaydi.

Tasavvur qiling: saytingizda izoh qoldirish mumkin. Hujumchi ism o'rniga HTML kod yozadi:

// ❌ Foydalanuvchi yozgan matn to'g'ridan-to'g'ri HTML'ga
const ism = `<img src="x" onerror="alert('Buzildi')">`;

const html = `<p>Izoh muallifi: ${ism}</p>`;
console.log(html);

Konsolda:

<p>Izoh muallifi: <img src="x" onerror="alert('Buzildi')"></p>

Bu satr sahifaga HTML sifatida qo'yilsa, brauzer "rasm"ni yuklay olmaydi va onerror ichidagi kodni ishga tushiradi. alert o'rnida esa boshqa foydalanuvchilarning akkauntini o'g'irlaydigan kod turishi mumkin. Bu hujum XSS deyiladi — HTML darajasidagi xavfsizlik darsida uning g'oyasi bilan tanishgansiz.

Himoya qoidasi: foydalanuvchidan kelgan matnni hech qachon tekshirmasdan HTML satriga joylamang. To'g'ri yo'llar:

• matnni HTML sifatida emas, oddiy matn sifatida qo'yish (textContent — W-04 darsida);
• <, > kabi belgilarni xavfsiz ko'rinishga aylantirish (escaping);
• React kabi vositalar — ular buni avtomatik qiladi (kursda alohida qism bor).

Xuddi shu xato backend'da ham bor: SQL so'rovni template literal bilan yig'ish (`... WHERE ism = '${ism}'`) — SQL injection deb ataladigan hujum eshigi. To'g'ri yo'lni parametrli so'rovlar darsida ko'ramiz.

Maslahat: Template literal'ning yana bir kuchli shakli bor — tagged template: backtick oldiga funksiya nomi yoziladi (html`...`) va u ${} qiymatlarini, masalan, avtomatik xavfsiz qilishi mumkin. Buni Tagged template literals darsida o'rganamiz.

7. Ko'p uchraydigan xatolar

7.1 Backtick o'rniga oddiy tirnoq

const ism = "Sardor";
console.log("Salom, ${ism}!"); // Salom, ${ism}!

Xato chiqmaydi, lekin ism o'rniga ${ism} degan matn chiqadi. Klaviaturada ' va ` bir-biriga o'xshaydi — tirnoq turini tekshiring. VS Code'da backtick ichidagi ${ism} boshqa rangga bo'yaladi, oddiy tirnoq ichida esa matn rangida qoladi.

7.2 $ va { orasida bo'sh joy

const ism = "Sardor";
console.log(`Salom, $ {ism}!`); // Salom, $ {ism}!

${ — bitta birikma, orasida probel bo'lmasligi kerak. Aks holda $ va {ism} oddiy belgilar bo'lib qoladi.

7.3 } ni yopmaslik

const ism = "Sardor";
console.log(`Salom, ${ism!`);

SyntaxError: Missing } in template expression

Tarjimasi: "Shablon ifodasida } yetishmayapti". JavaScript ${ dan keyin ifodani o'qidi va yopuvchi } ni kutdi, lekin uning o'rniga backtick keldi. Har bir ${ ning } si borligini tekshiring.

Yopuvchi backtick'ning o'zini unutsangiz, boshqa xabar chiqadi: SyntaxError: Unexpected end of input — "kod kutilmaganda tugab qoldi". JavaScript satr oxirini qidirib, fayl oxirigacha borib qoldi.

7.4 Nomda xato

const ism = "Sardor";
console.log(`Salom, ${ismi}!`);

ReferenceError: ismi is not defined

Tarjimasi: "ismi aniqlanmagan". ${} ichidagi nom oddiy koddagi nom bilan bir xil qoidaga bo'ysunadi: bunday o'zgaruvchi yo'q bo'lsa — xato. Nomni harfma-harf solishtiring.

7.5 Matnda undefined yoki [object Object] chiqishi

"Salom, undefined!" yoki "Talaba: [object Object]" ko'rsangiz, ${} ga noto'g'ri qiymat tushgan:

• undefined — o'zgaruvchiga qiymat berilmagan. Zaxira qo'ying: ${ism ?? "mehmon"}.
• [object Object] — butun obyekt joylangan. Kerakli xususiyatni oling: ${talaba.ism}.

8. Mashqlar

1-mashq (oson): Taksi xabari

Uchta o'zgaruvchi e'lon qiling: haydovchi = "Botir", mashina = "oq Cobalt", daqiqa = 4. Template literal yordamida konsolga chiqaring:

Botir 4 daqiqada yetib keladi.
Mashina: oq Cobalt.

Har qator uchun bitta console.log yozsangiz bo'ladi.

const haydovchi = "Botir";
const mashina = "oq Cobalt";
const daqiqa = 4;

console.log(`${haydovchi} ${daqiqa} daqiqada yetib keladi.`);
console.log(`Mashina: ${mashina}.`);

Botir 4 daqiqada yetib keladi.
Mashina: oq Cobalt.

2-mashq (o'rta): Chegirmali chek

mahsulot = "Qovun", narx = 15000, kg = 4 berilgan. Bitta ko'p qatorli template literal yasang va chiqaring:

Mahsulot: Qovun
Og'irligi: 4 kg
Jami: 60000 so'm
Chegirma: bor

Qoida: 3 kg va undan ko'p olinsa, chegirma "bor", aks holda "yo'q". Ishora: jamini ${} ichida hisoblang, chegirma uchun ternary ishlating (ternary darsi).

const mahsulot = "Qovun";
const narx = 15000;
const kg = 4;

const chek = `Mahsulot: ${mahsulot}
Og'irligi: ${kg} kg
Jami: ${narx * kg} so'm
Chegirma: ${kg >= 3 ? "bor" : "yo'q"}`;

console.log(chek);

Mahsulot: Qovun
Og'irligi: 4 kg
Jami: 60000 so'm
Chegirma: bor

3-mashq (qiyin): Qayta yozish va HTML

a) Quyidagi kod + bilan yozilgan. Uni template literal bilan qayta yozing — natija aynan bir xil bo'lsin:

const ism = "Kamola";
const kurs = "JavaScript";
const foiz = 75;

const matn = "Talaba: " + ism + " | Kurs: " + kurs +
  " | " + foiz + "%";
console.log(matn); // Talaba: Kamola | Kurs: JavaScript | 75%

b) Xuddi shu uchta o'zgaruvchidan foydalanib, quyidagi HTML qatorni yasang:

<li>KAMOLA — JavaScript (75%, yaxshi)</li>

Ism katta harf bilan chiqsin (toUpperCase()). Oxiridagi baho: 70 va undan yuqori bo'lsa "yaxshi", aks holda "harakat qiling".

const ism = "Kamola";
const kurs = "JavaScript";
const foiz = 75;

console.log(`Talaba: ${ism} | Kurs: ${kurs} | ${foiz}%`);

const baho = foiz >= 70 ? "yaxshi" : "harakat qiling";
const katta = ism.toUpperCase();
const li = `<li>${katta} — ${kurs} (${foiz}%, ${baho})</li>`;
console.log(li);

Talaba: Kamola | Kurs: JavaScript | 75%
<li>KAMOLA — JavaScript (75%, yaxshi)</li>

9. Real ishda

• Telegram botlar va bildirishnomalar. "Buyurtmangiz #1024 yo'lda" kabi har bir avtomatik xabar template literal bilan yig'iladi.
• Manzil (URL) yasash. Serverdan ma'lumot so'rashda: `/api/buyurtmalar/${id}`. Bu bilan fetch asoslari darsidan boshlab ko'p ishlaysiz.
• Loglar. `[${vaqt}] ${foydalanuvchi} tizimga kirdi` — server jurnallari shunday yoziladi.
• React va CSS klasslar. React'da (kursda alohida qism bor) klass nomlari ko'pincha shunday yig'iladi: `tugma ${faol ? "faol" : ""}`.
• Tagged template'lar. CSS-in-JS kutubxonalari, GraphQL so'rovlari va xavfsiz SQL kutubxonalari backtick oldidagi "teg" bilan ishlaydi — tagged templates darsida.
• Intervyu. "Template literal va oddiy satr farqi nima?" — javob: ${} bilan interpolatsiya, ko'p qatorli yozish va tagged template'lar.

Xulosa

• Template literal — backtick (`) ichidagi satr. Natija — oddiy string.
• ${...} ichiga istalgan ifoda yoziladi: o'zgaruvchi, hisob, ternary, ??, metod chaqiruvi. Ko'rsatma (const) — yo'q.
• ${} faqat backtick ichida ishlaydi; oddiy tirnoq ichida u oddiy matn.
• Enter bilan ko'p qatorli matn yoziladi — lekin qator boshidagi probellar ham matnga kiradi.
• Qiymat String() qoidasi bilan satrga aylanadi: obyekt [object Object] bo'lib chiqadi.
• Foydalanuvchi matnini tekshirmasdan HTML yoki SQL satriga qo'ymang — bu XSS va SQL injection eshigi.

Keyingi dars: Matn ichida qidirish — satrda biror so'z bor-yo'qligini va u qayerda turganini aniqlaydigan metodlarni o'rganamiz.