سرور مجازی NVMe

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

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

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

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

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

معرفی

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

در این مقاله قصد داریم راه های مختلفی را برای ایجاد رشته های چند خطی در جاوا اسکریپت بررسی کنیم.

چرا از رشته های چند خطی استفاده می کنیم؟

هنگامی که با داده های متنی بزرگ یا الفبای قالب سروکار دارید، داشتن رشته هایی که چندین خط را در بر می گیرند، غیر معمول نیست. در جاوا اسکریپت سنتی، باید از آن استفاده کنید \n کاراکتر برای ایجاد یک خط جدید، که می تواند کد شما را برای خواندن و نگهداری سخت کند.

به عنوان مثال، فرض کنید می خواهید یک رشته برای یک قالب ایمیل ایجاد کنید:

var emailTemplate = "Dear User,\n\nThank you for signing up for our service.\n\nBest,\nTeam"

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

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

رشته های چند خطی: روش سنتی

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

در اینجا یک مثال است:

var multilineString = 'This is line 1\n' +
                      'This is line 2\n' +
                      'This is line 3';
console.log(multilineString);

خروجی خواهد بود:

This is line 1
This is line 2
This is line 3

همانطور که می بینید، این روش در هنگام کار با رشته های بزرگتر می تواند بسیار نامرتب و خواندن آن دشوار باشد.

توجه داشته باشید: را \n کاراکتر یک کاراکتر خاص است که نشان دهنده یک خط جدید است. هنگامی که در یک رشته استفاده می شود، باعث می شود که رشته شکسته شود و یک خط جدید شروع شود.

رشته های چند خطی: راه ES6

با معرفی ES6 (ES2015)، جاوا اسکریپت دارای ویژگی جدیدی به نام قالب واقعی شد. حروف الفبای الگو نوع جدیدی از لفظ رشته ای هستند که توسط بکتیک محصور شده اند (``) به جای نقل قول های تکی یا دوگانه.

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

در اینجا روش ایجاد یک رشته چند خطی با استفاده از الفبای الگو آورده شده است:

let multilineString = `This is line 1
This is line 2
This is line 3`;
console.log(multilineString);

خروجی خواهد بود:

This is line 1
This is line 2
This is line 3

همانطور که می بینید، نحو بسیار تمیزتر و خواندن آسان تر است.

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

هردوک در جاوا اسکریپت

“هردوک” اصطلاحی است که از زبان برنامه نویسی پرل به عاریت گرفته شده است. این مخفف عبارت “Here Document” است و برای ایجاد رشته های چند خطی به روشی خواناتر و قابل مدیریت استفاده می شود. متأسفانه، جاوا اسکریپت به صورت بومی از heredoc پشتیبانی نمی‌کند، اما می‌توانیم آن را با استفاده از الفاظ قالب معرفی‌شده در ES6 تقلید کنیم.

یک رشته چند خطی heredoc مانند در جاوا اسکریپت به شکل زیر است:

let str = `
This is a multiline string
which spans multiple lines.
`;

console.log(str);

خروجی:

This is a multiline string
which spans multiple lines.

بکتیک (`) کاراکتری که معمولا در زیر کلید escape قرار دارد روی یک صفحه کلید، برای تعریف قالب تحت اللفظی در جاوا اسکریپت استفاده می شود. همه چیز در بکتیک بخشی از رشته است، از جمله خطوط جدید یا سایر کاراکترهای خاص.

توجه داشته باشید: بکتیک (`) با یک نقل قول یکسان نیست (') یا یک نقل قول دوگانه ("). هنگام تعریف حروف الفبای الگو، مطمئن شوید که از کاراکتر صحیح استفاده می کنید.

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

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

الحاق

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

let str = "This is a multiline string " +
"which spans multiple lines.";

console.log(str);

خروجی:

This is a multiline string which spans multiple lines.

آرایه پیوستن

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

let str = ("This is a multiline string", "which spans multiple lines.").join("\n");

console.log(str);

خروجی:

This is a multiline string
which spans multiple lines.

الفاظ قالب با متغیرها

الفبای قالب در ES6 همچنین امکان درونیابی متغیر را فراهم می کند. این بدان معناست که می توانید متغیرها را در رشته چند خطی خود قرار دهید و مقادیر آنها در رشته نهایی گنجانده می شود.

let line1 = "This is a multiline string";
let line2 = "which spans multiple lines.";

let str = `${line1}
${line2}`;

console.log(str);

خروجی:

This is a multiline string
which spans multiple lines.

این تغییرات هنگام کار با رشته‌های چند خطی در جاوا اسکریپت انعطاف‌پذیری را فراهم می‌کنند و به شما این امکان را می‌دهند تا بهترین روشی را انتخاب کنید که با نیازهای شما مطابقت دارد.

موارد استفاده: رشته های چند خطی در قالب Literals

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

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

let multilineString = `This is line one
and this is line two
and this is line three`;

console.log(multilineString);

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

This is line one
and this is line two
and this is line three

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

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

موارد استفاده: رشته های چندخطی در عبارات با قاعده

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

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

let multilineString = `This is line one
and this is line two
and this is line three`;

let regex = /line one\nand this is line two/g;

let result = multilineString.match(regex);

console.log(result);

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

( 'line one\nand this is line two' )

را \n در الگوی regex یک کاراکتر خط جدید را نشان می دهد که به الگو اجازه می دهد چندین خط را بپوشاند.

توجه داشته باشید: هنگام استفاده از رشته های چند خطی در regex، مهم است که به یاد داشته باشید که موتور regex جاوا اسکریپت با ^ و $ لنگرها به عنوان شروع و پایان کل رشته، نه خطوط جداگانه. اگر می خواهید شروع یا پایان یک خط را در یک رشته چند خطی مطابقت دهید، باید از پرچم چند خطی استفاده کنید (m).

مسائل بالقوه

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

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

let str = `Hello,
           World!`;

console.log(str);

خروجی خواهد بود:

Hello,
           World!

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

let str = `Hello,
World!`;

console.log(str);

سپس خروجی مورد انتظار را به شما می دهد:

Hello,
World!

مشکل اصلی این است که شما را مجبور به استفاده از تورفتگی غیرطبیعی می کند و در نتیجه به خوانایی کد شما آسیب می رساند.

ثانیاً، اگر از الفبای قالب برای رشته های چند خطی استفاده می کنید، باید توجه داشته باشید که هر عبارت جاوا اسکریپت در ${} نحو ارزیابی خواهد شد. اگر محتوای رشته از یک منبع نامعتبر باشد، این به طور بالقوه می تواند منجر به تزریق کد شود.

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

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

نتیجه

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

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

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

منتشر شده در 1402-12-30 08:51:03

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