پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

ورود / عضویت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

۲۲
آبان

جلسه ۱۶ : توابع کار با رشته ها در جاوا اسکریپت

دسته‌بندی‌ها :

جلسه ۱۶ : توابع کار با رشته ها در جاوا اسکریپت

جزئیات
نوع محتواآموزش تصویری

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

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

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

فهرست

Properties و متد های String

داده های نوع اولیه مثل “hello” نمی توانند پروپرتی و تابعی داشته باشند زیرا شئ نیستند.

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

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

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

مثال : طول رشته ها

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length; // 26

1 2	var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length; // 26

خودتان امتحان کنید »

پیدا کردن مکان یک رشته در رشته ای دیگر

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

مثال : متد indexof

var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate"); // 7

1 2	var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate"); // 7

خودتان امتحان کنید »

توجه داشته باشید که شماره اندیس ۰ می باشد و در نتیجه شمارش از صفر شروع می شود.

تابع ()lastIndexOf موقعیت اولین کاراکتر آخرین رشته مشخص شده را بر می گرداند:

مثال : متد lastindexof

var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate"); // 21

1 2	var str = "Please locate where 'locate' occurs!"; var pos = str.lastIndexOf("locate"); // 21

خودتان امتحان کنید »

هر دو تابع فوق اگر رشته را پیدا نکردن -۱ را بر میگردانند.

مثال : نتیجه پیدا نکردن

var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("John");

1 2	var str = "Please locate where 'locate' occurs!"; var pos = str.lastIndexOf("John");

خودتان امتحان کنید »

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

مثال : مثال دوم

var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate",15);

1 2	var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate",15);

خودتان امتحان کنید »

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

از تابع ()search برای جستجوی رشته در دشته ای دیگر استفاده می شود.
این تابع نیز موقعیت اولین کاراکتر رشته مورد نظر را بر می گرداند.

مثال : جستجوی یک رشته در یک رشته ی دیگر

var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate"); استخراج بخشی از رشته

1 2	var str = "Please locate where 'locate' occurs!"; var pos = str.search("locate"); استخراج بخشی از رشته

خودتان امتحان کنید »

۳ تابع برای استخراج متن از رشته در جاوا اسکریپت وجود دارد:

