درس 15 از 24

Template Literals در جاوااسکریپت چیست؟ درون‌یابی رشته‌ای (String Interpolation) + مثال

بخش: کار با رشته در جاوااسکریپت

در جاوااسکریپت، تمپلیت لیترال‌ها (template literals) یک روش قدرتمند و انعطاف‌پذیر برای کار با رشته‌ها هستند. برخلاف رشته‌های معمولی که با کوتیشن تکی (') یا کوتیشن دوتایی (") نوشته می‌شوند، تمپلیت لیترال‌ها با بک‌تیک (`) تعریف می‌شوند.

آن‌ها کار با رشته‌ها را ساده‌تر می‌کنند، از جمله قرار دادن متغیرها به‌صورت مستقیم داخل رشته؛ قابلیتی که به آن درون‌یابی رشته‌ای (string interpolation) گفته می‌شود.

تمپلیت لیترال‌ها ساختن رشته‌هایی را آسان‌تر می‌کنند که چند خطی هستند یا شامل عبارت‌ها (expressions) می‌شوند (مثل متغیرها یا حتی کد جاوااسکریپت) و این‌ها مستقیماً داخل خود رشته قرار می‌گیرند.

این یک مثال از یک تمپلیت لیترال است:

const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting);
"Hello, Alice!"

به استفاده از بک‌تیک‌ها توجه کنید، نه کوتیشن تکی یا دوتایی. سینتکس

 ${name}

یک نمونه از درون‌یابی رشته‌ای است؛ یعنی مقدار متغیر name مستقیماً داخل رشته قرار داده می‌شود.

درون‌یابی رشته‌ای (string interpolation) به شما اجازه می‌دهد متغیرها و عبارت‌ها را داخل یک رشته قرار دهید. این یک پیشرفت مهم نسبت به روش قدیمی‌تر است که در آن رشته‌ها و متغیرها را با عملگر + به هم الحاق (concatenate) می‌کردید.

این یک مثال با استفاده از الحاق رشته و عملگر جمع (+) است:

const name = "Alice";
const age = 25;
const message = "My name is " + name + " and I am " + age + " years old.";
console.log(message); 
"My name is Alice and I am 25 years old."

و این هم یک مثال با استفاده از تمپلیت لیترال‌ها و درون‌یابی رشته‌ای:

const name = "Alice";
const age = 25;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); 
"My name is Alice and I am 25 years old."

همان‌طور که می‌بینید، درون‌یابی رشته‌ای با تمپلیت لیترال‌ها خیلی تمیزتر و خواناتر است، مخصوصاً وقتی با چندین متغیر کار می‌کنید.

یکی دیگر از قابلیت‌های عالی تمپلیت لیترال‌ها این است که از رشته‌های چندخطی (multiline strings) پشتیبانی می‌کنند. در رشته‌های معمولی، برای ایجاد خط جدید باید از کاراکترهای escape مثل

 \n

استفاده کنید. اما با تمپلیت لیترال‌ها می‌توانید رشته را خیلی ساده در چند خط بنویسید و فرمت همان‌طور حفظ می‌شود:

let poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you.`;
console.log(poem);
"Roses are red,
Violets are blue,
JavaScript is fun,
And so are you

یکی دیگر از ویژگی‌های تمپلیت لیترال‌ها این است که به شما اجازه می‌دهند عبارت‌های جاوااسکریپت را مستقیماً داخل رشته قرار دهید، مثل مثال زیر:

const song = "Bohemian Rhapsody";
const score = 9.5;
const highestScore = 10;
const output = `One of my favorite songs is "${song}". I rated it ${  (score / highestScore) * 100}%.`;
console.log(output); 
"One of my favorite songs is "Bohemian Rhapsody". I rated it 95%."

تمپلیت لیترال‌ها به‌خصوص زمانی خیلی مفید هستند که لازم دارید متغیرها یا عبارت‌ها را داخل رشته‌ها قرار دهید، رشته‌های پیچیده را قالب‌بندی کنید، یا با متن چندخطی کار کنید. آن‌ها نسبت به الحاق سنتی رشته‌ها، مختصرتر و خواناتر هستند.


سوالات

کدام‌یک از نمادهای زیر برای تعریف تمپلیت لیترال استفاده می‌شود؟

  • کوتیشن تکی (')
  • کوتیشن دوتایی (")
  • بک‌تیک (`)
  • کروشه‌ها ([])

درون‌یابی رشته‌ای (string interpolation) در تمپلیت لیترال‌ها برای چه کاری استفاده می‌شود؟

  • ترکیب چند رشته بدون هیچ متغیری
  • قرار دادن مستقیم متغیرها و عبارت‌ها داخل یک رشته
  • تغییر نوع یک رشته به عدد
  • ساختن تابع‌هایی که رشته‌ها را دستکاری می‌کنند

کدام‌یک از موارد زیر یکی از ویژگی‌های تمپلیت لیترال‌هاست که باعث می‌شود برای نوشتن رشته‌های چندخطی نسبت به رشته‌های معمولی مناسب‌تر باشند؟

  • تمپلیت لیترال‌ها به‌صورت خودکار همه حروف را بزرگ می‌کنند
  • تمپلیت لیترال‌ها شکست خط‌ها (line breaks) را بدون نیاز به escape character حفظ می‌کنند
  • تمپلیت لیترال‌ها اجازه انجام عملیات ریاضی روی رشته‌ها را می‌دهند
  • تمپلیت لیترال‌ها برای ذخیره رشته‌ها حافظه کمتری نیاز دارند