برنامه نویسی و طراحی سایت

رشته‌ ها در جاوا اسکریپت – کار با String به زبان ساده + مثال و کد

رشته‌ ها در جاوا اسکریپت – کار با String به زبان ساده + مثال و کد

«رشته» (استرینگ | String) در برنامه نویسی، مجموعه‌ای متوالی از کاراکترها محسوب می‌شود که عمدتاً برای نمایش متن در نظر گرفته شده است. رشته‌ها می‌توانند کاراکترهای مختلفی از جمله حروف، اعداد و کاراکترهای خاص را در بر بگیرند که انعطاف‌پذیری زیادی برای مدیریت داده‌های متنی فراهم می‌کنند. تسلط بر دست‌کاری رشته ها در زبان برنامه نویسی جاوا اسکریپت به دلیل استفاده گسترده از آن‌ها در کارهای برنامه نویسی بسیار مهم است. مطلب پیش رو از «مجله تم آف» توضیحات و آموزش‌های بسیار مفیدی در رابطه با رشته‌ ها در جاوا اسکریپت ارائه می‌دهد.

فهرست مطالب این نوشته
رشته ها در جاوا اسکریپت

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

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

دستکاری رشته ها در جاوا اسکریپت چگونه انجام می‌شود؟

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

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

طول رشته در Javascript

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

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

الگوهای لفظی در جاوا اسکریپت

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

متد Concat برای کار بر روی رشته ها

متد ToLowerCase و ToUpperCase در جاوا اسکریپت

متد Includes در جاوا اسکریپت

متد IndexOf در جاوا اسکریپت

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

متد Slice و Substring در جاوا اسکریپت

متد Split در جاوا اسکریپت

متد Match در جاوا اسکریپت

متد Test در جاوا اسکریپت

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

سخن پایانی

faradars mobile

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

استرینگ یا رشته در جاوا اسکریپت نوعی داده اساسی است که دنباله‌ای از کاراکترها را نشان می‌دهد. رشته‌ها می‌توانند از حروف، اعداد، نمادها، کلمات یا حتی جملات کامل تشکیل شوند. در اصل، هر دنباله‌ای از کاراکترهای «یونیکد» (Unicode) را می‌توان به عنوان رشته در نظر گرفت.

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

کلیک کنید

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