(slice(start, end
(substring(start, end
(substr(start, length

تابع ()slice

این تابع بخش از رشته را استخراج کرده و به عنوان یک رشته جدید بر می گرداند.

تابع دو پارامتر می گیرد: اندیس آغازین (start) و اندیس پایانی (end)

مثال:

مثال : تابع slice

var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);

1 2	var str = "Apple, Banana, Kiwi"; var res = str.slice(7, 13);

خودتان امتحان کنید »

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

مثال :

Banana

1

Banana

اگر پارامتر ها منفی باشند، شمارش از انتهای رشته شروع می شود:

مثال : نمونه دوم تابع slice

var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6); // banana

1 2	var str = "Apple, Banana, Kiwi"; var res = str.slice(-12, -6); // banana

خودتان امتحان کنید »

اگر پارامتر دوم end را مشخص نکنید، تابع رشته ای از موقعیت مشخص شده تا انتهای رشته را بر می گرداند.

این مثال یک بخشی از یک رشته را از موقعیت ۱۲ -۶ به موقعیت -۶ منتقب=ل می کند :

مثال : جدا کردن بخشی از رشته

var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6);

1 2	var str = "Apple, Banana, Kiwi"; var res = str.slice(-12, -6);

خودتان امتحان کنید »

اگر پارامتر دوم را حذف کنید، متد دیگر بقیه ی رشته را برش می دهد:

مثال : جدا کردن بخشی از رشته

var res = str.slice(7);

1	var res = str.slice(7);

خودتان امتحان کنید »

یا از انتهای شمارش:

مثال : جدا کردن ازانتها

var res = str.slice(-12);

1	var res = str.slice(-12);

خودتان امتحان کنید »

نکته : موقعیت های منفی در Internet Explorer 8 و قبل از آن کار نمی کنند.

تابع ()substring

این تابع مثل تابع ()slice می باشد با این تفاوت که پارامتر منفی نمی تواند بگیرد.

مثال : متد substring

var str = "Apple, Banana, Kiwi";
var res = str.substring(7, 13);

1 2	var str = "Apple, Banana, Kiwi"; var res = str.substring(7, 13);

خودتان امتحان کنید »

اگر شما حذف پارامتر دوم را انجام دهید، ()substring بقیه رشته را جداخواهد کرد.

تابع ()substr

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

مثال : متد substr

var str = "Apple, Banana, Kiwi";
var res = str.substr(7, 6); // banana

1 2	var str = "Apple, Banana, Kiwi"; var res = str.substr(7, 6); // banana

خودتان امتحان کنید »

اگر شما حذف پارامتر دوم را انجام دهید، ()substring بقیه رشته را جدا خواهد کرد.

مثال : متد substr1

var str = "Apple, Banana, Kiwi";
var res = str.substr(7);

1 2	var str = "Apple, Banana, Kiwi"; var res = str.substr(7);

خودتان امتحان کنید »

اگر پارامتر اول منفی سمت از پایان رشته محاسبه می شود.

مثال : پارامتر منفی

var str = "Apple, Banana, Kiwi";
var res = str.substr(-4);

1 2	var str = "Apple, Banana, Kiwi"; var res = str.substr(-4);

خودتان امتحان کنید »

تابع replace در جاوا اسکریپت

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

مثال : متد replace

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "PVLearn");

1 2	str = "Please visit Microsoft!"; var n = str.replace("Microsoft", "PVLearn");

خودتان امتحان کنید »

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

مثال :

Please visit PVLearn!

1	Please visit PVLearn!

تابع replace در جاوا اسکریپت رشته اصلی را تغییر نخواهد داد و نتیجه را در یک رشته جدید برمی گرداند.

تابع replace در جاوا اسکریپت به صورت پیش فرض اولین متن یافت شده را جایگزین می کند.

برای جایگزین کردن تمام رشته های پیدا شده از g/ استفاده کنید:

مثال : جایگزینی رشته ها

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

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

خودتان امتحان کنید »

به طور پیش فرض، تابع ()replace حساس است. نوشتن مایکروسافت (با حروف بزرگ) کار نمی کند:

مثال : حساسیست به حروف

str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "pvlearn");

1 2	str = "Please visit Microsoft!"; var n = str.replace("MICROSOFT", "pvlearn");

خودتان امتحان کنید »

برای رفع حساسیت به حروف از یک regular expression با فرمت i/ استفاده کنید :

مثال : رفع حساسیت به حروف

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

1 2	str = "Please visit Microsoft!"; var n = str.replace(/MICROSOFT/i, "W3Schools");

خودتان امتحان کنید »

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

برای جایگزینی تمام کاراکترهای مچ شده از یک regular expression با فرمت g/ استفاده کنید :

مثال : جایگزینی تمام نتایج مچ شده

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

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

خودتان امتحان کنید »

تبدیل حروف کوچک به بزرگ در جاوا اسکریپت و بالعکس

تابع ()toUpperCase تمام حروف یک رشته را به حروف بزرگ تغییر می هد:

مثال : تبدیل به حروف بزرگ

 var text1 = "Hello World!";       // String
var text2 = text1.toUpperCase();  // text2 is text1 converted to upper

1 2	var text1 = "Hello World!"; // String var text2 = text1.toUpperCase(); // text2 is text1 converted to upper

خودتان امتحان کنید »

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

مثال :

HELLO WORLD!

1	HELLO WORLD!

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

مثال : تبدیل به حروف کوچک

 var text1 = "Hello World!";       // String
var text2 = text1.toLowerCase();  // text2 is text1 converted to lower

1 2	var text1 = "Hello World!"; // String var text2 = text1.toLowerCase(); // text2 is text1 converted to lower

خودتان امتحان کنید »

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

مثال :

hello world!

1	hello world!

متد ()concat

مثال : ادغام دو یا چند رشته

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

1

2

3

var text1 = "Hello";

var text2 = "World";

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

خودتان امتحان کنید »

متد ()concat می تواند مورد استفاده قرار گیرد به جای عملگر + ، این دو خط کد یک کار را انجام می دهد:

مثال :

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

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

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

تابع ()trim

این تابع تمام کاراکتر های خالی space را از رشته حذف می کند:

مثال : تابع trim

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

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

خودتان امتحان کنید »

نکته : متد ()String.trim در Internet Explorer 8 و یا نسخه ی قدیمی تر پشتیبانی نمی شود.

اگر شما نیاز به استفاده از اینترنت اکسپلورر ۸ دارید، می توانید از String.replace به همراه عبارت زیر استفاده کنید:

مثال : جایگزینی در مرورگر اینترنت اکسپلورر

var str = "       Hello World!        ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

1 2	var str = " Hello World! "; alert(str.replace(/^[\s\uFEFF\xA0]+\|[\s\uFEFF\xA0]+$/g, ''));

خودتان امتحان کنید »

شما همچنین می توانید به جای راه حل فوق به اضافه تر و تمیز تابع برای String.prototype جاوا اسکریپت استفاده کنید:

مثال : متد String.prototype

if (!String.prototype.trim) {
    String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = "       Hello World!        ";
alert(str.trim());

1

2

3

4

5

6

if (!String.prototype.trim) {

String.prototype.trim = function () {

return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

};

var str = " Hello World! ";

alert(str.trim());

خودتان امتحان کنید »

بدست آوردن کاراکتر در رشته

۳ روش برای استخراج رشته کاراکتر وجود دارد:

(charAt(position
(charCodeAt(position
دسترسی به خصوصیات[]

تابع ()charAt یک کاراکتر با موققعیت مشخص شده را در یک رشته بر می گرداند:

مثال : متد charAt

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

1 2	var str = "HELLO WORLD"; str.charAt(0); // returns H

خودتان امتحان کنید »

متد ()charCodeAt

متد ()charCodeAt در یونیکد کاراکتر در فهرست مشخص شده را بازمی گرداند:

متد بازگرداندن کد UTF-16 (یک عدد صحیح است بین ۰ و ۶۵۵۳۵):

مثال : متد charCodeAt

var str = "HELLO WORLD";

str.charCodeAt(0);         // returns 72

1

2

3

var str = "HELLO WORLD";

str.charCodeAt(0); // returns 72

خودتان امتحان کنید »

خصوصیت access

۵ ECMAScript اجازه می دهد تا با استفاده از براکت [] به کاراکتر مورد نظر در رشته دسترسی پیدا کنید:

مثال : دسترسی به یک کاراکتر مشخص در رشته

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

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

خودتان امتحان کنید »

دسترسی به خصوصیات ممکن است کمی غیر قابل پیش بینی باشد:

در اینترنت اکسپلورر ۷ و یا اوایل کار نمی کند.
باعث می شود رشته های شبیه به آرایهباشند.(اما آرایه نیست).
اگر کاراکتری پیدا نشود، در حالی که [] نوع undefined را بازمی گرداند ()charAt رشته ی خالی، بازمی گرداند.
فقط خواندنی است، پس “str[0] = “A خطا می دهد.

مثال : مثال

var str = "HELLO WORLD";
str[0] = "A";             // Gives no error, but does not work
str[0];

1

2

3

var str = "HELLO WORLD";

str[0] = "A"; // Gives no error, but does not work

str[0];

خودتان امتحان کنید »

اگر می خواهید در قالب آرایه با رشته ها کار کنید، شما می توانید آن را به آرایه ای تبدیل کنید.

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

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

مثال : متد 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[5];
}
</script>

</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!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[5];

}

</script>

</body>

</html>

خودتان امتحان کنید »

خروجی کد بالا کاراکتر a می باشد.

اگر جداکننده “” باشد، آرایه برگشتی یک آرایه تک کاراکتری خواهد بود:

مثال : نمونه دوم split

<!DOCTYPE html>
<html>
<body>

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

<script>
var str = "Hello";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
    text += arr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<body>

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

<script>

var str = "Hello";

var arr = str.split("");

var text = "";

var i;

for (i = 0; i < arr.length; i++) {

text += arr[i] + "<br>"

}

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

خودتان امتحان کنید »

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

مثال :

H
e
l
l
o

1

2

3

4

5

H

e

l

l

o

اگر جدا کننده مشخص شده در رشته وجود نداشته باشد، کل رشته در اندیس ۰ قرار می گیرد:

مثال :

<!DOCTYPE html>
<html>
<body>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var str = "Hello";
var arr = str.split(",");
var text1 = "";
var text2 = "";
var i;
text1 = arr[0];
text2 = arr[1];

document.getElementById("demo1").innerHTML = text1;

document.getElementById("demo2").innerHTML = text2;
</script>

</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<body>

<p id="demo1"></p>

<p id="demo2"></p>

<script>

var str = "Hello";

var arr = str.split(",");

var text1 = "";

var text2 = "";

var i;

text1 = arr[0];

text2 = arr[1];

document.getElementById("demo1").innerHTML = text1;

document.getElementById("demo2").innerHTML = text2;

</script>

</body>

</html>

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

مثال :

Hello

undefined

1

2

3

Hello

undefined

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

QR: جلسه ۱۶ : توابع کار با رشته ها در جاوا اسکریپت

به اشتراک بگذارید

آموزش برنامه نویسی javascript ,آموزش برنامه نویسی جاوا اسکریپت ,کار با توابع رشته ای در جاوا اسکریپت ,متد های string در جاوا اسکریپ

دیدگاه کاربران

تعداد دیدگاه : 2

icqx
دی ۲۰, ۱۳۹۸
به شدت جای خالی دوره ی آموزشی ‘ تایپ اسکریپت ‘ حس میشه ! , توی اینترنت ریخته ولی اونی که pvlearn بسازه یه چی دیگست !!!!
پاسخ دادن
- پی وی لرن
  دی ۲۰, ۱۳۹۸
  ممنون، نظر لطف شماست
  در برنامه قرار خواهیم داد
  پاسخ دادن