انواع داده ها (data types) در جاوا اسکریپت: رشته ها

javascript-string-datatype

با سلام، مبحث امروز ما data types یا انواع داده ها است. متغیر های جاوا اسکریپت می توانند انواع مختلفی از داده را در خود ذخیره کنند، مثل اعداد، رشته ها، اشیاء و غیره:

var length = 16;                               // داده از نوع عدد
var lastName = "Johnson";                      // داده از نوع رشته
var x = {firstName:"John", lastName:"Doe"};    // داده از نوع شیء

مفهوم d‎ata type ها

در زبان های برنامه نویسی، مبحث  data type بسیار مهم است. چرا؟ ما برای اینکه بتوانیم با متغیر ها کار کنیم باید از نوع آن ها هم چیز هایی بدانیم. بدون مبحث انواع داده کامپیوتر چطور می خواهد کد زیر را حل کند؟

var x = 16 + "Volvo";

آیا جمع زدن کلمه ی volvo با عدد 16 اصلا معنی می دهد؟ آیا این کار منطقی است؟ مطمئنا جواب شما هم منفی است اما جاوا اسکریپت با استفاده از انواع مبحث داده این مشکل را حل می کند و این کد را به شکل زیر در نظر می گیرد:

var x = "16" + "Volvo";

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a number and a string, JavaScript will treat the number as a string.</p>

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

<script>
var x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

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

البته نباید از یک نکته ی مهم غافل شد، آن هم این است که جاوا اسکریپت کد ها را از چپ به راست تفسیر و اجرا می کند بنابراین اگه به مثال زیر برخورد کنیم:

var x = 16 + 4 + "Volvo";

خروجی آن عبارت "20Volvo" خواهد بود!

اما اگر به عبارت زیر برخورد کنیم:

var x = "Volvo" + 16 + 4;

خروجی آن عبارت "Volvo164" خواهد بود!

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

این مسئله بدان معنی است که یک متغیر می تواند انواع مختلف داده را قبول کند:

var x;           // نوع متغیر ها تعریف نشده است
x = 5;           // متغیر ما در اینجا از نوع عدد است
x = "John";      // متغیر ما در اینجا از نوع رشته است

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

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

یک رشته، توالی خاصی از کاراکتر ها است، به طور مثال "روکسو" یا "Roxo" یا حتی "5" نیز رشته هستند. رشته ها را باید بین single quotation یا double quotation قرار دهید. مثال:

var carName1 = "Volvo XC60";   // Using double quotes
var carName2 = 'Volvo XC60';   // Using single quotes

اگر نمی دانید single quote یا double quote چیست به این لینک رفته و به جدولی که در مقاله است مراجعه کنید.

رشته های جاوا اسکریپت معمولا برای ذخیره و دستکاری متن ها استفاده می شوند و تعداد کاراکتر های داخل quotation (کوتیشن) می توانند صفر یا بیشتر باشد.

شما می توانید در داخل یک رشته از علامت های quotation استفاده کنید، البته به شرطی که با علامت های اصلی رشته یکی نباشند. به مثال زیر توجه کنید:

var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';

اگر از single quote برای مشخص کردن رشته استفاده شده است نمی توان داخل آن دوباره از single quote استفاده کرد.

آیا راهی برای دور زدن این مشکل وجود دارد؟ بله! باید کاراکتر مورد نظر را escape کنید (یعنی فراری دهید!) برای این کار از علامت \ (بک اسلش) قبل از علامت quotation استفاده کنید. مثال:

var answer2 = "He is called \"Johnny\"";
var answer3 = 'He is called "Johnny"';

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

کد خروجی نام
\' ' Single quote
\" " Double quote
\\ \ Backslash

دسترسی به طول یک رشته

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Properties</h2>

<p>The length property returns the length of a string:</p>

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

<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>

</body>
</html>

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

شکستن خطوط کد در جاوا اسکریپت

در بعضی از زبان های برنامه نویسی مثل PHP شما می توانید کد را از وسط بشکنید (یعنی اینتر بزنید و بقیه ی کد را به خط بعد منتقل کنید). برنامه نویسان معمولا این کار را برای منظم تر شدن کد ها می کنند، مخصوصا زمانی که یک خط کد خاص بسیار طولانی شده است و برای دیدن آن باید از اسکرول افقی استفاده کرد.

جاوا اسکریپت نیز تقریبا چنین قابلیتی دارد. شما می توانید خطوط کد را در جاوا اسکریپت بعد از اپراتور بشکنید. مثال:

document.getElementById("demo").innerHTML =
"Hello Roxo!";

اما اگر بخواهید کدی را از وسط یک رشته بشکنید باید آن را escape کنید:

document.getElementById("demo").innerHTML = "Hello \
Roxo!";

نکته: برخی از مرورگر ها از کاراکتر \ پشتیبانی نمی کنند، بنابراین حواستان را جمع کنید!

راه دیگری که می توانید یک رشته را در خطی از کد قطع کنید استفاده از علامت + است:

document.getElementById("demo").innerHTML = "Hello " + 
"Roxo!";

نکته: ما در این مثال ها، رشته ها را شکستیم نه خطوط کد را! به عبارت دیگر، مثال زیر غلط است:

document.getElementById("demo").innerHTML = \ 
"Hello Roxo!";

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

در پناه حق.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما (3 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محمد
19 آذر 1399
سلام خیلی ممنون از سایت خوبتون مخصوصا اقای زوارمی واقعا دستتون درد نکنه و خسته نباشید . فقط یه خواهش دارم اگ میتونین Night Mode اضافه کنید به سایتتون اکثر برنامه نویسا شب کار میکنن و میخونن آموزش ها رو اینجوری که صفحه سفیده خیلی چشم رو اذیت میکنه شبا . با تشکر

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
19 آذر 1399
با سلام سپاس از نظر خوبتون. حتما در نسخه‌ی جدید سایت پیشنهاد شما لحاظ خواهد شد.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

ARMAN DAVOODI
04 فروردین 1399
کل کارهاتون عالیه من تابحال 5 تا دوره جاوا اسکریپت دیدم اما گنگ بودن و زیاد چیزی یاد نگرفتم این بهترینشون بوده

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

parastoo
10 مهر 1398
خروجی این مثال با جوابش متفاوته. لینک جابه‎جا دادید: "خروجی این کد عدد 26 خواهد بود. می توانید این مثال را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید."

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
10 مهر 1398
سلام دوست عزیز بله، متاسفانه مشکل از سمت JSBin هست که باعث شده preview ها روی همدیگه ادغام بشن و از طرفی به بنده اجازه ی ویرایش کد ها بعد از ثبت شدن رو نمیده. البته راه حل ساده ای داره، شما میتونین کد ها رو از همین قسمت کپی و مستقیما توی jsbin پیست کنید تا نتیجه رو ببینین. کد ها رو طوری نوشتیم که بدون نیاز به انجام کار خاصی توی jsbin اجرا میشن.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.