Javascript

|

java script

در این مقاله می خواهیم در مورد متغییرهای رشته ای صحبت کنیم.

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

Document.write(“hello word … <br> “ )

Hello word رو در صفحه چاپ میکردیم.

در اینجا ما ۲ تا تگ به صفحه اضافه میکنیم و عملیات رشته ای رو بر روی این تگ ها انجام میدیم.

<button id=”btn1”> button1 </button>

<p id=”p1”> Im a test paragraph </p>

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

<script type=”text/javascript”>

Str1=”js string”;

</script>

قرار میدهیم و می خواهیم این مقدار در ابتدای hello word قرار بدیم و برای چسبوندن رشته ها از اپراتور + استفاده میکنیم.

نکته: اپراتور + اگر دو عملگر عددی باشه با هم جمع میکنه و اگر دو عملوند و یا یکی stringi باشند به هم میچسباند.

Document.write( str1 + “ hello word … <br> “ )

حال میخواهیم ایدی یک تگ رو دریافت کنه و به انتهای اون تگ Str دلخواه ما رو اضافه کنه

<button id=”btn1” oneclick=”appendString(‘btn1’ , ‘hello’) “ > button1 </button>

<p id=”p1” oneclick=”appendString(‘p1’ , ‘sallam) “ > Im a test paragraph </p>

<script type=”text/javascript”>

Str1=”js string”;

Document.write( str1 + “ hello word … <br> “ );

Function appendString(id , str ) {

Temp=document.getElementById( id) .innerHTML ;

Document.getElementById(id) .innerHTML= temp + “ “ + str ;

}

در نتیجه این کد میبینیم که به ازای هر کلیک بر روی button1 یک hello به انتهای ان اضافه میشود.و اگر روی پاراگراف بزنیم میبینیم که متن Sallam اضافه می شود.

حال میخواهیم چند تا از متد های رشته ها را برای شما تعریف کنیم.

میخواهیم تمام کاراکتر ها را به حروف بزرگ تبدیل کند.

<button id=”btn1”> button1 </button>

<p id=”p1”> im a test paragraph </p>

<script type=”text/javascript”>

P1cintent=document.get.ElementById(“p1”) .innerHTML;

Document.getElementById(“ p1” ) .innerHTML=p1content.toUpperCase() ;

</script>

یا به حروف کوچک تبدیل میکنیم.

<button id=”btn1”> button1 </button>

<p id=”p1”> im a test paragraph </p>

<script type=”text/javascript”>

P1cintent=document.get.ElementById(“p1”) .innerHTML;

Document.getElementById(“ p1” ) .innerHTML=p1content.toLowerCase() ;

</script>

متد بعدی indexof هست متدی که برای جستجودر رشته ها استفاده میشه.

<button id=”btn1”> button1 </button>

<p id=”p1”> im a test paragraph </p>

<script type=”text/javascript”>

P1content=document.getElementById(“p1”) .innerHtml;

Alert(p1Content.indexOF(“I’m”) )

در واقع index اون رو جستجو میکنه و به ما میده. برای مثال در بالا خرجی صفر می شود یعنی position کلمه IM که در موردش سرچ کردم صفر هست.

نکته: متن ها به بزرگ و کوچک بودن حروف حساس است.

اگر یک سری کاراکتر که در متن وجود نداشته باشه سرچ کنیم مقدار -1 نشان داده می شود.

یک تابع lastIndexOf() هم وجود داره که از آخر شروع به جستجو میکنه.

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

<button id=”btn1”> button1 </button>

<p id=”p1”> im a test paragraph </p>

<script type=”text/javascript”>

P1content=document.getElementById(“p1”) .innerHtml;

Alert(p1Content.charAt(5) )

تابع substr یک زیر رشته را از رشته ای که ما مد نظر هست برمیگردونه.در اینجا ما رشته p1.content رو داریم و حال میخواهیم از اول رشته تا پایان کلمه text رو برگردونیم.

<button id=”btn1”> button1 </button>

<p id=”p1”> im a test paragraph </p>

<script type=”text/javascript”>

P1content=document.getElementById(“p1”) .innerHtml;

Alert(p1Content.substr(0 , 10) )

</script>

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

در اینجا به جای test مقدار dotine رو جایگزین میکنیم.

<button id=”btn1”> button1 </button>

<p id=”p1”> im a test paragraph </p>

<script type=”text/javascript”>

P1content=document.getElementById(“p1”) .innerHtml=p1Content.replace(“test” , “dotine”)

</script>

حال اگر چند کلمه test داشته باشیم کلمه dotine تنها جایگزین test اول می شود و اگر بخواهیم تمامی کلمات test جاگزین شود باید از حلقه ها استفاده کنیم و چندین بار replace رو صدا بزنیم.

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
نظر بدهید