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

با سلام، در این قسمت به ادامه ی بررسی متدهای مربوط به رشته ها در جاوا اسکریپت که در قسمت قبل توضیح دادیم، میپردازیم و برای هر کدام مثال های مربوطه را ذکر خواهیم کرد.

متد ()replace

این متد یک رشته ی خاص را با رشته ای دیگر جا به جا می کند.

<!DOCTYPE html>
<html>

<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("Microsoft","Roxo.ir");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

خروجی این کد شامل یک دکمه ی HTML است بنابراین از شما می خواهم که ابتدا خروجی آن را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

سپس با کلیک روی دکمه متوجه می شوید که کلمه ی Microsoft به عبارت Roxo.ir تغییر می کند.

نکته ی اول: این متد رشته ی اصلی را عوض نمی کند بلکه یک رشته ی دیگر را جایگزین آن می کند. اگر به کد های بالا نگاه کنید متوجه می شوید که متغیر str تغییری نمی کند بلکه یک متغیر رشته ای جدید به نام txt ساخته می شود.

سوال: اگر چند مورد از یک کلمه یا رشته در رشته ی اصلی وجود داشته باشد، متد replace کدام یک را تغییر می کند؟

پاسخ: به طور مثال اگر در مثال بالا، در رشته ی اصلی دو بار کلمه ی Microsoft آمده باشد، تنها مورد اول تغییر می کند.

نکته ی دوم: در حالت پیش فرض، این متد case-sensitive (به معنی حساس به حروف بزرگ و کوچک) است. بنابراین اگر به جای Microsoft کلمه ی MICROSOFT آمده باشد توسط این متد شناسایی نمی شود. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("MICROSOFT","Roxo.ir");
  document.getElementById("demo").innerHTML = txt;
}
</script>

<p>The example does not work because MICROSOFT is written with upper case letters."</p>

</body>
</html>

مشاهده ی خروجی کد در ادیتور آنلاین جاوا اسکریپت.

اگر به لینک مشاهده ی خروجی بروید و روی دکمه کلیک کنید می بینید که هیچ تغییری در رشته رخ نمی دهد. به این دلیل که برای این متد، کلمه ی MICROSOFT با Microsoft یکی نیست و شناسایی نمی شود.

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/MICROSOFT/i,"Roxo.ir");
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

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

اول اینکه عبارات با قاعده را بدون علامت نقل قول انگلیسی (quotation) می نویسند
دوم اینکه عبارت مورد نظر خود را باید بین دو عدد اسلش (/) بگذارید و در آخر از حرف i استفاده کنید که مخفف insensitive (به معنی "غیر حساس") است.

بالاتر گفتیم که این متد تنها اولین موردی را که یافت کند تغییر می دهد. حالا اگر بخواهید به جای اولین مورد، تمامی موارد تغییر کنند می توانید بعد از i از حرف g (مخفف global به معنی جهانی [منظور از جهانی: کل متن]) نیز استفاده کنید (آوردن i یا نیاوردنش بستگی به شما دارد، این حروف مستقل از هم عمل میکنند).

مثال:

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3Schools");

تغییر حروف بزرگ و کوچک

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

var text1 = "Hello World!";       // String
var text2 = text1.toUpperCase();

خروجی این کد عبارت "!HELLO WORLD" خواهد بود.

متد ()toLowerCase دقیقا برعکس این کار را انجام داده و حروف را کوچک می کند:

var text1 = "Hello World!";       // String
var text2 = text1.toLowerCase();

خروجی این کد عبارت "!hello world" خواهد بود.

متد ()concat

این متد تعداد دو یا بیشتری رشته را به هم متصل می کند:

var text1 = "Hello";
var text2 = "World";
var text3 = text1.concat(" ", text2);

خروجی عبارت "!Hello World" خواهد بود.

اگر یادتان باشد گفتیم که علامت + نیز در هنگام کار با رشته ها عملیات الحاق یا concatenation را انجام می دهد. به همین دلیل هر دو کد زیر یکی هستند:

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!");

نکته ی مهم: تمام متدهای مربوط به رشته ها، یک رشته ی جدید را بر میگردانند و رشته ی اصلی را تغییر نمی دهند!

متد ()trim

این متد فضاهای خالی (whitespace) را از دو طرف یک رشته حذف می کند:

var str = "       Hello World!        ";
alert(str.trim());

نکته: این متد در IE8 و ورژن های قبل تر از آن پشتیبانی نمی شود.

استخراج کاراکتر ها در رشته ها

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

متد اول، متد ()charAt: این متد یک کاراکتر را از یک ایندکس خاص بر میگرداند. مثال:

var str = "HELLO WORLD";
str.charAt(0);

این کد حرف H را به ما برمیگرداند.

متد دوم، متد ()charCodeAt: این متد، کدِ یونیکد (از نوع UTF-16) مربوط به یک کاراکتر را از یک ایندکس خاص بر میگرداند. مثال:

var str = "HELLO WORLD";

str.charCodeAt(0);

خروجی این کد عدد 72 می باشد (به این دلیل که کدِ یونیکدِ UTF-16 برای حرف H برابر با 72 است).

کد یونیکد UTF-16 عددی بین صفر و 65535 است.

متد سوم، روش [ ]: این رروش نیز یک کاراکتر را از یک ایندکس خاص بر میگرداند. مثال:

var str = "HELLO WORLD";
str[0];

خروجی این کد حرف H خواهد بود.

البته استفاده از این روش توصیه نمی شود چرا که بعضا مشکلاتی را به وجود می آورد. به طور مثال این روش در IE7 و قبل تر کار نمی کند. در این روش اگر کاراکتری پیدا نشود مقدار undefined را بر میگرداند در حالی که ()charAt یک رشته ی خالی را بر می گرداند و همچنین read-only است! یعنی نمی توانید عملیاتی (مثلا انتساب) روی آن انجام دهید. به طور مثال "str[0] = "A به شما خطایی نمی دهد اما کار هم نمی کند!

متد ()split

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

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to display the first array element, after a string split.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var str = "a,b,c,d,e,f";
  var arr = str.split(",");
  document.getElementById("demo").innerHTML = arr[0];
}
</script>

</body>
</html>

مشاهده ی خروجی کد در ادیتور آنلاین جاوا اسکریپت.

نکته ی اول: اگر به پارامتر تابع چیزی ندهید، کل رشته را در ایندکس صفر به عنوان یک عضو ذخیره می کند.

نکته ی دوم: اگر به پارامتر تابع "" را بدهید، آرایه را بر اساس تک تک حروف رشته عضو بندی می کند. مثال:

var txt = "Hello";       // String
txt.split("");           // Split in characters

خروجی این کد به شکل زیر خواهد بود:

H
e
l
l
o

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

امیدوارم از این قسمت استفاده کرده باشید.

در پناه حق

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