JavaScriptاستفاده از توابع رشته ها در
توابع این امکان را فراهم میکنند که بتوانیم خروجی های مدنظرمان را راحت تر دریافت کنیم. در ادامه با توابعی که مربوط به رشته متون میشوند بیشتر آشنا میشویم.
length تابع
- اگر قصد دارید طول یک رشته را محاسبه کرده و بدانید آن رشته از چه تعداد کاراکتر تشکیل شده میتوانید از دستور length استفاده کنید. البته توجه کنید که فضای خالی بین کاراکترها نیز شمرده خواهد شد.
نتیجه مثال زیر 12 خواهد بود.
<html>
<body>
<p id=“demo”></p>
<script>
let text = “Hello world!”;
document.getElementById(“demo”).innerHTML = text.length;
</script>
</body>
</html>
slice تابع
- این تابع به ما کمک میکند بخشی از رشته متن را که نیاز داریم از کل رشته استخراج کنیم.
- دو تابع substring و substr نیز همین کار را انجام میدهند.
نحوه استفاده از این سه تابع به صورت زیر است:
slice(start, end)
substring(start, end)
substr(start, length)
- دقت کنید که شمارش کاراکترها از صفر شروع میشود.
- اگر از اعداد منفی برای مشخص کردن موقعیت کاراکترها استفاده شود باید از انتهای رشته به ابتدا شمارش انجام شود.
- اگر بجای دو مقدار به عنوان موقعیت مکانی شروع و پایان یا شروع و طول تنها از یک مقدار استفاده شود شمارش از ابتدای رشته انجام میشود و آن تک مقدار درواقع موقعیت کاراکتر نهایی را مشخص میکند.
در مثال زیر رشته کامل !Hello every body است که ما با استفاده از سه تابع مذکور رشته every body را استخراج کرده و نمایش داده ایم.
<html> <body>
<p id=“demo1”></p> <p id=“demo2”></p> <p id=“demo3”></p> <p id=“demo4”></p> <script> let str = “Hello Every Body!”; document.getElementById(“demo1”).innerHTML = str.slice(6,16); document.getElementById(“demo2”).innerHTML = str.substring(6,16); document.getElementById(“demo3”).innerHTML = str.substr(6,10); document.getElementById(“demo4”).innerHTML = str.slice(-12,-1);
</script> </body> </html>
Replace تابع
- این تابع یک مقدار را جایگزین یک مقدار خاص میکند.
- اگر مقداری که قرار است تغییر کند بیشتر از یکبار در رشته تکرار شده باشد، اولین مقدار با مقدار مدنظر ما جایگزین میشود و سایر مقادیر مشابه به صورت قبلی باقی میمانند. ولی اگر میخواهید تمام کلمات مشابه تغییر کنند از g/ باید استفاده کنید.
- این تابع به حروف حساس است یعنی اگر کلمه ای به لاتین با حروف بزرگ نوشته شده باشد و تابع ما به دنبال آن کلمه با حروف کوچک باشد این جایگزینی انجام نخواهد شد. اگر میخواهید این حساسیت وجود نداشته باشد از i/ استفاده کنید.
<html> <body> <button onclick=“myFunction()”>Try it</button> <p id=“demo1”>This is a example!</p> <p id=“demo2”>This is a example!</p> <p id=“demo3”>This is a example and example!</p>
<script> function myFunction() { let text1 = document.getElementById(“demo1”).innerHTML; document.getElementById(“demo1”).innerHTML = text1.replace(“example”,“replacement”);
let text2 = document.getElementById(“demo2”).innerHTML; document.getElementById(“demo2”).innerHTML = text2.replace(/EXAMPLE/i,“replacement”);
let text3 = document.getElementById(“demo3”).innerHTML; document.getElementById(“demo3”).innerHTML = text3.replace(/example/g,“replacement”); } </script>
</body> </html>
ToUpperCase و ToLowerCase تابع
- تابع ToUpperCase همانطور که از اسمش هم مشخص است حروف لاتین را به صورت حروف بزرگ مینویسد.
- تابع ToLowerCase نیز برای کوچک نویسی حروف متن مورد استفاده قرار میگیرد.
<html> <body> <button onclick=“myFunction()”>Try it</button> <p id=“demo1”>Hello World!</p> <p id=“demo2”>Hello World!</p>
<script> function myFunction() { let text1 = document.getElementById(“demo1”).innerHTML; document.getElementById(“demo1”).innerHTML = text1.toUpperCase();
let text2 = document.getElementById(“demo2”).innerHTML; document.getElementById(“demo2”).innerHTML = text2.toLowerCase(); } </script></body> </html>
contact تابع
- این تابع وظیفه دارد دو یا بیشتر رشته متون را به یکدیگر متصل کند.
- البته برای اتصال دو دسته رشته متنی میتوان از + نیز استفاده کرد.
در مثال پیش رو هر دو حالت ممکن برای اتصال دو دسته رشته متنی نمایش داده شده است.
<html> <body> <p id=“demo1”></p> <p id=“demo2”></p> <script> let text1 = “Hello”; let text2 = “World!”; let text3 = text1.concat(” “,text2); document.getElementById(“demo1”).innerHTML = text3;
let text = “Hello”+ ” “ + “World”; document.getElementById(“demo2”).innerHTML = text; </script> </body> </html>
trim تابع
این تابع وظیفه پاک کردن فضاهای خالی در یک رشته متن را بر عهده دارد.
در مثال زیر دو مقدار برای طول رشته چاپ میشود، یکی برای حالتی که از تابع trim استفاده نشده و درنتیجه فضاهای خالی در مقدار طول رشته تاثیر گذار بوده و دیگری حالتی که از تابع trim استفاده شده و مقدار طول رشته با حذف فضاهای خالی محاسبه شده است.
<html> <body> <p id=“demo”></p>
<script> let text1 = ” Hello World! “; let text2 = text1.trim();
document.getElementById(“demo”).innerHTML = “Length text1=” + text1.length + “<br>Length2 text2=” + text2.length;
/* The result of code is:
Length text1=25 Length2 text2=15 */ </script> </body> </html>
padStart و padEnd توابع
- از این دو تابع به منظور ساخت padding در ابتدا یا انتهای رشته استفاده میشود.
- دقت کنید که این تابع فقط مخصوص رشته متون است و اگر قصد دارید آن را بر روی اعداد یا هر نوع دیگری از داده اعمال کنید ابتدا باید با استفاده از ()toString آن را به رشته تبدیل کنید.
<html> <body> <p id=“demo1”></p> <p id=“demo2”></p> <script> let text1 = “5”; document.getElementById(“demo1”).innerHTML = text1.padStart(4,“0”); //The result is: 0005
let text2 = “5”; document.getElementById(“demo2”).innerHTML = text2.padEnd(4,“x”); //The result is: 5xxx </script> </body> </html>
charAt و charCodeAt توابع
- این دو تابع با گرفتن عددی که بیانگر موقعیت است به عنوان ورودی، کاراکتری که در موقعیت مورد نظر در رشته واقع شده است را چاپ میکنند.
- تابع charAt کاراکتر را چاپ میکند اما charCodeAt کد مربوط به کاراکتر را چاپ میکند.
- با استفاده از خاصیت آرایه ای نیز میتوان کاراکتر موجود در موقعیت مشخص را چاپ کرد.
<html> <body> <p id=“demo1”></p> <p id=“demo2”></p> <p id=“demo3”></p> <script> var text1 = “HELLO WORLD”; document.getElementById(“demo1”).innerHTML = text1.charAt(0); \\The result is: H
let text2 = “HELLO WORLD”; document.getElementById(“demo2”).innerHTML = text2.charCodeAt(0); \\The result is: 72
var str = “HELLO WORLD”; document.getElementById(“demo3”).innerHTML = str[0]; \\The result is: H </script> </body> </html>
split تابع
- این تابع یک رشته را براساس کاراکتری که به عنوان جدا کننده درنظر گرفته میشود به آرایه تبدیل میکند.
در مثال زیر کاما به عنوان جداکننده اجزای آرایه درنظر گرفته شدند و در ورودی تابع تعریف شدند. درنهایت عناصر جدا شده به عنوان عناصر آرایه ذخیره شدند.
<html> <body> <p id=“demo”></p> <script> let text = “a,b,c,d,e,f”; const myArray = text.split(“,”); document.getElementById(“demo”).innerHTML = myArray[0]; The result is: a </script> </body> </html>