ES6 template stringlar

Shablon stringlar

Shablon stringlar bir necha qatorga cho‘ziladigan va ichiga ifodalar joylangan stringlarni yozish imkonini beradi:

const name = "John";
const age = 30;
const message = "Hello, " + name + "!\n" + 
"You are " + age + " years old.";

const name = "John";
const age = 30;
const message = `Hello, ${name}!
You are ${age} years old.`;

Shablon stringlar tirnoq o‘rniga teskari tirnoqlardan (`) foydalanadi va quyidagilarni o‘z ichiga olishi mumkin:

• \nsiz bir nechta qator
• ${} ichidagi ifodalar
• Qochmasdan iqtiboslar

const html = `
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
`;

const x = `
  John:
    Hello, how are you?
  Jane:
    I'm fine, thanks!
`;

Ifodaning interpolatsiyasi

Shablon stringiga ${} ichida istalgan yaroqli JavaScript ifodasini kiritishingiz mumkin:

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

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

let price = 10;
let quantity = 5;

let total = `Total: ${price * quantity}`;

const items = ["apple", "banana", "orange"];
const list = `You have ${items.length} items:
${items.map(item => `- ${item}`).join('\n')}`;

const isAdmin = true;
const message = `Status: ${isAdmin ? 'Admin' : 'User'}`;

Belgilangan shablonlar

Natijani o‘zgartirish uchun shablon stringlarni funksiya (u tag deb ataladi) bilan ham ishlatishingiz mumkin.

Funksiya matn va ifoda(lar)ni argument sifatida qabul qiladi.

Quyidagi misolga qarang:

function highlight(strings, fname) {
  let x = fname.toUpperCase();
  return strings[0] + x + strings[1];
}

let name = "John";

let text = highlight`Hello ${name}, how are you?`;

Misol tushuntirildi

Funksiya nomi highlight , siz uni xohlaganingizcha nomlashingiz mumkin.

Birinchi argument iboralar orasidagi matnni massiv sifatida ushlab turadi. Massiv elementlari ifodaga bo‘linadi. Ushbu misolda strings[0] "Salom" ni va strings[1] "qalaysiz?" ni ushlab turadi.

Ikkinchi dalil iboralarni o‘z ichiga oladi. Ushbu misolda fname "Jon" ni o‘z ichiga oladi.

Funksiya ichida siz yakuniy stringni yaratish uchun argumentlardan foydalanishingiz va uni qaytarishingiz mumkin.

function highlight(strings, fname1, fname2) {
  let x = fname1.toUpperCase();
  let y = fname2.toUpperCase();
  return strings[0] + x + strings[1] + y + strings[2];
}

let name1 = "John";
let name2 = "Jane";

let text = highlight`Hello ${name1} and ${name2}, how are you?`;

function highlight(strings, ...fname) {
  let x = fname[0].toUpperCase();
  let y = fname[1].toUpperCase();
  return strings[0] + x + strings[1] + y + strings[2];
}

let name1 = "John";
let name2 = "Jane";

let text = highlight`Hello ${name1} and ${name2}, how are you?`;