در جاوا اسکریپت، می‌توان رشته‌ها را با محصور کردن متن یا کاراکترها در گیومه یا کوتیشن‌های تکی ( ‘ ‘

)، کوتیشن دوتایی ( ” “

) و بک‌تیک ( `

) ایجاد کرد که مثال زیر برای بیان این موضوع آورده شده است.

// A string created using single quotes
let string1 = 'I am a very cool string!';

// A string created using double quotes
let string2 = "I am a very cool string!";

// A string created using backticks, also known as a template literal
let string3 = `I am a very cool string!`;

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

string1 === string2; // true
string1 === string3; // true
string2 === string3; // true

نوع رشته‌های جاوا اسکریپت که با استفاده از بکتیک ایجاد می‌شوند، «الگوهای لفظی» (Template Literals) نامگذاری شده و ویژگی‌های خاصی را ارائه می‌دهند که در ادامه به بررسی آن‌ها خواهیم پرداخت.

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

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

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

آموزش برنامه نویسی تایپ اسکریپت TypeScript در جاوا‌ اسکریپت
فیلم آموزش برنامه نویسی تایپ اسکریپت TypeScript در جاوا‌ اسکریپت در تم آف

کلیک کنید

در حالی که راه دیگری برای ایجاد رشته ها در جاوا اسکریپت با استفاده از سازنده String()‎

 وجود دارد، توجه به این نکته ضروری است که وقتی رشته با کلمه کلیدی new

 فراخوانی می‌شود، رشته‌ای را به عنوان شی تولید می‌کند. با این حال، اگر بدون کلمه کلیدی new

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

let str1 = new String('What am I?');
typeof str1; // 'object'

let str2 = String('What am I?');
typeof str2; // 'string'

let str3 = "What am I?";
typeof str3; // 'string'

str1 === str2; // false
str1 === str3; // false
str2 === str3; // true

در مثال‌های بالا، str1

 شیئی از نوع string

است (زیرا با استفاده از سازنده ‎ new String()

ایجاد شده است)، در حالی که str2

 و str3

رشته‌های ابتدایی هستند. اگرچه ممکن است str1

و str2

یکسان به نظر برسند، اما از نظر نوع و مقدار متفاوت هستند که این منجر به بازگشت false

 در مقایسه آن‌ها می‌شود. با این حال، str2

و str3

هر دو رشته‌های ابتدایی با یک مقدار هستند که این ویژگی مقایسه آن‌ها را امکان‌پذیر می‌کند. در ادامه این آموزش کار با رشته ها در جاوا اسکریپت تمرکز اصلی روی رشته‌های ابتدایی برای سادگی و کارایی است.

دستکاری رشته ها در جاوا اسکریپت چگونه انجام می‌شود؟

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

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

کلیک کنید

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

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

let str = 'larch';
str[0]; // 'l'
str[1]; // 'a'
str[2]; // 'r'
str[3]; // 'c'
str[4]; // 'h'

همچنین متد charAt

 نوعی روش جایگزین برای بازیابی کاراکتری خاص از رشته است:

str.charAt(0); // 'l'

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

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

let str = 'larch';
str[0] = 'm'; // This could throw an error if you are in strict mode
console.log(str); // 'larch'

در مثال فوق متغیر str

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

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

let str = 'larch';
str = 'march'; // Reassigning str another value
console.log(str); // 'march'

طول رشته در Javascript

در جاوا اسکریپت می‌توان تعداد کاراکترهای رشته‌ای خاص را با استفاده از ویژگی length

 به صورت زیر تعیین کرد:

let sentence = 'Always look on the bright side of life';
sentence.length; // 38

ویژگی length

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

 است (مقدار بازگشتی برابر خواهد بود با طول آرایه منهای ١ زیرا اندیس‌سازی از ٠ شروع می‌شود).

کاربران با درک طول رشته‌ها می‌توانند بهتر روی دست‌کاری آن‌ها کار کنند و این امر به آن‌ها کمک می‌کند این داده‌ها را به صورت بهینه‌تری در پروژه‌های خود به کار ببرند. همچنین کاربر می‌تواند برای دسترسی به آخرین کاراکتر رشته، از ویژگی length – 1

 به صورت زیر استفاده کند.

let lastCharacter = sentence[sentence.length - 1];
console.log(lastCharacter); // 'e'

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

طول رشته در Javascript

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

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

let a = 'When candles are out,';
let b = 'all cats are grey.';
let c = a + ' ' + b;
console.log(c); // 'When candles are out, all cats are grey.'

در مثال بالا، رشته‌های ذخیره‌ شده در متغیرهای a

 و b

 به هم متصل و یک فضای اضافی بین آن‌ها اضافه شده تا از فاصله‌گذاری مناسب در جمله آخر اطمینان حاصل شود. همچنین روشی جایگزین دیگر برای اتصال رشته‌ ها در جاوا اسکریپت استفاده از عملگر +=‎

 محسوب می‌شود که مثال زیر مربوط به آن است.

let a = 'When candles are out,';
let b = 'all cats are grey.';
console.log(a += ' '); // 'When candles are out, '
console.log(a += b); // 'When candles are out, all cats are grey.'

با استفاده از عملگر +=‎

می‌توان مرحله‌به‌مرحله رشته‌ای جدید به مقدار متغیر اضافه کرد. در نهایت a

کل جمله را بدون نیاز به متغیر اضافی نگه می‌دارد، مانند مثال قبلی که متغیر c

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

console.log('The ' + 3 + ' Musketeers'); // 'The 3 Musketeers'

در این حالت، عدد 3

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

مطلب پیشنهادی:

بهترین روش های تبدیل مقدار عددی به رشته در جاوا اسکریپت — به زبان ساده

شروع مطالعه

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

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

'Berry' 

در مثال فوق مقایسه کاراکتر به کاراکتر انجام شده و این کار و از اولین کاراکتر شروع می‌شود. ذکر این نکته ضروری است که مقایسه بر اساس ترتیب یونیکد خواهد بود، جایی که حروف بزرگ قبل از حروف کوچک قرار می‌گیرند. در نتیجه، عبارت شرطی درست ارزیابی می‌شود، زیرا در جدول یونیکد، «$» قبل از «&» قرار می‌گیرد.

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

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

let quote = 'All generalizations are dangerous, even this one';
let quoteMark = 'All generalizations are dangerous, even this one!';
quote 

در مثال بالا، نقل‌قول یا جمله آورده شده فاقد علامت تعجب نهایی است که این امر باعث می‌شود quoteMark

 در مقایسه با quote

 بزرگ‌تر باشد. همچنین اگر نیاز به مقایسه طول دو رشته باشد، می‌توان به سادگی از ویژگی length

 به صورت زیر استفاده کرد.

quote.length 

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

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

کلیک کنید

الگوهای لفظی در جاوا اسکریپت

«الگوهای لفظی» (Template Literals) که با استفاده از بکتیک ( `

) ایجاد می‌شوند، ویژگی‌های خاصی را در جاوا اسکریپت ارائه می‌دهند. یکی از این ویژگی‌ها امکان نمایش متن در چند خط است. توجه مثال زیر به درک مفهوم ذکر شده بسیار کمک می‌کند.

