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

template literals در جاوا اسکریپت به شما اجازه میدهد تا با string template راحت تر کار کنید.تا قبل از ES6 شما باید از single quotes (‘) یا double quotes (“) برای wrap کردن یک string literal استفاده می کردید و strings ها عملکرد بسیار محدودی داشتند.برای حل مشکلات پیچیده تر ،ES6 template literals یک syntax جدید که به شما امکان می دهد با رشته ها(strings) به روشی ایمن تر و تمیزتر کار کنید،فراهم کرد.

let simple = `This is a template literal`;

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 استفاده می کند که در مثال زیر نمونه آن را می توانید ببینید:

let str = `Template literal in ES6`;

console.log(str);// Template literal in ES6
console.log(str.length); // 23
console.log(typeof str);// string

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 استفاده کنید.

let anotherStr = `Here's a template literal`;

1	let anotherStr = `Here's a template literal`;

اگر string شما دارای backtick است،برای اینکه به مشکل نخورید باید از backslash ( \) استفاده کنید:

let strWithBacktick = `Template literals use backticks ` insead of quotes`;

1	let strWithBacktick = `Template literals use backticks ` insead of quotes`;

Multiline strings

تا قبل از ES6 شما باید از یک تکنیک برای ایجاد multi-line string (رشته چندخطی) استفاده می کردید.در این تکنیک هر جایی که لازم بود قسمتی از string در خط بعد قرار گیرد،باید قبل از آن \n قرار می دادید

var msg = 'Multiline \n\
string';

console.log(msg);
//Multiline
//string

var msg = 'Multiline \n\

string';

console.log(msg);

//Multiline

//string

با این حال ، این تکنیک با موتورهای جاوا اسکریپت سازگار نبود. بنابراین ، برای ایجاد یک multiline string از آرایه و string concatenation مانند مثال زیر استفاده می کردند:

var msg = ['This text',
         'can',
         'span multiple lines'].join('\n');

var msg = ['This text',

'can',

'span multiple lines'].join('\n');

template literals به شما اجازه می دهد که خیلی راحت تر multiline string ایجاد کنید.شما فقط کافی است هر جایی که نیاز دارید،یک خط جدید در string ایجاد کنید:

let p =
`This text
can
span multiple lines`;

let p =

`This text

can

span multiple lines`;

توجه داشته باشید که whitespace بخشی از string است. بنابراین ، شما باید مطمئن شوید که متن با تورفتگی مناسب مطابقت دارد. فرض کنید ، شما یک شیء post دارید:

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']
};

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 را برمی گرداند.

عملگر spread در جاوا اسکریپت

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>`;

let {title, excerpt, body, tags} = post;

var postHtml = `<article>

<h1>${title}</h1>

</header>

<div>${excerpt}</div>

</section>

<ul>

${tags.map(tag => `<li>${tag}</li>`).join('\n ')}

</ul>

</footer>`;

در زیر خروجی متغیر postHtml آمده است. توجه داشته باشید که چگونه از spacing برای برش تگ های <li> به درستی استفاده کردیم.

<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>

<h1>JavaScript Template Literals</h1>

</header>

<div>Introduction to JavaScript template literals in ES6</div>

<div>Content of the post will be here...</div>

</section>

<ul>

<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 ویژه مشابه زیر قرار بدید:

${variable_name}

1	${variable_name}

مثال زیر رو ببینید:

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

let greeting = `Hi ${firstName}, ${lastName}`;
console.log(greeting); // Hi John, Doe

let firstName = 'John',

lastName = 'Doe';

let greeting = `Hi ${firstName}, ${lastName}`;

console.log(greeting); // Hi John, Doe

{firstName}$ و {lastName}$ به متغیرهای firstName و lastName برای جایگزینی مقادیر متغیرها درون رشته greeting دسترسی دارد.

متغیر greeting نتیجه substitutions(جایگزینی) را نگه می دارد.مثال زیر جایگزینی expression را نشان می دهد:

let price = 8.99,
    tax = 0.1;

var netPrice = `Net Price:$${(price * (1 + tax)).toFixed(2)}`;

console.log(netPrice); // netPrice:$9.89

let price = 8.99,

tax = 0.1;

var netPrice = `Net Price:$${(price * (1 + tax)).toFixed(2)}`;

console.log(netPrice); // netPrice:$9.89

اکنون شما باید یک درک مناسب از iteral templates در جاوا اسکریپت و نحوه استفاده از آن در کدهایتان را داشته باشید.

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

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

Multiline strings

Variable and expression substitutions

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

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

Multiline strings

Variable and expression substitutions

مطالب زیر را حتما مطالعه کنید

Reflection در جاوا اسکریپت

Proxy در جاوا اسکریپت

()includes در جاوا اسکریپت

endsWith در جاوا اسکریپت

startsWith در جاوا اسکریپت

()Object.is در جاوا اسکریپت

دیدگاهتان را بنویسید لغو پاسخ