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

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

معرفی اپراتورهای انتساب (Assignment)

جدول زیر اپراتورهای انتساب را با مثال به شما نشان می دهد:

اپراتور	مثال	کد همانند¹
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

1- توضیح کد همانند: اپراتورهایی که می بینید ممکن است برای شما آشنا نباشد و یا مفهوم آن را درک نکنید. کد همانند، معادل اپراتور را به صورت یک کد ساده برای شما می نویسد تا متوجه مفهوم اپراتور بشوید. به طور مثال عبارت x /= y شاید در نگاه اول برای شما گنگ باشد اما زمانی که به x = x / y نگاه کنید به مفهوم آن پی می برید، یعنی X را بر Y تقسیم کن.

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

احتمالا برایتان سوال پیش آمده است که آیا حتما باید از این اپراتور ها استفاده کنیم؟ خیر، اجباری در استفاده از آن ها نیست و شما می توانید از همان "کد همانند" در پروژه های خود استفاده کنید.

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

سوال: من اپراتورهایی شبیه به =** نیز دیده ام. چرا آن ها را در جدول نمی بینم؟

پاسخ: اپراتورهای انتساب دیگری نیز در جاوا اسکریپت وجود دارند که تقریبا از آن ها استفاده ای نمی شود مگر در سطوح بسیار پیشرفته و برای پروژه های بسیار بزرگ!

از طرفی حفظ کردن تمام اپراتور ها کار درستی نیست و اپراتورهای اصلی در همین جدول برای شما آورده شده اند.

به طور مثال اپراتور =** هنوز به صورت آزمایشی در ECMAScript 2016 (یا ES7) معرفی شده و هنوز در بسیاری از مرورگر ها به طور یکسان عمل نمی کند و ثابت نیست. بنابراین اصلا از آن استفاده نکنید.

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

توجه کنید که بسیاری از اپراتورهای عجیب و غریبی که می بینید ممکن است مربوط به عملیات های بیتی (bitwise) باشد که بسیار پیشرفته هستند.

برای آشنایی شما با این اپراتور ها، چند عدد از آن ها را در یک مثال برایتان نوشته ام:

<!DOCTYPE html>
<html>
<body>

<h2>The Assignment Operator</h2>

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

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

<p id="demo3"></p>

<p id="demo4"></p>

<p id="demo5"></p>


<script>

var x = 10;
x += 5;
document.getElementById("demo1").innerHTML = x;

var x = 10;
x -= 5;
document.getElementById("demo2").innerHTML = x;

var x = 10;
x *= 5;
document.getElementById("demo3").innerHTML = x;

var x = 10;
x /= 5;
document.getElementById("demo4").innerHTML = x;

var x = 10;
x %= 5;
document.getElementById("demo5").innerHTML = x;

</script>

</body>
</html>

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

اپراتورهای رشته ای (string)

شما می توانید از اپراتور + برای به هم چسباندن دو رشته استفاده کنید. به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Operators</h2>

<p>The + operator concatenates (adds) strings.</p>

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

<script>
var txt1 = "Roxo";
var txt2 = "Academy";
document.getElementById("demo").innerHTML = txt1 + " " + txt2;
</script>

</body>
</html>

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

همچنین می توانید به حالت اختصاری (زمانی که نمی خواهید دو متغیر متفاوت را ادغام کنید) از اپراتور =+ استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Operators</h2>

<p>The assignment operator += can concatenate strings.</p>

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

<script>
txt1 = "JavaScript Tutorials with ";
txt1 += "Amir Zouerami at Roxo Academy";
document.getElementById("demo").innerHTML = txt1;
</script>

</body>
</html>

خروجی این کد، عبارت "JavaScript Tutorials with Amir Zouerami at Roxo Academy" خواهد بود. می توانید خروجی این کد را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.

نکته ی اول: مگر اپراتور + یک اپراتور محاسباتی نبود؟ چطور اینجا به عنوان یک اپراتور رشته ای معرفی می شود؟ اپراتور ها در جاوا اسکریپت بر اساس کاری که انجام می دهند نام گذاری و دسته بندی می شوند و شکل ظاهری شان.

بنابراین اپراتور + اگر با اعدا سر و کار داشته باشد محاسباتی و اگر با رشته ها سر و کار داشته باشد رشته ای خواهد بود.

نکته ی دوم: اپراتور + در هنگام کار با اعداد عملیات جمع (addition) را انجام می دهد اما در هنگام کار با رشته ها عملیات الحاق یا پیوند زدن (concatenation) را انجام می دهد.

بنابراین اگر به عبارت concatenation یا concatenate برخورد کردید باید بدانید که مربوط به اپراتور + است.

سوال: با توجه به آنچه در این دو نکته گفته شد، اگر یک عدد و یک رشته را با اپراتور + وارد یک عملیات کنیم، اپراتور + به عنوان اپراتور جمع عمل می کند یا یک اپراتور رشته ای؟

پاسخ این سوال بسیار آسان است. آیا می توانید راهی را تصور کنید که بتوان عدد 3 را با عبارت «وعده ی غذایی» جمع زد؟! قطعا جواب شما منفی است. هیچ راهی برای انجام این عملیات خیالی وجود ندارد. حالا سوال دیگری می پرسم، آیا می توان رشته ی 3 را با عبارت «وعده ی غذایی» ادغام کرد؟! بله که می شود! به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Operators</h2>

<p>Adding a number and a string, returns a string.</p>

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

<script>

var x = 5 + 5;

var y = "5" + 5;

var z = "Hello" + 5;

document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;

</script>

</body>
</html>

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

اگر دو عدد با اپراتور + کنار هم قرار گیرند، عبارت ما یک عملیات ریاضی خواهد بود.
اگر یک عدد و یک رشته با اپراتور + کنار هم قرار گیرند، عبارت ما یک عملیات رشته ای خواهد بود چرا که جاوا اسکریپت عدد ما را به صورت خودکار تبدیل به یک رشته می کند تا بتواند جوابی به درخواست شما بدهد.
اگر دو رشته با اپراتور + کنار هم قرار گیرند، عبارت ما یک عملیات رشته ای خواهد بود.

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

یا حق.