const chorus = `Don't lose heart, comrades
It's over that hill
Paradise is just over that hill`;

console.log(chorus);
// Don't lose heart, comrades
// It's over that hill
// Paradise is just over that hill

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

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

دارد:

const verse = "There is unrest in the forestnTrouble with the trees";

console.log(verse);
// There is unrest in the forest
// Trouble with the trees

هنگامی که متغیرها را در رشته‌های ایجاد شده با نقل قول‌های تکی یا دوتایی اضافه می‌شوند، باید از الحاق استفاده کرد:

const dog1 = 'Bach';
const dog2 = 'Bingo';

console.log('My two dogs are called ' + dog1 + ' and ' + dog2 + '.');
// My two dogs are called Bach and Bingo.

با این حال، در الگوهای لفظی، می‌توان از درون‌یابی رشته‌ای بهره برد و کد را خواناتر و روان‌تر کرد که مثال زیر این مفهوم را بیان می‌کند:

const dog1 = 'Bach';
const dog2 = 'Bingo';

console.log(`My two dogs are called ${dog1} and ${dog2}.`);
// My two dogs are called Bach and Bingo.

در الگوهای لفظی، می‌توان از نگه‌دارنده‌های ${}

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

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

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

انواع داده‌های اولیه در جاوا اسکریپت، از جمله رشته‌ها، متدها یا ویژگی‌هایی مستقیماً مرتبط با خودشان ندارند. با این حال، هنگامی که کاربر متدی را فراخوانی می‌کند یا به نوعی ویژگی در رشته دسترسی پیدا کند، مکانیسم جالبی در مورد آن به وجود می‌آید. برای مثال اگر کاربر بخواهد این اعمال را انجام دهد در این حال جاوا اسکریپت به طور خودکار نوعی «شی پوشاننده موقت» (Temporary Wrapper Object) در اطراف آن رشته ایجاد می‌کند. سپس متد یا ویژگی بر روی این شی wrapper

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

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

کلیک کنید

پس از استفاده از متد یا ویژگی، شی wrapper

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

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

متد Concat برای کار بر روی رشته ها

متد concat()‎

 در جاوا اسکریپت هدفی مشابه عملگرهای +

و +=

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

به همان نتیجه رسید. قطعه کد مثال مذکور به صورت زیر است:

let a = 'When candles are out,';
let b = 'all cats are grey.';
let c = a.concat(' ', b);
console.log(c); // 'When candles are out, all cats are grey.'

در این مثال از concat()‎

برای اتصال رشته‌های a

 و b

 استفاده شده و فاصله‌ای بین آن‌ها اضافه می‌شود. نتیجه در متغیر c

 ذخیره خواهد شد که رشته را نگه می‌دارد. متد concat()‎

نوعی رویکرد جایگزین برای اتصال رشته است و می‌تواند به ویژه زمانی مفید باشد که کاربر نیاز به اتصال چند رشته داشته باشد یا اگر ترجیح دهد رشته‌های اصلی را در طول عملیات بدون تغییر نگه دارد. درست مانند عملگرهای +

و +=

، متد concat()‎

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

متد ToLowerCase و ToUpperCase در جاوا اسکریپت

در جاوا اسکریپت می‌توان حروف رشته‌ها را با استفاده از متدهای toLowerCase()

 و toUpperCase()

 دست‌کاری کرد. این متدها به کاربر امکان می‌دهند بدون تغییر رشته اصلی، نوعی رشته را به ترتیب به حروف کوچک یا بزرگ تبدیل کند. بیایید به مثالی با استفاده از متدهای toLowerCase()

و toUpperCase()

نگاهی بیندازیم:

let sentence = 'Always look on the bright side of life';

console.log(sentence.toLowerCase());
// always look on the bright side of life

console.log(sentence.toUpperCase());
// ALWAYS LOOK ON THE BRIGHT SIDE OF LIFE

در مثال بالا، متد toLowerCase()

