آموزش برنامه نویسی

Template Literals

Template Literals یکی از ویژگی های جدید در جاوااسکریپت هست که در نسخه ES6 معرفی شد. این ویژگی کار با رشته ها را راحت تر می کند. قبل از ES6، برای ایجاد رشته از علامت های تک کوتیشن (”) و دابل کوتیشن (“”) استفاده می شد. به مثال زیر توجه کنید:

let str = "This is a string";

let str = 'This is a string';

اما در ES6 علاوه بر علامت های بالا، می توانید از علامت Backtick که دکمه آن در بالای دکمه Tab کیبورد قرار دارد، هم می توانید استفاده کنید:

let str = `This is a template literal`;

همانطور که در درس های قبل ذکر شد، اگر در داخل رشته ای لازم باشد که یکی از علامت های ‘ یا ” را نیز چاپ کنیم باید از علامت \ قبل از آنها استفاده کنیم. به مثال های زیر توجه کنید:

console.log("The programmer\'s heaven.");

یا

console.log("I said, \"Motivate yourself!\".");

اما با استفاده از علامت Backtick یا ویژگی Template Literals لازم نیست از علامت \ استفاده شود:

console.log(`The programmer's heaven.`);

console.log(`I said, "Motivate yourself!".`);

همانطور که مشاهده می کنید، استفاده از Backtick کد را خواناتر و تمیزتر می کند. یکی دیگر از مزایای استفاده از Backtick ایجاد رشته های چند خطی، به راحتی و فقط با زدن دکمه Enter است. همانطور که می دانید برای ایجاد رشته های چند خطی از علامت n\ استفاده می شود. به مثال زیر توجه کنید:

console.log("Javascript is a great programming language and\n" +
"it allows you to create different\n" + 
"kinds of applications.");

اما با استفاده از Backtick می توانید همین رشته بالا را فقط با زدن چند Enter ساده ایجاد کنید:

console.log(`Javascript is a great programming language and
it allows you to create different
kinds of applications.`);

یکی دیگر از بهترین مزایای Template Literals، استفاده از متغیرها در داخل رشته ها می باشد. همانطور که احتمالا در درس های قبل متوجه شده اید برای نمایش مقدار یک متغیر در داخل یک رشته باید نام متغیر را با استفاده از علامت + به رشته متصل کنیم. به مثال زیر توجه کنید :

let firstName = 'John',
    lastName  = 'Doe';

let greeting = "Hello" + " " + firstName + " " + lastName;
console.log(greeting);

Hello John Doe

حال کد بالا را با استفاده از Template Literals پیاده سازی می کنیم:

let firstName = 'John',
    lastName  = 'Doe';

let greeting = `Hello ${firstName}, ${lastName}`;
console.log(greeting);

Hello John Doe

همانطور که مشاهده می کنید برای استفاده از مقدار متغیرها، کافیست نام متغیر را در داخل ساختار {}$ بنویسیم.