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

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

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

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

var myString = 'Hello World!'; // Single quoted string
var myString = "Hello World!"; // Double quoted string

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

var str1 = "it's okay";
var str2 = 'He said "Goodbye"';
var str3 = "She replied 'Calm down, please'";
var str4 = 'Hi, there!"; // Syntax error - quotes must match

خب سوال پیش میاد چطور میتونیم از سینگل کوتیشن و دابل کوتیشن داخل رشته هایی که به ترتیب درون سینگل کوتیشن یا دابل کوتیشن قرار دارند استفاده کنیم و خطای نحوی نداشته باشیم؟ خب در اینجاست که مستر بک اسلش (\) به کمکون میاد و مارو از این مخمصه نجات میده ، به مثال زیر توجه کنین:

var str1 = 'it\'s okay';
var str2 = "He said \"Goodbye\"";
var str3 = 'She replied \'Calm down, please\'';

پس وقتی میخوایم از خود کوتیشن ها درون رشته هامون استفاده کنیم انهارو همرا بک اسلش میاریم.تاباعث ایجاد خطای نحوی نگردیم.(برای کوتیشن هایی که همجنس با کوتیشنی است که رشتمون داخلش قرارگرفته).جالبه که بدونیم به کاراکتر بک اسلش (\) کاراکتر گریز و به توالی \' و\" توالی گریز میگویند.

دنباله های گریز در جاوا اسکریپت

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

کاراکترهای جایگزین

حالا بریم چند مثال برای روشن شدن نحوه عملکرد توالی گریز ببینیم:

var str1 = "The quick brown fox \n jumps over the lazy dog.";
document.write("<pre>" + str1 + "</pre>"); // Create line break
 
var str2 = "C:\Users\Downloads";
document.write(str2); // Prints C:UsersDownloads
 
var str3 = "C:\\Users\\Downloads";
document.write(str3); // Prints C:\Users\Downloads

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

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

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

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

ویژگی length طول رشته را برمی گرداند که تعداد کاراکترهای موجود در رشته است. این شامل تعداد کاراکترهای خاص نیز می شود، مانند \t یا \n.

var str1 = "This is a paragraph of text.";
document.write(str1.length); // Prints 28
 
var str2 = "This is a \n paragraph of text.";
document.write(str2.length); // Prints 30, because \n is only one character

توجه: از آنجایی که length یک ویژگی است نه یک تابع، پس نباید از پرانتز مانند ()str.length استفاده بکنیم. در عوض فقط باید str.length را بنویسیم، در غیر این صورت با خطا مواجه خواهیم شد.

پیدا کردن یک رشته در داخل یک رشته دیگر

ما می توانیم از متد ()indexOfبرای یافتن یک زیر رشته یا  یک رشته در یک رشته دیگر استفاده کنیم. این متد شاخص یا موقعیت اولین رخداد یک رشته مشخص شده در یک رشته را برمی گرداند.به عنوان مثال:

var str = "If the facts don't fit the theory, change the facts.";
var pos = str.indexOf("facts");
alert(pos); // 0utputs: 7

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

var str = "If the facts don't fit the theory, change the facts.";
var pos = str.lastIndexOf("facts");
alert(pos); // 0utputs: 46

اگر رشته مد نظر پیدا نشود هر دو متد ()indexOf و ()lastIndexOf مقدار  -1 را برمی‌گردانند. هر دو روش همچنین یک پارامتر عدد صحیح اختیاری را می پذیرند که موقعیت شروع برای جستوجو را مشخص می کند.به عنوان مثال:

var str = "If the facts don't fit the theory, change the facts.";
 
// Searching forwards
var pos1 = str.indexOf("facts", 20);
alert(pos1); // 0utputs: 46
 
// Searching backwards
var pos2 = str.lastIndexOf("facts", 20);
alert(pos2); // 0utputs: 7

نکته: کاراکترهای یک رشته از چپ به راست ایندکس می شوند. شاخص اولین کاراکتر 0 است و شاخص آخرین کاراکتر رشته ای به نام myStr مقدار myStr.length – 1 میباشد.

جستجوی یک الگوی درون یک رشته

