رشته و متدها

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

بنابه منطق برنامه ممکن است مجبور به اعمال برخی تغییرات روی داده‌های رشته ای باشید. مثلاً قسمتی از رشته را جدا کنید برخی کاراکترهای آن را جایگزین کرده یا بنابه شکل رشته آن را به بخش‌های کوچکتر تفکیک و همه را در یک آرایه ذخیره کنید. به طور پیش‌فرض برای همه‌ی این نیازها متدهایی روی نوع داده string وجود دارد. در این درس تعدادی از پرکاربردترین متدهای ویرایش رشته نظیر متدهای slice, replace, split معرفی شده و نحوه پیاده‌سازی آن‌ها بررسی گشته است.

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

متدهای رشته‌ها در جاوا اسکریپت

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

رشته‌ها (String) از نوع داده‌های اولیه (Primitive) هستند، بنابراین غیر قابل تغییر (Immutable) هستند.
به همین دلیل نمی‌توانیم رشته اصلی را تغییر دهیم، بلکه می‌توانیم رشته‌ای جدید ایجاد کنیم که تغییر یافته باشد و آن را در یک متغیر جدید ذخیره کنیم.

متد ()slice

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

let myStr = "This is a sample.";
console.log("Original string:", myStr);

let newStr = myStr.slice(0, 4);

• آرگومان اول: ایندکس کاراکتر شروع برش (شامل آن کاراکتر)
• آرگومان دوم: ایندکس کاراکتر پایان (خود آن کاراکتر شامل نمی‌شود)

در مثال بالا، 0 تا 4، کاراکترها را استخراج می‌کند و کاراکتر چهارم (فاصله) شامل نمی‌شود.

استفاده از یک آرگومان در متد ()slice

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

let myStr = "This is a sample.";
console.log("Original string:", myStr);

let newStr = myStr.slice(4);
console.log("new string:", newStr);

در این حالت، رشته از ایندکس 5 تا آخر رشته انتخاب می‌شود.

استفاده از ایندکس منفی

متد ()slice همچنین از ایندکس منفی پشتیبانی می‌کند. ایندکس منفی به معنی شمارش از انتهای رشته به سمت ابتدا است. مثال:

let myStr = "This is a sample.";
console.log("Original string:", myStr);

let newStr = myStr.slice(-7, -1);
console.log("new string:", newStr);

در این مثال، شروع برش از 6 کاراکتر آخر رشته است. 

• ایندکس منفی 1 معادل اولین کاراکتر از انتهای رشته است و شامل آن کاراکتر نمی‌شود.
• ایندکس منفی 7 معادل هفتمین کاراکتر از انتهای رشته است و به عنوان نقطه شروع در نظر گرفته می‌شود.

در نتیجه، رشته "Sample" بدون نقطه آخر استخراج می‌شود. اگر تنها ایندکس شروع را مشخص کنیم، رشته از آن نقطه تا آخر رشته برش داده می‌شود:

var sampleStr = "This is Sample.";
var newStr2 = sampleStr.slice(-7);
console.log(newStr2); // خروجی: "Sample."

متد ()substr

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

let myStr = "This is a sample.";
console.log("Original string:", myStr);

let newStr = myStr.substr(0, 4);
console.log("new string:", newStr); // خروجی: "This"

• آرگومان اول: ایندکس شروع
• آرگومان دوم: ایندکس پایان (شامل آن کاراکتر نمی‌شود)

استفاده از یک آرگومان در substr

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

let newStr = myStr.substr(2);
console.log("new string:", newStr); // خروجی: "This"

 در اینجا یک ارگومان میزاریم نتیجه می‌شود:

آرگومان 2 به عنوان ایندکس در نظر گرفته شده است.
نکته: متد ()substr به تدریج منسوخ می‌شود، اما هنوز در بسیاری از مرورگرها کاربرد دارد و می‌توان از آن در پروژه‌های فعلی استفاده کرد.

متد ()charAt

برای دسترسی مستقیم به یک کاراکتر در رشته، می‌توان از ()charAt استفاده کرد. این متد جایگزین استفاده از براکت [index] است و مقدار کاراکتر مشخص شده را برمی‌گرداند.

let myStr = "This is a sample.";
console.log("Original string: ", myStr);

let newStr = myStr[2];
console.log("new string: ", newStr);

نتیجه می‌شود:

مشکل این روش:

• در کدهای طولانی ممکن است مشخص نباشد که این مقدار یک رشته است یا آرایه.
• ایندکس ناموجود مقدار undefined برمی‌گرداند که ممکن است باعث خطا یا سردرگمی شود.

یک راهکار بهتر، استفاده از متد ()charAt است.

let myStr = "This is a sample.";
console.log("Original string: ", myStr);

let newStr = myStr.charAt(2);
console.log("new string: ", newStr);

نتیجه همان قبلی هست 

• این متد همان کارایی براکت را دارد و کاراکتر ایندکس مشخص شده را برمی‌گرداند.
• تفاوت مهم: اگر ایندکس خارج از محدوده باشد، رشته خالی ("") برمی‌گرداند به جای undefined

نتیجه میشود:

