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

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

۱. متد ()slice

فرض کنید متغیری به نام myStr داریم و یک مقدار string در آن ذخیره کرده‌ایم:

let myStr = "This is a sample.";
console.log("Original string: ", myStr); 
//خروجی: Original string: This is a sample.

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

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

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

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

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

می‌توانیم تنها یک آرگومان در متد slice وارد کنیم؛ در این حالت این آرگومان به عنوان آرگومان شروع برش در نظر گرفته می‌شود و تا آخرین کاراکتر رشته استخراج می‌شود:

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

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

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

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

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

ایندکس 1- معادل اولین کاراکتر از انتهای رشته است و شامل آن کاراکتر نمی‌شود.
ایندکس 7- معادل هفتمین کاراکتر از انتهای رشته است.

بنابراین خروجی این کد، رشته "Sample" بدون نقطه آخر خواهد بود:

نتیجه استفاده از ایندکس منفی در متد ()slice

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

let newStr = myStr.slice(-7);
console.log("new string: ", newStr);
// خروجی: new string: Sample.

۲. متد ()substr

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

آرگومان اول در substr: ایندکس شروع
آرگومان دوم در substr: طول رشته جدید

بنابراین در مثالِ این آموزش داریم:

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

خروجی متد ()substr برای رشته در جاوا اسکریپت

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

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

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

در اینجا آرگومان 2 به عنوان ایندکس شروع در نظر گرفته شده است.

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

۳. متد ()charAt در جاوا اسکریپت

برای دسترسی مستقیم به یک کاراکتر در رشته، می‌توان از ()charAt استفاده کرد. این متد جایگزین استفاده از براکت (در این مثال ;[let newStr = myStr[2) است و مقدار کاراکتر مشخص شده را برمی‌گرداند:

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

نتیجه در اینجا دقیقا مشابه ;[myStr[2 است.

👈 متد ()charAt در جاوا اسکریپت:

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

یعنی در مثال این آموزش، برای ;[myStr[20 ، نتیجه undefined می‌شود؛ اما برای متد charAt(20) نتیجه به صورت یک رشته خالی برگردانده می‌شود:

نتیجه متد charAt برای ایندکس خارج از محدوده در جاوا اسکریپت

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

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

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

۴. متد ()replace

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

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

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

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

نکته مهم: رشته اصلی (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);

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

۵. متد ()trim برای رشته‌ها در جاوا اسکریپت

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

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

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

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

متد ()trim در جاوا اسکریپت برای رشته string

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

۶. متد ()split

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

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

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

اگر رشته‌ای مشخص به عنوان جداکننده داده شود، رشته بر اساس آن جدا می‌شود؛ به عنوان مثال اگر space به عنوان ورودی به آن بدهیم، کلمات را که بین آنها space هست را جدا کرده و یک آرایه ۴ عضوی از کلمات این جمله به عنوان خروجی به ما تحویل می‌دهد:

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

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

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

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

let myStr = "This is a sample.";
let newStr = myStr.toLowerCase();
let newStr2 = myStr.toUpperCase();

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

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

متدهای رشته ()toLowerCase و ()toUpperCase جاوا اسکریپت

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

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

برخی دیگر از متدهای رشته که بسیار کاربردی هستند:

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

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

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

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

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

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

جمع بندی

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

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

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

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