روش های رشته ای مفید

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

پیش نیازها: سواد اولیه کامپیوتر، درک اولیه HTML و CSS، درک جاوا اسکریپت چیست.

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

اکثر چیزها در جاوا اسکریپت شئ هستند. وقتی رشته ای ایجاد می کنید :

const string = ‘This is my string’;

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

پیدا کردن طول یک رشته(string)

این آسان است! شما از ویژگی length استفاده می کنید. سعی کنید خطوط زیر را وارد کنید:

const browserType = ‘mozilla’;

browserType.length;

این باید عدد 7 را برگرداند، زیرا “mozilla” دارای 7 کاراکتر است. این به دلایل زیادی مفید است. به عنوان مثال، ممکن است بخواهید طول یک سری از نام‌ها را پیدا کنید تا بتوانید آنها را به ترتیب طول نمایش دهید، یا به کاربر اطلاع دهید که نام کاربری که در یک فیلد فرم وارد کرده است، اگر بیش از طول مشخصی باشد، خیلی طولانی است.

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

در یک یادداشت مرتبط، می‌توانید هر کاراکتری را در داخل یک رشته(string) با استفاده از علامت کروشه مربع برگردانید – این به این معنی است که کروشه‌های مربع ([ ]) را در انتهای نام متغیر خود قرار می‌دهید. در داخل پرانتز، تعداد کاراکتری را که می‌خواهید برگردانید، درج می‌کنید، برای مثال برای بازیابی حرف اول این کار را انجام دهید:

browserType[۰];

به یاد داشته باشید: رایانه ها از ۰ به حساب می آیند نه از ۱.

برای بازیابی آخرین کاراکتر هر رشته(string) ، می‌توانیم از خط زیر استفاده کنیم و این تکنیک را با ویژگی length که در بالا نگاه کردیم ترکیب کنیم:

browserType[browserType.length-۱];

طول رشته “mozilla” هفت است، اما به دلیل اینکه تعداد از 0 شروع می شود، موقعیت آخرین کاراکتر 6 است. استفاده از length-1 آخرین کاراکتر را برای ما به ارمغان می آورد.

آزمایش اینکه آیا یک رشته حاوی یک رشته فرعی است یا خیر

گاهی اوقات می خواهید بفهمید که آیا یک رشته کوچکتر در یک رشته بزرگتر وجود دارد یا خیر. این را می توان با استفاده از متد ()include انجام داد که یک پارامتر واحد را می گیرد ؛ رشته فرعی که می خواهید جستجو کنید ، اگر رشته حاوی زیررشته باشد true و در غیر این صورت false برمی گرداند.

const browserType = ‘mozilla’;

if (browserType.includes(‘zilla’)) {

  console.log(‘Found zilla!’);

} else {

  console.log(‘No zilla here!’);

}

اغلب شما می خواهید بدانید که آیا یک رشته(string) با یک رشته فرعی خاص شروع می شود یا به پایان می رسد. این یک نیاز معمولی است که دو روش خاص برای آن وجود دارد: ()startsWith و ()endsWith

const browserType = ‘mozilla’;

if (browserType.startsWith(‘zilla’)) {

  console.log(‘Found zilla!’);

} else {

  console.log(‘No zilla here!’);

}

const browserType = ‘mozilla’;

if (browserType.endsWith(‘zilla’)) {

  console.log(‘Found zilla!’);

} else {

  console.log(‘No zilla here!’);

}

پیدا کردن موقعیت یک رشته فرعی در یک رشته

با استفاده از متد ()indexOf می توانید موقعیت یک رشته فرعی را در یک رشته بزرگتر پیدا کنید. این روش دو پارامتر دارد – رشته فرعی که می خواهید جستجو کنید و یک پارامتر اختیاری که نقطه شروع جستجو را مشخص می کند.

اگر رشته حاوی زیر رشته باشد، ()indexOf اندیس اولین رخداد زیر رشته را برمی‌گرداند. اگر رشته حاوی زیر رشته نباشد، ()indexOf منفی یک را برمی گرداند.

const tagline = ‘MDN – Resources for developers, by developers’;

console.log(tagline.indexOf(‘developers’)); // ۲۰

با شروع از 0، اگر تعداد کاراکترها (از جمله فضای خالی) را از ابتدای رشته بشمارید، اولین رخداد زیررشته “developers” در شاخص 20 است.

console.log(tagline.indexOf(‘x’)); // -۱

از سوی دیگر، به دلیل اینکه کاراکتر x در رشته وجود ندارد، -1 را برمی گرداند.

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

