سرور مجازی NVMe

ES6 Template/String Literals در Node.jsدر این مقاله قصد داریم در مورد Literals قالب جاوا اسکریپت صحبت کنیم. آنها را قبل از مشخصات ES2015 نیز Template Strings می نامیدند. به غیر از آن، ما همچنین قصد داریم به این موضوع بپردازیم که Tagged Template Literals چیست و چگونه می توانیم از آنها با Template Literals معمولی استفاده کنیم. یک …

JavaScript (JS)برنامه نویسی

توسط مهران در دی ۳۰, ۱۴۰۲

ES6 Template/String Literals در Node.jsدر این مقاله قصد داریم در مورد Literals قالب جاوا اسکریپت صحبت کنیم. آنها را قبل از مشخصات ES2015 نیز Template Strings می نامیدند. به غیر از آن، ما همچنین قصد داریم به این موضوع بپردازیم که Tagged Template Literals چیست و چگونه می توانیم از آنها با Template Literals معمولی استفاده کنیم. یک ...

سرفصلهای مطلب

زمان لازم برای مطالعه: 5 دقیقه

معرفی

در این مقاله قصد داریم در مورد قالب های جاوا اسکریپت. آنها نیز نامیده می شدند رشته های الگو قبل از مشخصات ES2015.

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

قالب تحت اللفظی چیست؟

الفاظ الگو با جاوا اسکریپت ES2015 (ES6) معرفی شدند تا رشته ها را به روشی ساده تر و خواناتر مدیریت کنند.

این به ما اجازه می دهد تا عبارات ( درون یابی بیان ) را در یک اعلان رشته جاسازی کنیم، رشته های چند خطی را مدیریت کنیم و “الفاظ الگوی برچسب گذاری شده” را ایجاد کنیم که شکل پیشرفته تری از الفاظ الگو است.

روش قدیمی استفاده از قالب های رشته ای

قبل از ES6، از کوتیشن های تکی یا دوگانه برای اعلام یک رشته استفاده می شد. به مثال زیر توجه کنید:

let x = 'This is a sample string';
let y = "This is a sample string with a 'quote' in it";
let z = 'This is a sample string with a "double quote" in it';

let a = 'This is another sample with a \'quote\' in it';
let b = "This is yet another sample with a \"double quote\" in it";

// a -> This is another sample with a 'quote' in it
// b -> This is yet another sample with a "double quote" in it

به طور کلی، به طور پیش‌فرض از اعلان تک نقل قول استفاده می‌کنیم و اگر رشته حاوی نقل‌قول‌های واحد باشد، از اعلان دو نقل قول استفاده می‌کنیم. همین امر برعکس شد – ما از هر نقل قولی استفاده می کنیم که به ما اجازه می دهد از استفاده از کاراکترهای فرار مانند in اجتناب کنیم a و b.

همچنین، اگر می‌خواهیم دو رشته را به هم متصل کنیم، عملگر پلاس رایج‌ترین راه برای انجام این کار بود:

let firstName = 'Janith';
let lastName = 'Kasun';

let fullName = firstName + ' ' + lastName;

// fullName -> Janith Kasun

اگر بخواهیم فاصله سفید (شامل برگه و خط جدید) را اضافه کنیم، از کاراکتر خط جدید (\n) و کاراکتر tab space (\t) برای انجام آن.

نحو قدیمی اجازه شکستن متن به خط بعدی را بدون استفاده از کاراکترهای خاص مانند خط جدید نمی داد:

let info = 'Name:\tJohn Doe\n'
info = info + 'Age:\t20\n';
info = info + 'City:\tLondon';

console.log(info);

اجرای این کد باعث می شود:

Name:   John Doe
Age:    20
City:   London

با این حال، همانطور که در این مثال می بینید، استفاده از کاراکترهای خاص خوانایی کد را کاهش می دهد.

ES6 قالب Literals