• مشاهده می‌کنید که تغییر کاراکتر با براکت تاثیری ندارد.
• رشته اصلی بدون تغییر باقی می‌ماند و هیچ اروری هم ایجاد نمی‌شود.

متد ()charAt علاوه بر بازگرداندن کاراکتر، هشدار مناسبی در صورت تلاش برای تغییر مستقیم کاراکتر ارائه می‌دهد:

 myStr.charAt(2) = "I";
console.log("Original string: ", myStr);
// console.log("new string: ", newStr);

• در این حالت، مرورگر به شما هشدار می‌دهد که این خط کد تاثیری ندارد.
• این رفتار مفید است، زیرا ممکن است روی این تغییر حساب کرده باشید و متوجه نشوید که هیچ عملی انجام نشده است.
• در مقایسه با استفاده از براکت [index]، که هیچ اروری ایجاد نمی‌کند، charAt() این ویژگی هشداردهی را دارد.

متد ()replace

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

let newStr = myStr.replace("sample", "test");
console.log("new string: ", newStr);

• آرگومان اول: رشته‌ای که می‌خواهیم جایگزین شود ("Sample")
• آرگومان دوم: رشته جایگزین ("Test")

نکته مهم: رشته اصلی (myStr) بدون تغییر باقی می‌ماند و یک رشته جدید برگردانده می‌شود. نتیجه میشود:

با متد ()replace می‌توان به راحتی بخش‌هایی از رشته را تغییر داد، بدون اینکه رشته اصلی دستکاری شود.

جایگزینی با Regular Expressions

اگر بخواهیم تمام موارد یک کاراکتر یا رشته در متن جایگزین شوند، می‌توان از Regular Expressions (RegEx) استفاده کرد. نحوه استفاده ساده:

let myStr = "This is a sample.";
console.log("Original string: ", myStr);

let newStr = myStr.replace(/i/g, "I");
console.log("new string: ", newStr);

نتیجه می‌شود:

• /i/: رشته یا کاراکتری که می‌خواهیم جایگزین شود
• g (Global Flag): جایگزینی همه موارد موجود در رشته
• نتیجه: تمام "i" ها به "I" تبدیل شدند

نکته: در این مثال، فقط حرف کوچک "i" جایگزین شد و حرف بزرگ "I" دست نخورده باقی ماند.

فلگ‌های مهم در Regular Expressions

• g (Global): جایگزینی تمامی موارد موجود در رشته
• i (Ignore Case): جایگزینی صرف‌نظر از بزرگ یا کوچک بودن حروف

مثال ترکیبی:

let myStr = "This is a SAmple.";
console.log("Original string: ", myStr);

let newStr = myStr.replace(/SAmple/gi, "test");
console.log("new string: ", newStr);

نتیجه میشود:

این بار تمام "i" ها چه بزرگ و چه کوچک جایگزین می‌شوند.

متد ()trim

متد ()trim برای حذف فاصله‌های اضافی در ابتدا و انتهای رشته استفاده می‌شود:

let newStr = myStr.trim(" ");
console.log("new string: ", newStr);

نتیجه میشود: 

رشته اصلی دست نخورده باقی می‌ماند و یک رشته جدید با حذف فضای خالی برگردانده می‌شود.

متد ()split

متد ()split یکی از متدهای پرکاربرد برای تبدیل رشته به آرایه بر اساس یک جداکننده است:

let newStr = myStr.split();
console.log("new string: ", newStr);

اگر هیچ آرگمانی به ()split داده نشود، کل رشته به یک عضو آرایه تبدیل می‌شود. نتیجه میشود:

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

let newStr = myStr.split(" ");
console.log("new string: ", newStr);

به این ترتیب، هر کلمه یا قطعه از رشته بر اساس کاراکتر جداکننده به یک عضو آرایه تبدیل می‌شود.

متدهای ()toLowerCase و ()toUpperCase

• ()toLowerCase: تمام حروف رشته را به حروف کوچک تبدیل می‌کند.
• ()toUpperCase: تمام حروف رشته را به حروف بزرگ تبدیل می‌کند.

let myStr = "Hello World";
let newStr = myStr.toLowerCase();
let newStr2 = myStr.toUpperCase();

console.log("lower: ", newStr); // خروجی: lower: hello world
console.log("upper: ", newStr2); // خروجی: upper: HELLO WORLD

نتیجه می‌شود:

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

سایر متدهای مفید رشته‌ای

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

• ()padStart
• ()padEnd
• ()substring
• ()concat(عملگر concatenation مشابه این متد عمل می‌کند)

می‌توانید به صورت مستقل درباره‌ی آن‌ها مطالعه کنید.

تمرین عملی

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

1. طراحی یک فرم HTML برای وارد کردن شماره تلفن
2. دریافت شماره‌ها با کلیک روی دکمه
3. نمایش شماره‌ها در کنسول به صورت آرایه
4. سه رقم وسطی شماره‌ها به صورت * یا × مخفی شوند
5. می‌توانید اعضای آرایه را با کامای جداکننده یا هر جداکننده دلخواه نمایش دهید

این تمرین به شما کمک می‌کند تا کاربرد عملی متدهای رشته‌ای را در پروژه‌های واقعی تجربه کنید.