const firstOccurrence = tagline.indexOf(‘developers’);

const secondOccurrence = tagline.indexOf(‘developers’, firstOccurrence + ۱);

console.log(firstOccurrence); // 20

console.log(secondOccurrence); // 35

در اینجا به روشی می‌گوییم که زیررشته “developers” را که از شاخص 21 شروع می‌شود (firstOccurrence + 1) جستجو کند و ایندکس 35 را برمی‌گرداند.

استخراج یک زیر رشته از یک رشته

با استفاده از متد ()slice می توانید یک زیر رشته را از یک رشته استخراج کنید. شما آن را پاس می کنید:

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

const browserType = ‘mozilla’;

console.log(browserType.slice(۱, ۴)); // “ozi”

کاراکتر شاخص 1 “o” و کاراکتر شاخص 4 “l” است. بنابراین ما همه کاراکترهایی را که با “o” شروع می شوند و درست قبل از “l” ختم می شوند، استخراج می کنیم و “ozi” به ما می دهد.

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

browserType.slice(۲); // “zilla”

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

تغییر پرونده

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

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

const radData = ‘My NaMe Is MuD’;

console.log(radData.toLowerCase());

console.log(radData.toUpperCase());

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

می توانید با استفاده از متد ()replace یک زیر رشته را در داخل یک رشته با زیررشته دیگری جایگزین کنید.

در این مثال، ما دو پارامتر ارائه می دهیم، رشته ای که می خواهیم جایگزین کنیم و رشته ای که می خواهیم آن را جایگزین کنیم:

const browserType = ‘mozilla’;

const updated = browserType.replace(‘moz’,‘van’);

console.log(updated);      // “vanilla”

console.log(browserType);  // “mozilla”

توجه داشته باشید که ()replace ، مانند بسیاری از متدهای رشته، رشته ای را که فراخوانی شده بود تغییر نمی دهد، اما یک رشته جدید را برمی گرداند. اگر می خواهید متغیر browserType اصلی را به روز کنید، باید کاری شبیه به این انجام دهید:

let browserType = ‘mozilla’;

browserType = browserType.replace(‘moz’,‘van’);

console.log(browserType);  // “vanilla”

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

توجه داشته باشید که ()replace در این فرم فقط اولین رخداد رشته فرعی را تغییر می دهد. اگر می خواهید همه رخدادها را تغییر دهید، می توانید از ()replaceAll استفاده کنید.

let quote =‘To be or not to be’;

quote = quote.replaceAll(‘be’,‘code’);

console.log(quote);  // “To code or not to code”

نمونه های یادگیری فعال

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

هر نمونه دارای یک دکمه “Reset” است، که می توانید از آن برای بازنشانی کد در صورت بروز اشتباه استفاده کنید و نتوانستید دوباره کار کند، و یک دکمه “Show solution” را فشار دهید تا در صورت دریافت، پاسخ احتمالی را ببینید.

فیلتر کردن پیام های تبریک

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

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

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

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

1.کل رشته موجود در متغیر city را به حروف کوچک تبدیل کنید و آن را در یک متغیر جدید ذخیره کنید.
۲.حرف اول رشته را در این متغیر جدید بگیرید و در متغیر دیگری ذخیره کنید.
۳.با استفاده از این آخرین متغیر به عنوان یک رشته فرعی، حرف اول رشته کوچک را با حرف اول رشته کوچک که به حروف بزرگ تبدیل شده است جایگزین کنید. نتیجه این روش جایگزینی را در متغیر جدید دیگری ذخیره کنید.
4.مقدار متغیر نتیجه را برابر با نتیجه نهایی، نه city، تغییر دهید.

نکته: پارامترهای متدهای رشته ای لازم نیست که حرف های رشته ای باشند آنها همچنین می توانند متغیر باشند یا حتی متغیرهایی با روشی که روی آنها فراخوانی شده است.

ساخت رشته های جدید از قطعات قدیمی

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

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

توصیه می کنیم این کار را به این صورت انجام دهید:

۱ . کد ایستگاه سه حرفی را استخراج کرده و در یک متغیر جدید ذخیره کنید.

۲. عدد شاخص کاراکتر نقطه ویرگول را پیدا کنید.

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

۴. برای ساختن رشته نهایی، دو متغیر جدید و یک رشته را به هم الحاق کنید.

5. مقدار متغیر result را به رشته نهایی تغییر دهید نه به station (ایستگاه).

نتیجه گیری

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

کلام آخر

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

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