می توانیم از متد ()search برای جستجوی یک قطعه متن یا الگوی خاص در داخل یک رشته استفاده بکنیم.مانند متد  ()indexOf ، متد  ()search  نیز اولین تطابق را برمی‌گرداند، و اگر مطابقت پیدا نشد،برای ما ” 1-  ” را برمی‌گرداند، اما برخلاف متد ()indexOf ،این متد همچنین می‌تواند یک عبارت منظم را به عنوان آرگومان خود برای ارائه جستجوی پیشرفته انتخاب کند. به عنوان مثال:

var str = "Color red looks brighter than color blue.";
 
// Case sensitive search
var pos1 = str.search("color");
alert(pos1); // 0utputs: 30
 
// Case insensitive search using regexp
var pos2 = str.search(/color/i);
alert(pos2); // 0utputs: 0

توجه: متد()search از جستجوهای سراسری پشتیبانی نمی کند. فلگ g  (مانند pattern/g/) آرگومان عبارت منظم خود را نادیده می گیرد.

در جلسه های  آینده بیشتر در مورد عبارات منظم خواهید آموخت.

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

برای اینکار می توانیم از متد  ()slice  برای استخراج بخشی یا زیر رشته از یک رشته استفاده کنیم.
این متد2 پارامتر دارد: اینکس شروع (ایندکسی که در آن استخراج شروع می شود)، و یک ایندکس پایانی که اختیاری هم هست  (ایندکسی که قبل از آن استخراج پایان می یابد)، مانند  str.slice(startIndex, endIndex).

برای نمونه ، مثال زیر یک رشته را از موقعیت 4 به موقعیت 15 برش می دهد(استخراج میکند):

var str = "The quick brown fox jumps over the lazy dog.";
var subStr = str.slice(4, 15);
document.write(subStr); // Prints: quick brown
همچنین می توانیم مقادیر منفی را مشخص کنیم. مقدار منفی به عنوان strLength + startIndexدر نظر گرفته می شود، که در آن strLength طول رشته است  برای مثال، اگر startIndex منفی 5 باشد به عنوان  strLength - 5 در نظر گرفته می شود. اگر startIndex بزرگتر یا مساوی با طول رشته، متد  ()slice یک رشته خالی برمی گرداند.. همچنین، اگر endIndex اختیاری مشخص نشود، متد  ()slice تا انتهای رشته استخراج می‌شود.به عنوان مثال:
  var str = "The quick brown fox jumps over the lazy dog.";
    document.write(str.slice(-28, -19) + "<br>"); // Prints: fox jumps
    document.write(str.slice(-35) + "<br>"); // Prints: brown fox jumps over the lazy dog.
    document.write(str.slice(31)); // Prints: the lazy dog.
همچنین می توانیم از متد ()substringبرای استخراج بخشی از رشته داده شده بر اساس ایندکس های شروع و پایان، مانند  str.substring(startIndex, endIndex) استفاده کنیم. متد  ()substring بسیار شبیه به متد  ()slice است، به جز چند تفاوت:

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

مثال زیر به شما نشان می دهد که این روش چگونه عمل می کند:

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substring(4, 15)); // Prints: quick brown
document.write(str.substring(9, 0)); // Prints: The quick
document.write(str.substring(-28, -19)); // Prints nothing
document.write(str.substring(31)); // Prints: the lazy dog.

استخراج تعداد ثابت کاراکتر از یک رشته

جاوا اسکریپت همچنین متد ()substr را ارائه می‌کند که شبیه به  ()slice اما با تفاوتی جزئی است، پارامتر دوم تعداد کاراکترهایی را که باید استخراج شوند به جای ایندکس پایانی مشخص می‌کند، مانند str.substr(startIndex, length). اگر length  صفر یا یک عدد منفی باشد، یک رشته خالی برگردانده می شود. مثال زیر نحوه عملکرد آن را نشان می دهد:

var str = "The quick brown fox jumps over the lazy dog.";
document.write(str.substr(4, 15)); // Prints: quick brown fox
document.write(str.substr(-28, -19)); // Prints nothing
document.write(str.substr(-28, 9)); // Prints: fox jumps
document.write(str.substr(31)); // Prints: the lazy dog.

جایگزینی محتویات یک رشته

