الگو رشته ها (بکتیکز) - Template Strings (backticks) در JS

الگو رشته ها، به وسیله بکتیکز ( ` ` ) ساخته می شوند.

الگو رشته ها در سال 2015 به JS اضافه و باعث منعطف تر شدن رشته ها شدند. 

let backticks = `این یک الگورشته است.`;

برخلاف کوتیشن تکی و دوتایی، الگو رشته ها دارای:

  1. قابلیت استفاده از کوتیشن در کوتیشن
  2. قابلیت ایجاد رشته چند خطی
  3. قابلیت افزودن عبارت های ریاضی و متغیر به رشته بدون استفاده از علامت +

نکته: معمولا دکمه بکتیکز، زیر دکمه Esc کیبورد قرار دارد.

کوتیشن در کوتیشن در JS

با کمک الگورشته می توان در رشته ها به راحتی از کوتیشن استفاده کرد. 

let single_qoute = `my name is 'mohammad reza' and ...`;
let double_qoute = `my name is "mohammad reza" and ...`;

رشته های چند خطی (Multiline Strings) در JS

با کمک الگورشته ها به راحتی می توان رشته‌های چند خطی ایجاد کرد.

let text =
`pnldev is a
good website
for learn
 and study
web knowledge`;

درون یابی در رشته ها (Interpolation) در JS

به کمک الگو رشته ها به راحتی می توان، متغیر و عبارات (expression) را در رشته درون یابی کرد.

این سینتکس عبارت است از:

${...}

let name = "Ehsan";
let family = "Eslami";
document.getElementById("demo").innerHTML = `Welcome ${name} ${family}!`;
let product_price = 1000;
let shipping_price = 200;
document.getElementById("demo").innerHTML = `قیمت: ${product_price + shipping_price} تومان`;
let langs = ["html", "css", "js", "php"];
let html = `<h2>${برنامه نویسی تحت وب}</h2>`;

html += `<ol>`;
for (const lang of langs) {
  html += `<li>${lang.toUpperCase()}</li>`;
}
html += `</ol>`;
document.getElementById("demo").innerHTML = html;

خلاصه درس

در این درس الگورشته (backticks) را بررسی کردیم، همچنین به:

  • کوتیشن در کوتیشن در رشته ها
  • رشته های چند خطی
  • و درون یابی در رشته ها پرداختیم.

توسعه دهندگان
احسان اسلامی