تمام کاراکترهای رشته جمله را به حروف کوچک تبدیل کرده و رشته‌ای جدید با حروف تغییر یافته ایجاد می‌کند. رشته جمله اصلی بدون تغییر باقی می‌ماند. به طور مشابه، متد toUpperCase()

همه کاراکترها را به حروف بزرگ تبدیل کرده و رشته‌ای جدید با حروف بزرگ ایجاد می‌کند، در حالی که رشته جمله اصلی را به شکل اصلی خود حفظ خواهد کرد.

متد toLowerCase و toUpperCase در جاوا اسکریپت

این متدها زمانی مفید هستند که نیاز به مقایسه رشته‌ها به روشی غیرحساس به حروف بزرگ و کوچک وجود باشد یا زمانی که کاربر بخواهد از یکنواختی ورودی یا خروجی رشته‌ها اطمینان حاصل کند. با استفاده از toLowerCase()

و toUpperCase()

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

آموزش پروژه‌ محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا
فیلم آموزش پروژه‌ محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در تم آف

کلیک کنید

متد Includes در جاوا اسکریپت

در جاوا اسکریپت، متد include()

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

let sentence = 'Always look on the bright side of life';

sentence.includes('look up'); // false
sentence.includes('look on'); // true
sentence.includes('look on', 8); // false

تشریح مثال فوق به صورت زیر است:

  • در مورد اول، بررسی شده که آیا رشته look up

     در جمله وجود دارد یا خیر. چون این‌طور نیست، متد false

     را برمی‌گرداند.

  • در مورد دوم، رشته look on

     در جمله جستجو شده است و چون این رشته در رشته اصلی وجود دارد، بنابراین متد true

     را برمی‌گرداند.

  • مثال سوم آرگومان دوم اختیاری include()

    را نشان می‌دهد که نمایانگر اندیس شروع جستجو است. در این مورد، جستجو از اندیس ٨ (مرتبط با حرف k

     در look on

     ) شروع می‌شود. از آنجایی که رشته مشخص شده look on

    بعد از این اندیس ظاهر نمی‌شود، متد false

    را برمی‌گرداند.

متد include()

حساس به حروف بزرگ و کوچک است، به این معنی که بین حروف بزرگ و کوچک تمایز قائل می‌شود. اگر نیاز به انجام جستجوی غیرحساس به حروف بزرگ و کوچک باشد، می‌توان قبل از استفاده از include()

با استفاده از toLowerCase()

یا toUpperCase()

هم رشته هدف و هم رشته جستجو را به حروف کوچک یا بزرگ تبدیل کرد.

مطلب پیشنهادی:

5 کتابخانه دستکاری رشته برای جاوا اسکریپت | فهرست کاربردی

شروع مطالعه

متد IndexOf در جاوا اسکریپت

یکی دیگر از متدهای مربوط به رشته ها در جاوا اسکریپت متد indexOf()

 است. در جاوا اسکریپت، متد indexOf()

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

let sentence = 'Always look on the bright side of life';

sentence.indexOf('l'); // 1
sentence.indexOf('l', 2); // 7
sentence.indexOf('l', 8); // 34
sentence.indexOf('L'); // -1

تشریح مثال فوق به صورت زیر است:

  • در مورد اول، اولین رخداد زیررشته l

     در جمله جستجو می‌شود. این متد عدد ١ را برمی‌گرداند که اندیس اولین l

    در جمله است.

  • در مورد دوم، جستجو از اندیس 2

     شروع می‌شود و متد عدد 7

     را برمی‌گرداند که اندیس l

    بعدی در جمله است.

  • در مورد سوم مثال، شروع جستجو از اندیس 8

     خواهد بود و عدد 34

     را برمی‌گرداند که مربوط به اندیس آخرین l

    در جمله است.

  • اگر متد indexOf()

    نتواند زیررشته مشخص شده را پیدا کند، -1

     را برمی‌گرداند. به عنوان مثال، هنگام جستجوی L

     (با حروف بزرگ)، این حرف در جمله وجود ندارد، بنابراین متد مذکور مقدار -1

    را برمی‌گرداند.

متد indexOf()

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

آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان)
فیلم آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان) در تم آف

کلیک کنید

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

در جاوا اسکریپت، از متد startsWith()

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

به حروف کوچک و بزرگ حساس است. مثال زیر به درک این متد بسیار کمک می‌کند.

let dish = 'Lemon curry';
dish.startsWith('Lem'); // true
dish.startsWith('lem'); // false
dish.toLowerCase().startsWith('lem'); // true
dish.startsWith('cu'); // false
dish.startsWith('cu', 6); // true

