Template Literals در جاوا اسکریپت


template literals در جاوا اسکریپت به شما اجازه میدهد تا با string template راحت تر کار کنید.تا قبل از ES6 شما باید از single quotes (‘) یا double quotes (“) برای wrap کردن یک string literal استفاده می کردید و strings ها عملکرد بسیار محدودی داشتند.برای حل مشکلات پیچیده تر ،ES6 template literals یک syntax جدید که به شما امکان می دهد با رشته ها(strings) به روشی ایمن تر و تمیزتر کار کنید،فراهم کرد.
1 |
let simple = `This is a template literal`; |
با این termplate جدید شما ویژگی های زیر را در اختیار خواهید داشت:
- یک stringچند خطی: string ای که می تواند چندین خط را شامل شود.
- می توانید بخشی از string را تغییر و به جای آن از متغیرها استفاده کنید
- می توانید از کدهای HTML به صورت ایمن(safe) در string استفاده کنید
syntax اصلی Template Literals در جاوا اسکریپت
template literal از backticks به جای single quotes یا double quotes استفاده می کند که در مثال زیر نمونه آن را می توانید ببینید:
1 2 3 4 5 |
let str = `Template literal in ES6`; console.log(str);// Template literal in ES6 console.log(str.length); // 23 console.log(typeof str);// string |
با استفاده از backticks ، می توانید آزادانه از single quotes یا double quotes استفاده کنید.
1 |
let anotherStr = `Here's a template literal`; |
اگر string شما دارای backtick است،برای اینکه به مشکل نخورید باید از backslash ( \
) استفاده کنید:
1 |
let strWithBacktick = `Template literals use backticks ` insead of quotes`; |
Multiline strings
تا قبل از ES6 شما باید از یک تکنیک برای ایجاد multi-line string (رشته چندخطی) استفاده می کردید.در این تکنیک هر جایی که لازم بود قسمتی از string در خط بعد قرار گیرد،باید قبل از آن \n قرار می دادید
1 2 3 4 5 6 |
var msg = 'Multiline \n\ string'; console.log(msg); //Multiline //string |
با این حال ، این تکنیک با موتورهای جاوا اسکریپت سازگار نبود. بنابراین ، برای ایجاد یک multiline string از آرایه و string concatenation مانند مثال زیر استفاده می کردند:
1 2 3 |
var msg = ['This text', 'can', 'span multiple lines'].join('\n'); |
template literals به شما اجازه می دهد که خیلی راحت تر multiline string ایجاد کنید.شما فقط کافی است هر جایی که نیاز دارید،یک خط جدید در string ایجاد کنید:
1 2 3 4 |
let p = `This text can span multiple lines`; |
توجه داشته باشید که whitespace بخشی از string است. بنابراین ، شما باید مطمئن شوید که متن با تورفتگی مناسب مطابقت دارد. فرض کنید ، شما یک شیء post
دارید:
1 2 3 4 5 6 |
let post = { title: 'JavaScript Template Literals', excerpt: 'Introduction to JavaScript template literals in ES6', body: 'Content of the post will be here...', tags: ['es6', 'template literals', 'javascript'] }; |
قطعه کد زیر یک کد HTML از شیء post
را برمی گرداند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
let {title, excerpt, body, tags} = post; var postHtml = `<article> <header> <h1>${title}</h1> </header> <section> <div>${excerpt}</div> <div>${body}</div> </section> <footer> <ul> ${tags.map(tag => `<li>${tag}</li>`).join('\n ')} </ul> </footer>`; |
در زیر خروجی متغیر postHtml آمده است. توجه داشته باشید که چگونه از spacing برای برش تگ های <li> به درستی استفاده کردیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<article> <header> <h1>JavaScript Template Literals</h1> </header> <section> <div>Introduction to JavaScript template literals in ES6</div> <div>Content of the post will be here...</div> </section> <footer> <ul> <li>es6</li> <li>template literals</li> <li>javascript</li> </ul> </footer> |
Variable and expression substitutions
در این مرحله ، یک template literal بهتر از یک normal JavaScript string است. تفاوت بزرگ بین اtemplate literal و یک normal string در جایگزینی ها(substitutions) است.
substitutions به شما اجازه می دهد که متغیر و expressions را درون string قرار بدید.موتور جاوا اسکریپت به صورت خودکار این متغیرها و expressions ها را با مقادیری که دارند،جایگزین میکنه.این ویژگی همچنین string interpolation شناخته میشه.
برای قراردادن یک متغیر یا expression، باید اون ها رو در یک block ویژه مشابه زیر قرار بدید:
1 |
${variable_name} |
مثال زیر رو ببینید:
1 2 3 4 5 |
let firstName = 'John', lastName = 'Doe'; let greeting = `Hi ${firstName}, ${lastName}`; console.log(greeting); // Hi John, Doe |
{firstName}$ و {lastName}$ به متغیرهای firstName
و lastName
برای جایگزینی مقادیر متغیرها درون رشته greeting دسترسی دارد.
متغیر greeting
نتیجه substitutions(جایگزینی) را نگه می دارد.مثال زیر جایگزینی expression را نشان می دهد:
1 2 3 4 5 6 |
let price = 8.99, tax = 0.1; var netPrice = `Net Price:$${(price * (1 + tax)).toFixed(2)}`; console.log(netPrice); // netPrice:$9.89 |
اکنون شما باید یک درک مناسب از iteral templates در جاوا اسکریپت و نحوه استفاده از آن در کدهایتان را داشته باشید.
دیدگاهتان را بنویسید