رشته های قالبی (String Templates)
رشته قالبی یا Template String نوعی رشته است. این رشته با بک تیک (`) نوشته می شود. بنابراین نوشتن نقل قول ها و چندخطی ها راحت می شود. همچنین می توانی متغیرها و عبارت ها را مستقیم داخل رشته بگذاری.
سینتکس بک تیک
به جای کوتیشن تکی یا دوتایی، از بک تیک استفاده کن.
let text = `Hello World!`;
نقل قول داخل رشته
داخل Template String می توانی هم کوتیشن تکی و هم دوتایی بگذاری.
let text = `He's often called "Johnny"`;
رشته چندخطی
Template String به صورت پیش فرض چندخطی را پشتیبانی می کند.
let text = `The quick\nbrown fox\njumps over\nthe lazy dog`;
جای گذاری متغیرها (Interpolation)
متغیر (Variable) یعنی ظرفی برای نگهداری مقدار. با ${'{'}...{'}'} مقدار را داخل رشته می گذاری.
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
جای گذاری عبارت ها
عبارت (Expression) یعنی محاسبه ای که یک نتیجه می دهد. می توانی همان جا حساب کنی.
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
ساخت HTML با Template
می توانی رشته HTML را ساده بسازی و حلقه بزنی.
let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
گام های تمرین
- یک Template ساده با نام خودت بساز.
- یک Template چندخطی درباره روزت بنویس.
- قیمت و مالیات را حساب کن و چاپ کن.
نکته: برای مرور پایه ها به رشته ها (Strings) سر بزن. همچنین ادامه مسیر را در متدهای رشته ببین.
جمع بندی سریع
- Template String با بک تیک نوشته می شود.
- کوتیشن ها داخلش آزاد هستند.
- چندخطی را مستقیم پشتیبانی می کند.
- متغیر و عبارت را جای گذاری می کند.
- برای ساخت HTML خیلی خواناست.