تشریح مثال فوق برای کار روی رشته ها در جاوا اسکریپت با متد startsWith()

به صورت زیر است:

  • در مثال فوق و در مورد اول، بررسی می‌شود که آیا رشته dish

     با زیررشته Lem

    شروع می‌شود یا خیر. چون شرط ارضا خواهد شد بنابراین متد true

     را برمی‌گرداند.

  • در مورد دوم این کار برای زیررشته lem

     انجام شده اما ازآنجایی‌که جستجو به حروف کوچک و بزرگ حساس است و به دلیل اینکه رشته dish

    با Lem

    شروع می‌شود، این بار متد false

     برمی‌گردد.

  • در مورد سوم برای انجام جستجوی بدون حروف بزرگ، می‌توان قبل از استفاده از startsWith()

    ، کل رشته را با استفاده از toLowerCase()

    به حروف کوچک تبدیل کرد. به این ترتیب، متد هنگام جستجوی lem

    مقدار true

    را برمی‌گرداند، زیرا ظرف رشته با حروف کوچک با lem

    شروع می‌شود.

  • در مورد چهارم زیررشته cu

    جستجو می‌شود اما چون این زیررشته در ابتدای رشته dish

    وجود ندارد، بنابراین متد false

    را برمی‌گرداند.

  • در مثال پنجم نیز موقعیت شروع از اندیس 6

    مشخص شده است به این معنی که جستجو از اندیس 6

    آغاز می‌شود. سپس این متد true

    را برمی‌گرداند زیرا زیررشته cu

    از اندیس 6

    به بعد در رشته dish

    وجود دارد.

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

به طور مشابه، متد endsWith()

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

را نشان می‌دهد.

let dish = 'Lemon curry';
dish.endsWith('ry'); // true
dish.endsWith('on', 5); // true

در مورد اول، بررسی می‌شود که آیا رشته dish

با زیررشته ry

ختم می‌شود یا خیر. چون این رشته به ry

ختم خواهد شد بنابراین متد مدنظر true

را برمی‌گرداند. در مورد دوم، موقعیت پایانی 5

 است، به این معنی که فقط کاراکترهای تا اندیس 4

 برای جستجو در نظر گرفته شده‌اند. سپس این متد true

را برمی‌گرداند زیرا رشته فرعی on

 با انتهای بخش مشخص شده رشته dish

مطابقت دارد.

هر دو متد startsWith()

و endsWith()

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

آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت
فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در تم آف

کلیک کنید

متد Slice و Substring در جاوا اسکریپت

در جاوا اسکریپت، هر دو متد slice()

 و substring()

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

و substring()

آمده است:

let sentence = 'Always look on the bright side of life';

sentence.slice(7); // 'look on the bright side of life'
sentence.substring(7); // 'look on the bright side of life'
sentence.slice(0, 6); // 'Always'
sentence.substring(0, 6); // 'Always'

تشریح مثال فوق به صورت زیر است:

  • در مورد اول، هم slice()

    و هم substring()

    رشته فرعی را که از اندیس 7

    شروع می‌شود تا انتهای جمله استخراج می‌کنند و در نتیجه رشته look on the bright side of life

     ایجاد می‌شود.

  • در مورد دوم، هنگام استفاده از slice()

    با 0

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

    با 0

    به عنوان اولین آرگومان به همان نتیجه می‌رسد و رشته Always

     را به دست می‌دهد.

  •  در مورد سوم، slice(0,6)

     و substring(0,6)

     رشته Always

     را برمی‌گردانند که شامل کاراکترهای اندیس 0

    تا 5

     است.

متد slice و substring در جاوا اسکریپت

نکته: زمانی که اندیس اول بزرگ‌تر از دومی باشد، تفاوت ظریفی بین slice()

و substring()

وجود دارد. مثال زیر در این رابطه مهم است.

let sentence = 'Always look on the bright side of life';

sentence.substring(11, 7); // 'look'
sentence.slice(11, 7); // ''

در مثال فوق، هنگام استفاده از substring()

با آرگومان‌های 11 ، 7

 ، این دو آرگومان برای تشکیل نوعی محدوده معتبر ردوبدل می‌شوند که در نتیجه look

 ایجاد می‌شود. از سوی دیگر، slice()

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

و substring()

ضروری خواهد بود. با درک این تفاوت‌ها می‌توان از متدی مناسب برای استخراج زیررشته موردنظر از رشته ها در جاوا اسکریپت استفاده کرد.

