آموزش ویژگی های ECMAScript 6 (جلسه 10) : آموزش Template Literal

- visibility ۰ mode_comment

همونطور که اطلاع دارید در جلسه گذشته در مورد تعدادی از متدهای اضافه شده به String یا رشته ها توضیحاتی رو قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه قصد داریم در مورد Template literal و Template string آموزش بدیم.

همونطور که اطلاع دارید در ES5 و قبل تر از اون، کار کردن با رشته ها سخت است و برای ساخت متون چند خطی و همچنین وصل کردن متنهای مختلف و ... باید از + و ... استفاده کنید و کدهای بیشتری رو مورد استفاده قرار بدین. در ES6 و با استفاده از Template literal میتونین این مشکلات رو برطرف کنید و به راحتی با متون و محتوای طولانی سروکار داشته باشید.

تا قبل از ES6 برای قرار دادن رشته از ' یا " که همون quote و double quote هستن، مورد استفاده قرار میگرفت. اما در ES6 از back tick یا ` مورد استفاده قرار میگیره. این دکمه بر روی کیبورد در زیر دکمه Esc قرار داده شده. کد زیر رو در نظر بگیرید:

همونطور که میبینید یک متغیر بنام message تعریف کردیم و متن مورد نظر رو برای اون قرار دادیم. متن بالا درون back tick یا ` قرار گرفته. در آخر هم اون رو در Console چاپ کردیم. متن بالا هیچ تفاوتی با متون قبلی که با استفاده از ' و " به وجود میومدن، نداره. مثلا میتونیم به راحتی تعداد کاراکترهای اون رو با استفاده از متد length به دست بیاریم، بصورت زیر:

تعداد کاراکترهای این رشته 14 عدد است.

حالا فرض کنید در شرایطی خاص قصد داشته باشیم که درون متن مورد نظر از خود back tick یا ` استفاده کنیم. در این مواقع باید اونا رو escape کنیم و برای اینکار قبل از اونا \ یا backslash قرار میدیم. کد زیر رو در نظر بگیرید:

میبینید که قبل از هر ` یک \ قرار گرفته است. خروجی بصورت زیر میشه:

با استفاده از ' و " نمیتونیم متون چند خطی یا multi line رو به وجود بیاریم. اما با استفاده از ` به راحتی میتونیم این کار رو انجام بدیم. کد زیر رو در نظر بگیرید:

همونطور که میبینید یک متن چند خطی رو درون بک تیک قرار دادم و اون رو در Console چاپ کردم. در انتها تعداد کاراکترهای اون رو هم در Console قرار دادم. خروجی بصورت زیر میشه:

میبینید که متن مورد نظر همونطور که انتظار داریم در خروجی چاپ میشه. مزیتی که این نوع متون دارند این هست که استایلی که در کد برای اونا رو در نظر میگیریم، در خروجی نیز به همان صورت خواهد شد. مثلا فرض کنید که فضاهای خالی زیادی رو به وجود بیارم، بصورت زیر:

خروجی نیز بصورت زیر خواهد شد:

میبینید که فواصل خالی در خروجی نمایش داده میشن و همچنین تعداد کاراکترها به درستی محاسبه میشه. از این ویژگی میتونیم برای به وجود آوردن تگهای HTML با استفاده از Javascript استفاده کنیم. مثلا کد زیر رو در نظر بگیرید:

میبینید که کدهای HTML رو درون back tick قرار دادیم و در انتها نیز متد trim رو فراخوانی کردیم تا فضاهای خالی ابتدا و انتها رو از بین ببره. خروجی در Console بصورت زیر میشه:

به همین راحتی.

چیزهایی که تا اینجا دیدید امکانات ارتقا یافته و بهینه شده حالات قبلی رشته ها بودن. اما چیزهای دیگه ای هم هست که در گذشته قابل انجام نبود و حالا میتونیم به راحتی ازشون استفاده کنیم. شما به راحتی میتونین expression های مورد نظرتون رو درون back tick قرار بدین و خروجی کلی بصورت متن رو تحویل بگیرید. در ابتدا بزارید حالت قدیمی برای انجام این کار رو ببینیم:

میبینید که میخوایم از متغیر name درون message استفاده کنیم و برای اینکار از + استفاده کردیم و متن و متغیر رو به هم وصل کردیم. بجای اینکار و به لطف ES6 میتونیم متغیر name رو درون ${} قرار بدیم و خروجی مشابهی رو دریافت کنیم. بصورت زیر:

میبینید که دیگه نیازی نیست از + استفاده کنیم و فضای خالی قرار بدیم و به همین راحتی متغیر مورد نظر رو درون متن قرار دادیم و در عین حال مانند قبل داینامیک و پویا است. همونطور که قبلا هم گفتیم، هر Expression رو میتونین ما بین ${} قرار بدین. مثلا میتونین یک تابع رو فراخوانی کنید و یا یک حاصلضرب رو قرار بدین و ....

میبینید که تعداد و قیمت آیتم رو تعریف کردم و درون متغیر message اونا رو در هم ضرب کردم و در جای مورد نظر قرار دادم. با اینکار خروجی بصورت زیر خواهد شد:

به همین راحتی.

موفق و پیروز باشید.

یا علی

comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.