می توانیم از متد  ()replace برای جایگزینی بخشی از یک رشته با رشته دیگری استفاده کنیم. این روش دو پارامتر دارد اولی  یک عبارت منظم برای مطابقت یا یک زیر رشته و دومی یک رشته جایگزین  میباشد. مانند str.replace(regexp|substr, newSubstr).

 متد ()replace یک رشته جدید را برمی گرداند، و روی رشته اصلیتغییری ایجاد نمیکند. مثال زیر نحوه عملکرد آن را به ما نشان می دهد:

var str = "Color red looks brighter than color blue.";
var result = str.replace("color", "paint");
alert(result); // 0utputs: Color red looks brighter than paint blue.

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

var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/i, "paint");
alert(result); // 0utputs: paint red looks brighter than color blue.

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

در جاوا اسکریپت می توانیم از متد ()toUpperCase برای تبدیل رشته به حروف بزرگ استفاده کنیم، به عنوان مثال:

var str = "Hello World!";
var result = str.toUpperCase();
document.write(result); // Prints: HELLO WORLD!

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

var str = "Hello World!";
var result = str.toLowerCase();
document.write(result); // Prints: hello world!

الحاق دو یا چند رشته در جاوا اسکریپت

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

var hello = "Hello";
var world = "World";
var greet = hello + " " + world;
document.write(greet); // Prints: Hello World
 
var wish  = "Happy";
    wish += " New Year";
document.write(wish); // Prints: Happy New Year

جاوا اسکریپت همچنین متد()concat  را برای ترکیب رشته ها ارائه می دهد، اما زیاد توصیه نمیشه.

دسترسی به کاراکترهای خاص یک رشته

می‌توانیم از متد ()charAt  برای دسترسی به کاراکترهای خاص از یک رشته، استفاده میکنیم.مانندstr.charAt(index) . ایندکس مشخص شده باید یک عدد صحیح بین 0 و str.length - 1. باشد. اگر ایندکسی ارائه نشده باشد، اولین کاراکتر در رشته برگردانده می شود، زیرا پیش فرض 0 است.به عنوان مثال:

var str = "Hello World!";
document.write(str.charAt());  // Prints: H
document.write(str.charAt(6)); // Prints: W
document.write(str.charAt(30)); // Prints nothing
document.write(str.charAt(str.length - 1)); // Prints: !

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

var str = "Hello World!";
document.write(str[0]); // Prints: H
document.write(str[6]); // Prints: W
document.write(str[str.length - 1]); // Prints: !
document.write(str[30]); // Prints: undefined

توجه:تنها تفاوت بین دسترسی به کاراکتر از یک رشته با استفاده از ()charAtو براکت ([]) این است که اگر هیچ کاراکتری پیدا نشد، براکت تعریف نشده برمی‌گرداند، در حالی که متدcharAt یک رشته خالی را برمی‌گرداند.

تبدیل یک رشته به یک ارایه و استفاده از اندیس آن

متد ()split می تواند برای تقسیم یک رشته به آرایه ای از رشته ها با استفاده از نحوstr.split(separator, limit)استفاده شود. آرگومان جداکننده رشته ای را مشخص می کند که هر تقسیم باید در آن اتفاق بیفتد، در حالی که آرگومان های حد حداکثر طول آرایه را مشخص می کند.اگر آرگومان جداکننده حذف شود یا در رشته مشخص شده یافت نشود، کل رشته به اولین عنصر آرایه اختصاص داده می شود. به عنوان مثال:

var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";
var fruitsArr = fruitsStr.split(", ");
document.write(fruitsArr[0]); // Prints: Apple
document.write(fruitsArr[2]); // Prints: Mango
document.write(fruitsArr[fruitsArr.length - 1]); // Prints: Papaya
 
// Loop through all the elements of the fruits array 
for(var i in fruitsArr) {  
    document.write("<p>" + fruitsArr[i] + "</p>");
}

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

var str = "INTERSTELLAR";
var strArr = str.split("");
document.write(strArr[0]); // Prints: I
document.write(strArr[1]); // Prints: N
document.write(strArr[strArr.length - 1]); // Prints: R
 
// Loop through all the elements of the characters array and print them
for(var i in strArr) {  
    document.write("<br>" + strArr[i]);
}

این جلسه نیز به پایان رسید  موفق باشید .

سایر مقالات

اشیاء(Objects) در جاوا اسکریپت

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]
اشتراک‌گذاری

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

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