Chapter 17 — Template Literals (Chuqur)

Chapter 9'da Template Literal bilan yuzaki tanishgan edik. Bu bobda uning barcha imkoniyatlarini — ko'p qatorli matn, ifodalar bilan ishlash va Tagged Templatesni chuqur o'rganamiz.

---

17.1 Qisqa takror — Template Literal nima?

Simple Explanation

Template Literal — backtick (`) bilan yoziladigan, ichiga variable va ifodalarni to'g'ridan-to'g'ri joylashtirish imkonini beruvchi string turi.

Example

script.js
JavaScriptNusxalash
01let name = "Ali";
02let age = 25;
03 
04console.log(`Salom, men ${name}man va ${age} yoshdaman`);

17.2 Ifodalar bilan ishlash

Simple Explanation

${} ichiga nafaqat variable, balki istalgan JavaScript ifodasini yozish mumkin — matematik amal, function chaqiruvi, ternary operator va h.k.

Example

script.js
JavaScriptNusxalash
01let price = 100;
02let quantity = 3;
03 
04console.log(`Jami: ${price * quantity} so'm`);
05// "Jami: 300 so'm"

Function chaqiruvi bilan

script.js
JavaScriptNusxalash
01function getDiscount(price) {
02    return price * 0.9;
03}
04 
05let price = 500;
06 
07console.log(`Chegirmali narx: ${getDiscount(price)} so'm`);
08// "Chegirmali narx: 450 so'm"

Ternary operator bilan

script.js
JavaScriptNusxalash
01let age = 20;
02 
03console.log(`Siz ${age >= 18 ? "kattasiz" : "kichiksiz"}`);
04// "Siz kattasiz"

💡 Key Idea
${} ichida yozilgan har qanday kod avval hisoblanadi (evaluate qilinadi), keyin uning natijasi string ichiga qo'yiladi.

17.3 Ko'p qatorli matn (Multiline Strings)

Simple Explanation

Oddiy string'larda ("...", '...') yangi qatorga o'tish uchun maxsus belgi (\n) kerak bo'lardi. Template literal esa buni to'g'ridan-to'g'ri qo'llab-quvvatlaydi.

Solishtirish

script.js
JavaScriptNusxalash
01// Oddiy string bilan (noqulay)
02let text1 = "Birinchi qator\nIkkinchi qator\nUchinchi qator";
03 
04// Template literal bilan (qulay)
05let text2 = `Birinchi qator
06Ikkinchi qator
07Uchinchi qator`;

Amaliy misol — HTML shablon yaratish

script.js
JavaScriptNusxalash
01let user = { name: "Nodira", age: 22, city: "Farg'ona" };
02 
03let html = `
04    <div class="card">
05        <h2>${user.name}</h2>
06        <p>Yosh: ${user.age}</p>
07        <p>Shahar: ${user.city}</p>
08    </div>
09`;
10 
11console.log(html);

Explanation

Bu naqsh — veb-dasturlashda HTML shablonlarni JavaScript orqali dinamik yaratishda juda ko'p ishlatiladi.

17.4 Nested Template Literals

Simple Explanation

Template literal ichida yana template literal ishlatish mumkin — bu murakkab shartli mantiqni ifodalashda foydali.

Example

script.js
JavaScriptNusxalash
01let cart = [{ name: "Laptop", price: 1200 }, { name: "Mouse", price: 20 }];
02 
03let receipt = `
04    Xarid ro'yxati:
05    ${cart.map(item => `- ${item.name}: ${item.price} so'm`).join("\n    ")}
06`;
07 
08console.log(receipt);

Explanation

Ichki template literal (- ${item.name}: ${item.price} so'm) — har bir mahsulot uchun qator hosil qiladi, tashqi template literal esa ularni yig'ib, umumiy chekni tuzadi.

🔗 Connection
Bu misolda Chapter 14'da o'rgangan map() va Chapter 9'dagi join() birgalikda ishlatilmoqda — bu boblar orasidagi bog'liqlikni ko'rsatadi.

17.5 ⚠️ Qiyin mavzu: Tagged Templates

Simple Explanation

Tagged Template — template literal oldiga function nomini yozib, uni "belgilash" orqali, string qanday yig'ilishini to'liq nazorat qilish imkoniyati.

Nega bu mavzu qiyin?

Chunki bu — kamdan-kam ishlatiladigan, "sehrli" ko'rinadigan sintaksis, va uning ichki ishlash mexanizmini tushunish uchun function qanday chaqirilishini alohida ko'rish kerak.

Example — Eng oddiy holat

script.js
JavaScriptNusxalash
01function myTag(strings, ...values) {
02    console.log(strings); // string qismlar array'i
03    console.log(values);  // ${} ichidagi qiymatlar array'i
04}
05 
06let name = "Ali";
07let age = 25;
08 
09myTag`Salom, men ${name}man va ${age} yoshdaman`;

Natija:

code.text
TEXTNusxalash
01strings = ["Salom, men ", "man va ", " yoshdaman"]
02values  = ["Ali", 25]

Nima uchun bunday bo'ladi? (Technical Explanation)

Tagged template chaqirilganda, JavaScript template literal'ni ikkiga bo'lib beradi:

1. strings — ${}lar orasidagi oddiy matn qismlari (array shaklida).
2. values — ${} ichidagi hisoblangan qiymatlar (alohida argumentlar sifatida, ...values orqali yig'iladi).

Diagram

code.text
TEXTNusxalash
01`Salom, men ${name}man va ${age} yoshdaman`
02        │           │            │
03     strings[0]  strings[1]  strings[2]
04                values[0]   values[1]
05                 (name)      (age)

Amaliy misol — Xavfsiz HTML yaratish (XSS himoyasi)

script.js
JavaScriptNusxalash
01function safeHTML(strings, ...values) {
02    let result = "";
03    strings.forEach((str, i) => {
04        result += str;
05        if (values[i] !== undefined) {
06            // Har bir qiymatni "tozalab" qo'shish
07            let safeValue = String(values[i])
08                .replace(/</g, "&lt;")
09                .replace(/>/g, "&gt;");
10            result += safeValue;
11        }
12    });
13    return result;
14}
15 
16let userInput = "<script>alert('hack')</script>";
17 
18console.log(safeHTML`Foydalanuvchi izohi: ${userInput}`);
19// "Foydalanuvchi izohi: &lt;script&gt;alert('hack')&lt;/script&gt;"

Explanation

Bu misol Tagged Template'ning haqiqiy foydasini ko'rsatadi: foydalanuvchidan kelgan xavfli HTML kodni avtomatik "tozalab", xavfsiz stringga aylantiradi. Bu — veb-xavfsizlikda XSS (Cross-Site Scripting) hujumlaridan himoyalanishning bir usuli.

🔥 Important
Tagged Template'lar kamdan-kam to'g'ridan-to'g'ri o'zingiz yozadigan narsa, lekin ular ko'plab mashhur kutubxonalarda (masalan, styled-components — React uchun CSS yozish kutubxonasi) ichki mexanizm sifatida ishlatiladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Ikkita variable (firstName, lastName) yordamida template literal orqali to'liq ismni chiqaring.
Required Concepts:

• Template literals
  Hint:
  ${firstName} ${lastName} dan foydalaning.

---

🟡 Exercise 2 — Medium

Task:
Berilgan mahsulotlar array'idan (name, price propertylari bilan) template literal va map()/join() yordamida ro'yxat ko'rinishidagi matn hosil qiling — har bir mahsulot alohida qatorda bo'lsin.
Required Concepts:

• Template literals
• map(), join()
  Hint:
  Chapter 17.4'dagi "receipt" misoliga o'xshab yozing.

---

🔴 Exercise 3 — Hard

Task:
Oddiy Tagged Template function yozing — u ${} ichidagi barcha son qiymatlarni qalin (masalan, **qiymat** formatida) qilib ko'rsatsin, string qiymatlarni esa o'zgarishsiz qoldirsin.
Required Concepts:

• Tagged templates
• typeof
  Hint:
  valuesni aylanib chiqib, typeof value === "number" bo'lsa, uni **${value}** shaklida formatlang.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01function tag(strings, ...values) {
02    return strings.length;
03}
04 
05let result = tag`A${1}B${2}C`;
06 
07console.log(result);

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> 3

Why?
Template A${1}B${2}C — 3 ta matn qismidan iborat: "A", "B", "C". ${} ichidagi qiymatlar (1, 2) alohida values array'iga tushadi va strings array'iga kirmaydi. Umuman olganda, strings.length har doim values.length + 1ga teng bo'ladi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01let name = "Ali";
02let age = 25;
03 
04console.log("Salom, men ${name}man va ${age} yoshdaman");

Your Task:

• Kod nima chiqarishini bashorat qiling.
• Nima uchun ${} ishlamayotganini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: String oddiy qo'shtirnoq ("...") bilan yozilgan, backtick (`...`) bilan emas. ${} sintaksisi faqat backtick ichida ishlaydi.

Yechim:

script.js
JavaScriptNusxalash
01console.log(`Salom, men ${name}man va ${age} yoshdaman`);

</details>

📌 Chapter Summary

• ${} ichiga istalgan JavaScript ifodasi yozilishi mumkin.
• Template literal ko'p qatorli matnni to'g'ridan-to'g'ri qo'llab-quvvatlaydi.
• Nested template literal'lar murakkab shablonlar yaratishga imkon beradi.
• Tagged Template — string qanday yig'ilishini to'liq nazorat qilish imkoniyati.

🎯 Key Takeaways

• Template literal faqat backtick (`) bilan ishlaydi, oddiy qo'shtirnoqlar bilan emas.
• ${} ichida function chaqirish, matematik amal, ternary — barchasi mumkin.
• HTML shablon yaratishda template literal juda qulay.
• Tagged Template — strings va valuesni alohida-alohida qabul qiladi.
• Tagged Template orqali foydalanuvchi kiritgan ma'lumotni xavfsiz formatga keltirish mumkin.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01let name = "Ali";
02 
03`Oddiy: ${name}`;               // ifoda bilan
04`Ko'p qatorli
05matn`;                          // multiline
06 
07function tag(strings, ...values) {
08    return strings.raw.join("");
09}
10 
11tag`Salom ${name}!`;            // tagged template

---