نوشتن نظر کلیک کنید

JavaScript – قالب‌بندی رشته‌ها (String Templates)

آخرین بروزرسانی: ۱۳ آذر ۱۴۰۳

قالب‌های رشته‌ای (Template Strings) که با نام‌های Template Literals نیز شناخته می‌شوند، از ویژگی‌های قدرتمند ES6 هستند که برای کار با رشته‌ها (Strings) امکانات بیشتری فراهم می‌کنند.

نحوه تعریف قالب‌های رشته‌ای

به جای استفاده از نقل‌قول‌های تک‌(”) یا دوتایی (“”), قالب‌های رشته‌ای از بک‌تیک‌ها (“) استفاده می‌کنند:

let text = `Hello World!`;

استفاده از نقل‌قول‌ها درون رشته‌ها

قالب‌های رشته‌ای به شما این امکان را می‌دهند که بدون نیاز به کاراکترهای فرار (Escape) از نقل‌قول‌های تک و دوتایی در یک رشته استفاده کنید:

let text = `He's often called "Johnny"`;

رشته‌های چند خطی

با استفاده از قالب‌های رشته‌ای، ایجاد رشته‌های چند خطی بسیار ساده‌تر شده است:

let text =
`The quick
brown fox
jumps over
the lazy dog`;

جای‌گذاری مقادیر متغیرها (Interpolation)

قالب‌های رشته‌ای روشی ساده برای جای‌گذاری متغیرها و عبارات درون رشته‌ها ارائه می‌دهند. این روش به عنوان جای‌گذاری رشته‌ای (String Interpolation) شناخته می‌شود. برای این کار از دستور ${...} استفاده می‌شود.

جای‌گذاری متغیرها

می‌توانید متغیرها را مستقیماً در یک رشته قرار دهید:

let firstName = "John";
let lastName = "Doe";

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

جای‌گذاری عبارات

می‌توانید عبارات را نیز مستقیماً در رشته قرار دهید:

let price = 10;
let VAT = 0.25;

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

در این مثال، مقدار کل با محاسبه یک عبارت ریاضی درون رشته به صورت خودکار جای‌گذاری می‌شود.

قالب‌های HTML

با استفاده از قالب‌های رشته‌ای، می‌توانید قالب‌های HTML ایجاد کنید که خوانا و کارآمد باشند:

مثال

let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

خروجی رشته بالا به شکل زیر خواهد بود:

<h2>Template Strings</h2>
<ul>
  <li>template strings</li>
  <li>javascript</li>
  <li>es6</li>
</ul>

مزایای قالب‌های رشته‌ای

خوانایی بهتر کد.
امکان استفاده از چند خط بدون نیاز به کاراکترهای اضافی.
جای‌گذاری متغیرها و عبارات به صورت خودکار.
کارایی بالا در تولید قالب‌های HTML یا JSON.

جمع‌بندی

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

JavaScript – قالب‌بندی رشته‌ها (String Templates)

نحوه تعریف قالب‌های رشته‌ای

استفاده از نقل‌قول‌ها درون رشته‌ها

رشته‌های چند خطی

جای‌گذاری مقادیر متغیرها (Interpolation)

جای‌گذاری متغیرها

جای‌گذاری عبارات

قالب‌های HTML

مثال

مزایای قالب‌های رشته‌ای

جمع‌بندی

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

JavaScript – قالب‌بندی رشته‌ها (String Templates)

نحوه تعریف قالب‌های رشته‌ای

استفاده از نقل‌قول‌ها درون رشته‌ها

رشته‌های چند خطی

جای‌گذاری مقادیر متغیرها (Interpolation)

جای‌گذاری متغیرها

جای‌گذاری عبارات

قالب‌های HTML

مثال

مزایای قالب‌های رشته‌ای

جمع‌بندی

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

JavaScript – تاریخ‌ها (Dates)

JavaScript – آرایه‌های ثابت (Array Const)

JavaScript – تکرار آرایه‌ها (Array Iteration)

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید