متدهای رشته ها (Strings) در جاوا اسکریپت — راهنمای جامع

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

پیش‌نیازها

• سواد مقدماتی رایانه
• درکی ابتدایی از HTML و CSS
• آشنایی اولیه با جاوا اسکریپت

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

هدف از این نوشته، درک این نکته است که رشته‌ها نیز در جاوا اسکریپت شیء محسوب می‌شوند و می‌توان از برخی متدهای تعریف شده روی این شیءها برای دستکاری رشته‌ها استفاده کرد.

رشته‌ها به عنوان اشیا

در بخش‌های پیشین این سلسله مطالب راهنمای عملی جاوا اسکریپت گفتیم که همه چیز در جاوا اسکریپت یک شیء محسوب می‌شود. زمانی که یک رشته را برای مثال با استفاده از دستور زیر ایجاد می‌کنید:

var string = 'This is my string';

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

البته لازم نیست همه این متدها را یاد بگیرید؛ اما برخی از آن‌ها هستند که بهتر است بشناسید. چون در اغلب موارد از آن‌ها استفاده خواهید کرد. در ادامه برخی مثال‌ها ارائه شده‌اند که آن‌ها را می‌توانید در بخش کنسول مرورگر وب خود وارد کنید. برای رفتن به کنسول مرورگر می‌توانید از دکمه‌های Ctrl+Shift+I استفاده کنید.

یافتن طول یک رشته

این کار آسان است. به این منظور صرفاً از خصوصیت length استفاده می‌شود. خطوط زیر را در کنسول وارد کنید:

var browserType = 'mozilla';

browserType.length;

کد فوق مقدار 7 را بازگشت می‌دهد، چون طول کلمه «mozilla» برابر با 7 حرف است. این وضعیت به دلایل مختلف مفید است، مثلاً ممکن است بخواهید طول یک سری از نام‌ها را پیدا کنید و آن‌ها را به ترتیب طول کلمه نمایش دهید یا به کاربر اعلام کنید که نامی که در یک فیلد ورودی وارد کرده بیش از حد طولانی است یا طول خاصی باید داشته باشد.

بازیابی یک کاراکتر رشته‌ای خاص

به همین ترتیب می‌توان هر کاراکتر درون یک رشته را با استفاده از نمادگذاری کروشه بازیابی کرد. یعنی کافی است یک جفت کروشه ([]) در انتهای نام متغیر بیاورید و درون این کروشه شماره کاراکتری که می‌خواهید بازگشت یابد را تعیین کنید. برای نمونه کد زیر نخستین حرف رشته را بازمی‌گرداند:

browserType[0];

دقت کنید که رایانه‌ها از صفر می‌شمارند و نه از 1. برای بازیابی آخرین کاراکتر از هر رشته‌ای باید از کد خط زیر استفاده کرد که در آن از تکنیک length که در بالا مورد اشاره قرار گرفت، استفاده شده است:

browserType[browserType.length-1];

طول رشته «Mozilla» برابر با 7 است؛ اما از آنجا که شمارش آن از 0 آغاز می‌شود، موقعیت کاراکترها برابر با 6 است و از این رو باید length-1 محاسبه شود. برای نمونه این محاسبه را می‌توان برای یافتن نخستین حرف از یک سری رشته‌ها برای مرتب‌سازی آن‌ها بر اساس حروف الفبا انجام داد.

یافتن یک زیر رشته درون رشته دیگر و استخراج آن

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

browserType.indexOf('zilla');

نتیجه اجرای کد مقدار بازگشتی 2 است که نشان دهنده موقعیت شروع زیررشته «zilla» درون رشته «Mozilla» است. چنین کدی را می‌توان برای فیلتر کردن رشته‌ها مورد استفاده قرار داد. برای نمونه ممکن است فهرستی از آدرس‌های وب داشته باشیم و بخواهیم آن‌هایی را که شامل عبارت «mozilla» هستند نمایش دهیم.

این کار از طریق دیگری نیز ممکن است که کارایی بالاتری نیز دارد. کد زیر را در کنسول مرورگر وارد کنید:

browserType.indexOf('vanilla');

نتیجه اجرای کد فوق 1- است. این مقدار زمانی بازگشت می‌یابد که زیررشته مربوطه که در این مورد «vanilla» است، در رشته اصلی یافت نشود.

از این دستور می‌توان برای یافته همه رشته‌هایی که شامل زیررشته «mozilla» نیستند، استفاده کرد. همچنین می‌توان از عملگر منفی‌ساز مانند زیر استفاده کرد:

if(browserType.indexOf('mozilla')!== -1) {

// do stuff with the string

}

زمانی که بدانیم زیررشته مفروض از کجا در رشته اصلی آغاز می‌شود و بدانیم که در کدام کاراکتر خاتمه یافته است، در این صورت می‌توانیم از دستور ()slice برای استخراج آن استفاده کنیم:

browserType.slice(0,3);

این دستور مقدار «moz» را باز می‌گرداند، پارامتر نخست موقعیت کاراکتری است که باید از آنجا شروع به استخراج کرد و پارامتر دوم موقعیت کاراکتری است که انتهای زیررشته استخراج شونده را تعیین می‌کند. بنابراین slice از موقعیت نخست آغاز می‌شود و تا موقعیت دوم ادامه می‌یابد؛ اما خود موقعیت پایانی را شامل نمی‌شود. در این مثال از آنجا که اندیس آغازین 0 است، پارامتر دوم برابر با طول رشته‌ای خواهد بود که می‌خواهیم بازگشت یابد.

ضمناً اگر بخواهیم همه کاراکترهای پس از یک کاراکتر مشخص را استخراج کنیم، نیازی نیست که به پارامتر دوم اشاره کنیم. در عوض می‌توانیم صرفاً موقعیت کاراکتری را که می‌خواهیم از آنجا به بعد استخراج کنیم را مورد اشاره قرار دهیم. دستور زیر را در مرورگر وارد کنید:

browserType.slice(2);

این دستور مقدار «zilla» را بازگشت می‌دهد. دلیل این مسئله آن است که موقعیت کاراکتر 2 حرف z است و از آنجا که پارامتر دوم مورد اشاره قرار نگرفته است، زیررشته‌ای که بازگشت می‌یابد شامل همه کاراکترهای باقی مانده در رشته است.

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

تغییر حروف بزرگ و کوچک

متدهای رشته‌ای ()toLowerCase و ()toUpperCase یک رشته را می‌گیرند و همه پارامترهای آن را به ترتیب به حروف کوچک و بزرگ تبدیل می‌کنند. این دستورها به طور مثال در مواردی که بخواهیم همه داده‌های وارد شده از سوی کاربر را در یک پایگاه داده نرمال‌سازی بکنیم مفید خواهند بود.

دستورهای زیر را در کنسول وارد و نتیجه را مشاهده کنید:

var radData = 'My NaMe Is MuD';

radData.toLowerCase();

radData.toUpperCase();

به‌روزرسانی بخش‌هایی از یک رشته

می‌توان با استفاده از متد ()replace درون رشته‌ای، یک زیررشته را با زیررشته دیگر جایگزین کرد. این متد در سطح پایه بسیار ساده عمل می‌کند؛ اما برخی مباحث پیشرفته نیز وجود دارند که می‌توان اجرا کرد. این متد دو پارامتر دارد، که یکی رشته‌ای است که قرار است جایگزین شود و دیگری رشته‌ای که باید در آن جایگزینی صورت بگیرد است. برای نمونه:

browserType.replace('moz','van');

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

browserType = browserType.replace('moz','van');

مثال‌های عملی

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

هر نمونه به همراه یک دکمه Reset ارائه می‌شود که می‌توان برای ریست کردن کد استفاده کرد. این دکمه در مواردی کاربرد دارد که اشتباهی صورت گرفته باشد و نتوانیم آن را اصلاح کنیم. همچنین یک دکمه «Show solution» وجود دارد و در صورتی که نتوانید کد را بنویسید، می‌توانید با فشردن آن پاسخ ممکن را مشاهده کنید.

فیلتر کردن پیام‌های خوشامدگویی

در تمرین اول یک مثال ساده را بررسی می‌کنیم. در این مثال یک آرایه از پیام‌های خوشامدگویی داریم؛ اما می‌خواهیم آن‌ها را طوری مرتب کنیم که صرفاً پیام تبریک کریسمس را نمایش دهند. در این مورد باید یک تست شرطی بنویسیم که در یک ساختار  (…) if بررسی کند آیا پیام تبریک مربوط به کریسمس است یا نه و در چنین صورتی آن را نمایش دهد.

ابتدا باید روشی برای بررسی این که پیام به تبریک کریسمس مربوط است یا نه پیدا کنیم. باید تعیین کنیم که کدام کلمه است که در همه این پیام‌ها مشترک است و با چه روشی می‌توان وجود آن را بررسی کرد؟

سپس باید یک تست شرطی به شکل «عملوند 1/ عملگر/ عملوند 2» بنویسیم. آیا شیء سمت چپ با شیء راست برابر است؟ یا در این مورد آیا متد فراخوانی شده در سمت چپ با نتیجه سمت راست برابر است؟

نکته اینجا است که در این مورد احتمالاً تست عدم برابری متد با یک نتیجه مشخص، مفیدتر خواهد بود.

اصلاح حروف بزرگ

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

1. تبدیل کل رشته موجود در متغیر input به حالت کوچک و ذخیره‌سازی در یک متغیر جدید.
2. برداشتن حرف نخست رشته در متغیر جدید و ذخیره‌سازی آن در یک متغیر دیگر.
3. استفاده از آخرین متغیر به عنوان یک زیررشته و جایگزینی حرف اول رشته با حروف کوچک با متغیر جدید که به صورت حرف بزرگ درآمده است. سپس نتیجه این رویه جایگزینی در متغیر دیگری ذخیره‌سازی می‌شود.
4. تغییر مقدار متغیر result برای برابر بودن با نتیجه نهایی و نه input.

دقت کنید که پارامترهای متدهای رشته‌ای لزومی ندارند که دقیقاً به صورت رشته باشند. آن‌ها می‌توانند متغیر باشند و یا این که متغیری باشند که متدهایی روی آن‌ها فراخوانی شده باشد.

ایجاد رشته‌های جدید از بخش‌های مختلف

در تمرین آخر این مقاله، یک آرایه شامل دسته‌ای از رشته‌ها داریم که حاوی اطلاعاتی در مورد ایستگاه‌های قطار در شمال انگلستان هستند.

فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه در فرادرس

کلیک کنید

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

MAN675847583748sjt567654;Manchester Piccadilly

ما می‌خواهیم کد و نام ایستگاه قطار را استخراج کرده و آن‌ها را در رشته‌ای با ساختار زیر قرار دهیم:

MAN: Manchester Piccadilly

روش پیشنهادی برای این مسئله به صورت زیر است:

1. استخراج کد ایستگاه سه‌حرفی و ذخیره‌سازی آن در یک متغیر جدید
2. یافتن کاراکتر شماره اندیس کاراکتر نقطه‌ویرگول
3. استخراج نام ایستگاه قابل‌خواندن از سوی انسان با استفاده از شماره اندیس کاراکتر نقطه‌ویرگول به عنوان یک نقطه ارجاع و ذخیره‌سازی آن در یک متغیر جدید.
4. الحاق دو متغیر جدید و یک رشته برای ایجاد رشته نهایی
5. تغییر مقدار متغیر result برای برابر شدن با رشته نهایی و نه input.

سخن پایانی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌های طراحی و برنامه نویسی وب
• متون و رشته ها (Strings) در جاوا اسکریپت — به زبان ساده
• آموزش تعریف توابع در جاوا اسکریپت (JavaScript)

==