استفاده قابل تعویض از نقل قول های تک (') و دو نقل قول (") و همچنین استفاده از شخصیت های خاص و فرار می تواند در موقعیت های خاص کار را کمی سخت کند. بیایید ببینیم چگونه می توانیم با استفاده از الفبای الگو از این مشکلات جلوگیری کنیم.

اعلان یک الگو به معنای واقعی کلمه

قالب جاوا اسکریپت از کاراکتر backtick (`) برای اعلام یک رشته به جای تک یا دو نقل قول استفاده می کند. مثلا:

let x = `This is a new template literal`;

می‌توانید از نقل‌قول‌ها و دو نقل‌قول‌ها در داخل اعلان رشته‌ای با حروف الفبای الگو استفاده کنید:

let y = `This is a string with a 'single quote'`;
let z = `This is a string with a "double quote"`;

رشته و زبانه های چند خطی

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

console.log(`This is the first line
This is the second line`);

این کد نتیجه می دهد:

This is the first line
This is the second line

عبارات با الفاظ الگو (تداخل بیان)

اگر تنها ویژگی Template Literals پرهیز از استفاده نادرست از نقل‌قول‌های تکی و دوگانه و شکستن خطوط بود، آن‌ها بازی را تغییر نمی‌دادند. با این حال، ساخت رشته ها و متن پویا با گنجاندن آن بسیار آسان شد اصطلاحات.

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

let a = 5;
let b = 10;
console.log('The sum of ' + a + ' and' + b + ' is ' + (a + b));

این منجر به:

The sum of 5 and 10 is 15

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

با لفظ قالب، می‌توانیم به سادگی عباراتی را به دنبال آن اضافه کنیم ${...} نحو، مستقیماً در اعلان های رشته ای. وقتی کد را اجرا می کنیم، عبارات ارزیابی می شوند و مقادیر آنها در زیر قرار می گیرد:

let a = 5;
let b = 10;
console.log(`The sum of ${a} and ${b} is ${a+b}`);

این نیز منجر به:

The sum of 5 and 10 is 15

این یک راه حل بسیار تمیزتر برای یک کار نسبتا ابتدایی است. بیایید مثال فضای خالی قبلی را با استفاده از حروف الفبای الگو بازنویسی کنیم:

let info = `Name:   John Doe
Age:    20
City:   London`;

console.log(info);

با این حال، اطلاعات ثابت مانند این به ندرت استفاده می شود. بیایید یک شی را با همان اطلاعات پر کنیم و سپس مقادیر آن را بخوانیم:

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 20,
    city: 'London'
}

let info = `Name:   ${person.firstName} ${person.lastName}
Age:    ${person.age}
City:   ${person.city}`;

console.log(info);

این نیز منجر به:

Name:   John Doe
Age:    20
City:   London

برچسب‌گذاری شده الگوهای واقعی

Tagged Template Literals با استفاده از یک تابع قابل تنظیم، استفاده پیشرفته تری از الفاظ الگو را ارائه می دهد.

سناریوی زیر را در نظر بگیرید.

یک برگه نتیجه از یک امتحان اخیر وجود دارد. نمره قبولی برای امتحان 50 است. ما می خواهیم یک الگوی برچسب گذاری شده ایجاد کنیم که آیا داوطلب امتحان را پس داده است یا نه.

به عنوان مثال، برنامه «جان امتحان را پس داده است» یا «آن امتحان را رد کرده است» را نمایش می‌دهد. روی نشان آنها

بیایید یک تابع الگوی برچسب گذاری شده تعریف کنیم که تعیین می کند دانش آموز قبول شده یا شکست خورده است:

function exampleTag(personExp, strings, marksExp) {
    let resultStr;

    if (marksExp >= 50) {
        resultStr = 'passed';
    } else {
        resultStr = 'failed'
    }
    return `${personExp}${strings(0)}${resultStr}`;
}

در اینجا، بر اساس روی پارامترها به exampleTag() تابع، تعیین می کنیم که آیا نتیجه تنظیم شده است یا خیر passed یا failed. در نهایت، ما یک الگو را به معنای واقعی کلمه برمی گردانیم. این الگو حاوی عباراتی است که نشان دهنده نام شخص، یک رشته و علائم است.

بیایید چند نفر را بسازیم و آنها را به تابع منتقل کنیم:

let p1 = {
    person: 'John',
    marks: 45
}

let p2 = {
    person: 'Ann',
    marks: 67
}

let ex1 = exampleTag`${p1.person} had ${p.marks}`;
let ex2 = exampleTag`${p2.person} had ${p.marks}`;

console.log(ex1);
console.log(ex2);

اجرای این کد منجر به موارد زیر می شود:

John had failed
Ann had passed

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

رشته های خام

در نهایت، اجازه دهید در مورد صحبت کنیم raw ویژگی هنگام ایجاد یک الگوی برچسب گذاری شده به معنای واقعی کلمه.

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

به مثال زیر توجه کنید:

function rawTag(strings) {
    console.log(strings.raw(0));
}

rawTag`this is a \t sample text with \ escape characters \n\t`;

این منجر به:

this is a \t sample text with \ escape characters \n\t

همانطور که می بینید، ما می توانیم از کاراکترهای فرار به عنوان متن خام با استفاده از raw دارایی با الگوهای برچسب گذاری شده

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

اگر به هیچ منطق اضافی نیاز ندارید، می توانید به سادگی از این استفاده کنید:

let rawString = String.raw`this is a \t sample text with \ escape characters \n\t`

این نیز منجر به:

this is a \t sample text with \ escape characters \n\t

نتیجه

در این مقاله، روش قدیمی مدیریت رشته های پویا، فضاهای خالی و کاراکترهای فرار را پوشش داده ایم. سپس، ما به الفاظ قالب، عبارات درون الفاظ قالب و در نهایت الفبای الگوها را تگ کردیم.

(برچسب‌ها برای ترجمه)# جاوا اسکریپت

منتشر شده در 1403-01-20 13:07:04

امتیاز شما به این مطلب