ایجاد template در جاوااسکریپت (قسمت سوم)

ایجاد template در جاوااسکریپت یکی از امکانات جدید es6 سال ۲۰۱۵ می‌باشد. این نوع ساخت قالب دارای انواع حالت های مختلف به شرح زیر می‌باشد.

نام های دیگر آن:

Template Literals
Template Strings
String Templates
Back-Tics Syntax

هر یک از این روش ها را بهمراه مثال توضیح خواهم داد:

دستور بک تیک یا back tics

زمانی که بخواهیم از template استفاده کنیم به جای استفاده از جفت کوتیشن ” ” از دو بک تیک استفاده میکنیم.

مثال:

let text = `Hello amir javanmir!`;
document.getElementById("demo").innerHTML = text;
//Hello amir javanmir!

let text = `Hello amir javanmir!`;

document.getElementById("demo").innerHTML = text;

//Hello amir javanmir!

فایده این روش این است که شما میتوانید به راحتی از کاراکترهای ” و ‘ به طور همزمان استفاده کنید.

مثال:

let text = `He's often called "amir javanmir"`;
document.getElementById("demo").innerHTML = text;
//He's often called "amir javanmir"

let text = `He's often called "amir javanmir"`;

document.getElementById("demo").innerHTML = text;

//He's often called "amir javanmir"

در این حالت میتوانیم درون رشته خود اینتر بزنیم و بدون مشکلی آن را در خروجی مشاهده کنیم. البته enter های زده شده در خروجی نمایش داده نمیشود.

مثال:

let text = `The quick
brown fox
jumps over
the lazy dog`;
document.getElementById("demo").innerHTML = text;
/*
The quick brown fox jumps over the lazy dog
*/

let text = `The quick

brown fox

jumps over

the lazy dog`;

document.getElementById("demo").innerHTML = text;

The quick brown fox jumps over the lazy dog

براحتی میتوان از متغیرها و عبارتهای محاسباتی درون بک تیک و template استفاده کرد. نام آن رشته تعاملی یا string interpolation است. برای نوشتن آن علامت $ قرار داده سپس آکلاد باز و بسته را قرار میدهیم و مقدار خود را درون آن مینویسیم. هر عبارت یا متغیر درون یک آکلاد قرار میگیرد.

نحوه نوشتن:

${...}

${...}

مثال:

let firstName = "amir";
let lastName = "javanmir";
let text = `Welcome ${firstName}, ${lastName}!`;
//Welcome amir javanmir!

let firstName = "amir";

let lastName = "javanmir";

let text = `Welcome ${firstName}, ${lastName}!`;

//Welcome amir javanmir!

استفاده از template در حالت عبارت های محاسباتی:

let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`
//Total: 12.50

let price = 10;

let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`

//Total: 12.50

استفاده از تگ های html درون template به این روش آسان است متغیرها و عبارت ها را میتوان خیلی ساده و راحت درون آن قرار داد.

مثال:

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
/*
Templates Literals
template literals
javascript
es6
*/

let header = "Templates Literals";

let tags = ["template literals", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;

for (const x of tags) {

html += `<li>${x}</li>`;

}

html += `</ul>`;

Templates Literals

template literals

javascript

es6

نسخه پشتیبانی مرورگرها:

مرورگر Chrome	مرورگر Firefox	مرورگر Edge	مرورگر Safari	مرورگر Opera
از ۴۱ به بعد	از ۳۴ به بعد	از ۱۳ به بعد	از ۱۰ به بعد	از ۲۹ به بعد

کلمات کلیدی را وارد نمایید

ایجاد template در جاوااسکریپت (قسمت سوم)

آموزش جاوااسکریپت ES6

دستور بک تیک یا back tics

نسخه پشتیبانی مرورگرها:

آخرین آموزش ها

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

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش جاوااسکریپت ES6

دسترسی سریع

کلمات کلیدی را وارد نمایید

ایجاد template در جاوااسکریپت (قسمت سوم)

آموزش جاوااسکریپت ES6

دستور بک تیک یا back tics

نسخه پشتیبانی مرورگرها:

آخرین آموزش ها

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

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش جاوااسکریپت ES6

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب