چگونه می توان یک رشته را در جاوا اسکریپت قالب بندی کرد؟

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

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

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

یاد بگیرید که چگونه رشته های جاوا اسکریپت خود را با استفاده از روش های الحاق و الفاظ قالب قالب بندی کنید.

الحاق رشته

جاوا اسکریپت به شما اجازه می دهد تا رشته ها را با استفاده از چندین رویکرد به هم متصل کنید. یک رویکرد مفید، متد ()concat است. این روش از دو یا چند رشته استفاده می کند. از یک رشته فراخوان استفاده می کند و یک یا چند رشته را به عنوان آرگومان می گیرد.

const firstName = "John";
const lastName = "Doe";
 
let stringVal;
 
stringVal = firstName.concat(" ", lastName);
console.log(stringVal);

در اینجا، concat آرگومان های رشته ای (یک فضای خالی و نام خانوادگی) را به رشته فراخوان (firstName) می پیوندد. سپس کد رشته جدید به دست آمده را در یک متغیر (stringVal) ذخیره می کند و مقدار جدید را در کنسول مرورگر چاپ می کند:

یکی دیگر از راه های الحاق مجموعه ای از رشته ها استفاده از عملگر پلاس است. این روش به شما این امکان را می دهد که متغیرهای رشته و حرف های رشته را برای ایجاد رشته های جدید ترکیب کنید.

const firstName = "John";
const middleName = "Mike";
const lastName = "Doe";
 
let stringVal;
 
stringVal = firstName + " " + middleName + " " + lastName;
console.log(stringVal);

کد بالا خروجی زیر را در کنسول چاپ می کند:

رویکرد سوم برای به هم پیوستن رشته‌های جاوا اسکریپت نیاز به استفاده از علامت مثبت و مساوی دارد. این روش به شما امکان می دهد یک رشته جدید را به انتهای رشته موجود اضافه کنید.

const firstName = "John";
const lastName = "Doe";
 
let stringVal;
 
stringVal = firstName;
stringVal += " ";
stringVal += lastName;
 
console.log(stringVal);

این کد یک فضای خالی و مقدار متغیر lastName را به متغیر firstName اضافه می کند و خروجی زیر را تولید می کند:

الفاظ الگو

قالب literals یک ویژگی ES6 است که به شما امکان می دهد رشته های جاوا اسکریپت را قالب بندی کنید. یک الگوی واقعی از یک جفت بک تیک (`) برای نمایش رشته ها استفاده می کند. این روش قالب بندی رشته به شما امکان می دهد رشته های چند خطی تمیزتر را در جاوا اسکریپت نمایش دهید.

let html;
 
html = `<ul>
       <li> Name: John Doe </li>
       <li> Age: 24 </li>
       <li> Job: Software Engineer </li>
       </ul>`;
 
document.body.innerHTML = html;

کد جاوا اسکریپت بالا از HTML برای چاپ لیستی از سه مورد در مرورگر استفاده می کند:

برای دستیابی به همان خروجی بدون حروف الفبای الگو (یا قبل از حروف الفبای الگو)، باید از علامت نقل قول استفاده کنید. با این حال، شما نمی‌توانید کد را در چند خط گسترش دهید، همانطور که می‌توانید با الفاظ الگو.

let html;
 
html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>";
 
document.body.innerHTML = html;

درون یابی رشته ای

الفبای قالب به شما امکان می دهد از عبارات در رشته های جاوا اسکریپت خود از طریق فرآیندی به نام درون یابی استفاده کنید. با درون یابی رشته ای می توانید عبارات یا متغیرهایی را با استفاده از مکان نگهدار ${expression} در رشته های خود جاسازی کنید. اینجاست که ارزش واقعی قالب جاوا اسکریپت آشکار می شود.

let userName = "Jane Doe";
let age = 21;
let job = "Web Developer";
let experience = 3;
 
let html;
 
html = `<ul>
       <li> Name: ${userName} </li>
       <li> Age: ${age} </li>
       <li> Job Title: ${job} </li>
       <li> Years of Experience: ${experience} </li>
       <li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li>
       </ul>`;
 
document.body.innerHTML = html;

کد بالا خروجی زیر را در کنسول تولید می کند:

چهار آرگومان اول مکان‌نمای ${expression} متغیرهای رشته‌ای هستند، اما پنجمین یک عبارت شرطی است. این عبارت به مقدار یکی از متغیرها (تجربه) متکی است تا نشان دهد چه چیزی باید در مرورگر نمایش داده شود.

قالب بندی عناصر در صفحه وب با جاوا اسکریپت

جدا از ارتباط عملکردی آن با توسعه صفحه وب، جاوا اسکریپت با HTML کار می کند تا بر طراحی و چیدمان یک صفحه وب تأثیر بگذارد. می‌تواند متنی را که در یک صفحه وب ظاهر می‌شود، دستکاری کند، همانطور که در مورد الفبای قالب چنین است.

حتی می تواند HTML را به تصاویر تبدیل کرده و آنها را در یک صفحه وب نمایش دهد.

منبع مقاله