مجموعه آموزش طراحی و برنامه ‌نویسی سایت
فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت در تم آف

کلیک کنید

متد Split در جاوا اسکریپت

یکی دیگر از متدهای مهم برای کار با رشته ها در جاوا اسکریپت، متد split

 است. در جاوا اسکریپت، از متد split()

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

let sentence = 'Always look on the bright side of life';

sentence.split(' '); // ['Always', 'look', 'on', 'the', 'bright', 'side', 'of', 'life']
sentence.split(' ', 5); // ['Always', 'look', 'on', 'the', 'bright']

مورد اول، رشته sentence

 را با استفاده از کاراکتر فاصله به عنوان جداکننده تقسیم می‌کند. در نتیجه، متد split()

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

['Always', 'look', 'on', 'the', 'bright', 'side', 'of', 'life']

مورد دوم هم ارائه آرگومان دوم اختیاری برای split()

را نشان می‌دهد. در اینجا، از فاصله به عنوان جداکننده و 5

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

['Always', 'look', 'on', 'the', 'bright']

متد split()

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

برای مدیریت و دست‌کاری داده‌های مبتنی بر متن در برنامه‌های جاوا اسکریپت ضروری است.

آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript
فیلم آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript در تم آف

کلیک کنید

متد Match در جاوا اسکریپت

در جاوا اسکریپت، متد match()

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

const tongueTwister = "How much wood would a woodchuck chuck if a woodchuck could chuck wood?"
const regex1 = /(w|c)o*(ul)?d/g;
const regex2 = /wool/g;
tongueTwister.match(regex1);
// ['wood', 'would', 'wood', 'wood', 'could', 'wood']
tongueTwister.match(regex2);
// null

در مثال فوق، رشته‌ای ذخیره شده در متغیر tongueTwister

 موجود است. سپس دو «عبارت منظم» (Regular Expressions)، regex1

 و regex2

 تعریف شده‌اند. با استفاده از match()

با regex1

، متد الگوی تعریف شده به وسیله عبارت منظم را جستجو می‌کند و آرایه‌ای را با تمام زیررشته‌های منطبق موجود در tongueTwister

برمی‌گرداند. در این مورد خروجی به صورت زیر است:

['wood'، 'would'، 'wood'، 'wood'، 'could'، 'wood']

این‌ها همه کلماتی هستند که با الگوی تعریف شده به وسیله regex1مطابقت دارند. با این حال، هنگام استفاده از match()

با regex2

، متد null 

 را برمی‌گرداند. این به این دلیل است که عبارت منظم regex2

با هیچ الگویی در tongueTwister

مطابقت ندارد و در نتیجه هیچ منطبقی پیدا نمی‌شود.

متد match در جاوا اسکریپت

متد match()

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

مطلب پیشنهادی:

انواع داده در جاوا اسکریپت — راهنمای مقدماتی به زبان ساده

شروع مطالعه

متد Test در جاوا اسکریپت

در جاوا اسکریپت، متد test()

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

const tongueTwister = "How much wood would a woodchuck chuck if a woodchuck could chuck wood?"
const regex1 = /(w|c)o*(ul)?d/g;
const regex2 = /wool/g;
regex1.test(tongueTwister); // true
regex2.test(tongueTwister); // false

در مثال فوق، همان رشته tongueTwister

و دو عبارت منظم regex1

و regex2

را داریم. با استفاده از test()

با regex1

، متد الگوی تعریف شده به وسیله عبارت منظم در داخل tongueTwister

را جستجو می‌کند. از آنجا که الگوی regex1

با بخش‌های مختلف رشته مطابقت دارد، متد test()

مقدار true

 را برمی‌گرداند. از طرف دیگر، هنگام استفاده از test()

با regex2

، متد الگوی تعریف شده به وسیله regex2

را در tongueTwister

جستجو می‌کند. ازآنجایی‌که الگوی regex2

با هیچ بخشی از رشته مطابقت ندارد، متد test()

مقدار false

 را برمی‌گرداند.

متد test()

مخصوصاً زمانی مفید است که کاربر بخواهد وجود الگویی را در رشته بدون نیاز به استخراج زیررشته‌های منطبق واقعی بررسی کند. این متد راه ساده و کارآمدی برای تأیید وجود الگوهای خاص در داده‌های متنی و رشته ها در جاوا اسکریپت با استفاده از عبارات منظم ارائه می‌دهد.

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

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

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

کلیک کنید

سخن پایانی

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

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

کلیک کنید

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.