خوش اومدین به چهارمین مقاله از سری مقالات «آموزش مقدماتی جاوااسکریپت». 😊 تو مقالات قبلی، از پایه‌ترین مفاهیم جاوااسکریپت شروع کردیم و یاد گرفتیم متغیرها چطور تعریف می‌شن و چه نوع داده هایی وجود دارن. بعد با ابزارهایی مثل alert، prompt و confirm آشنا شدیم و دیدیم چطور می‌تونیم با کاربر تعامل داشته باشیم.

حالا تو این مقاله می‌خوایم بریم سراغ یه مبحث جذاب به اسم تبدیل نوع داده. جاوااسکریپت یه قابلیت جالب داره که می‌تونه مقادیر مختلف رو به طور خودکار به نوع مناسب تبدیل کنه. اما همیشه هم این کار خودکار جواب نمی‌ده و گاهی خودمون باید دست به کار بشیم و نوع مقادیر رو تغییر بدیم.

توی این مقاله، به سه نوع تبدیل اصلی می‌پردازیم:

• تبدیل به رشته (String Conversion): وقتی بخوایم چیزی رو به صورت متن نمایش بدیم.
• تبدیل به عدد (Numeric Conversion): وقتی بخوایم مقادیر رو به عدد تبدیل کنیم، مخصوصاً برای عملیات ریاضی.
• تبدیل به بولین (Boolean Conversion): وقتی نیاز داریم بدونیم یه مقدار «درسته» یا «نادرست».

آماده اید؟ پس بریم سراغش! 🚀

تبدیل نوع داده (Type Conversion)

توی جاوااسکریپت، خیلی وقت‌ها خود زبان هوشمندانه مقادیر رو به نوع مناسب تبدیل می‌کنه. مثلاً وقتی از alert استفاده می‌کنیم، خود جاوااسکریپت مقدار رو به رشته (string) تبدیل می‌کنه تا بتونه اون رو نمایش بده. یا مثلاً عملیات ریاضی به صورت خودکار مقادیر رو به عدد تبدیل می‌کنن.

اما بعضی وقت ها، لازم می‌شه که خودمون به طور مستقیم یه مقدار رو به نوع داده ی دیگه ای تبدیل کنیم. این جاست که تبدیل نوع داده وارد بازی می‌شه!

صحبت درباره اشیا، فعلاً نه!

توی این مقاله فقط درباره انواع داده ی ساده یا همون "پرایمیتیوها" حرف می‌زنیم. بحث اشیا و نحوه تبدیلشون به داده‌های دیگه رو می‌ذاریم برای بعد، وقتی با اشیا بیشتر آشنا شدیم.

تبدیل به رشته (String Conversion)

تبدیل به رشته زمانی اتفاق میوفته که بخوایم نسخه متنی یه مقدار رو داشته باشیم. مثلاً وقتی از alert استفاده می‌کنیم، جاوااسکریپت مقدار رو به رشته تبدیل می‌کنه تا اون رو نمایش بده.

همچنین می‌تونیم از تابع String(value) استفاده کنیم تا یه مقدار رو به رشته تبدیل کنیم:

let value = true;
alert(typeof value); //  boolean
value = String(value); // حالا مقدار به رشته "true" تبدیل شده
alert(typeof value); //  string

تبدیل به رشته معمولاً خیلی واضح و سرراست انجام می‌شه. مثلاً:

• مقدار false به "false" تبدیل می‌شه.
• مقدار null به "null" تبدیل می‌شه.

به همین سادگی! 😄

نکته: این تبدیل‌ها در بیشتر مواقع دقیق و قابل اعتماد هستن، ولی یادت باشه که همیشه هوشیار باشی و بدونی چه چیزی رو به چی تبدیل می‌کنی.

تبدیل به عدد (Numeric Conversion)

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

مثال: فرض کن می‌خوای دو رشته ی متنی رو تقسیم کنی:

alert("6" / "2"); //  3

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

تبدیل دستی به عدد

اگه بخوایم خودمون مستقیم یه مقدار رو به عدد تبدیل کنیم، می‌تونیم از تابع Number(value) استفاده کنیم. این روش بیشتر زمانی کاربرد داره که داده‌ها رو از منابع متنی (مثل فرم ها) می‌گیریم و انتظار داریم کاربر یه عدد وارد کنه.

مثال:

let str = "123";
alert(typeof str); //  string
let num = Number(str); // مقدار به عدد 123 تبدیل می‌شه
alert(typeof num); //  number

وقتی تبدیل شکست می‌خوره

اگه رشته ای که می‌خوایم به عدد تبدیل کنیم معتبر نباشه (مثلاً حاوی حروف باشه)، نتیجه تبدیل می‌شه NaN (یعنی "Not a Number").

مثال:

let age = Number("یه رشته تصادفی به جای عدد");
alert(age); //  NaN

نکته مهم:

• تبدیل خودکار عدد در عملیات ریاضی خیلی ساده و سرراسته، ولی همیشه بهتره حواست باشه که چی رو داری تبدیل می‌کنی.
• اگه با داده هایی کار می‌کنی که از منابع متنی میاد، بهتره قبل از انجام عملیات ریاضی، اون‌ها رو به عدد تبدیل کنی تا خطاهای غیرمنتظره نگیری.

قوانین تبدیل به عدد (Numeric Conversion)

وقتی یه مقدار رو به عدد تبدیل می‌کنیم، جاوااسکریپت از یه سری قوانین مشخص برای این کار استفاده می‌کنه. بیایید این قوانین رو با هم بررسی کنیم:

مثال ها:

alert(Number("   123   ")); //  123 (فضاهای خالی حذف می‌شن)
alert(Number("123z"));      //  NaN (چون "z" یه عدد نیست)
alert(Number(true));        //  1
alert(Number(false));       //  0

نکته مهم:

• null به 0 تبدیل می‌شه.
• undefined به NaN تبدیل می‌شه.
• بیشتر عملگرهای ریاضی هم به صورت خودکار این تبدیل‌ها رو انجام می‌دن که بعداً بهش می‌رسیم.

تبدیل به Boolean

تبدیل به Boolean یکی از ساده‌ترین نوع تبدیل‌ها تو جاوااسکریپته. این تبدیل معمولاً توی عملیات منطقی اتفاق میوفته (مثل شرط‌ها یا تست ها)، ولی می‌تونیم خودمون هم با استفاده از Boolean(value) این کار رو انجام بدیم.

قانون تبدیل:

مقادیری که به طور شهودی "خالی" یا "بی ارزش" به نظر می‌رسن، تبدیل به false می‌شن:

• 0
• رشته خالی ""
• null
• undefined
• NaN

بقیه مقادیر تبدیل به true می‌شن.

مثال ها:

alert(Boolean(1));         //  true
alert(Boolean(0));         //  false
alert(Boolean("hello"));   //  true (رشته غیرخالی)
alert(Boolean(""));        //  false (رشته خالی)

دقت به رشته ها

• رشته ای با مقدار "0": برخلاف بعضی زبان‌ها مثل PHP که "0" رو false می‌دونن، تو جاوااسکریپت هر رشته غیرخالی (حتی "0") به true تبدیل می‌شه.

مثال ها:

alert(Boolean("0"));       //  true
alert(Boolean(" "));       //  true (حتی اگه فقط فاصله باشه)

خلاصه:

• جاوااسکریپت به صورت خودکار مقادیر رو به عدد یا Boolean تبدیل می‌کنه، ولی وقتی نیاز به کنترل بیشتری داری، می‌تونی از Number(value) یا Boolean(value) استفاده کنی.
• همیشه حواست به قوانین این تبدیل‌ها باشه، مخصوصاً وقتی با مقادیر null، undefined و رشته‌ها سر و کار داری.

تمرین‌های تبدیل نوع داده در جاوااسکریپت

اینجا 10 تا تمرین برای تقویت مهارت هات تو مبحث تبدیل نوع داده آماده کردم. این تمرین‌ها از ساده شروع می‌شن و کم کم کمی چالشی‌تر می‌شن. سعی کن قبل از دیدن پاسخ ها، خودت حلشون کنی. مهم‌ترین نکته اینه که تلاش کنی! 😊

تمرین 1: تبدیل به رشته

یک متغیر به نام value با مقدار false تعریف کن و اون رو به رشته تبدیل کن. نوع اولیه و نوع بعد از تبدیل رو چاپ کن.

پاسخ:

let value = false;
console.log(typeof value); //  boolean
value = String(value);
console.log(value); //  "false"
console.log(typeof value); //  string

توضیح: ابتدا مقدار false به عنوان یک بولین تعریف شده. بعد با استفاده از تابع String(value) اون رو به رشته تبدیل کردیم. حالا نوعش از boolean به string تغییر کرده و مقدارش هم "false" هست.

تمرین 2: حذف فضای خالی در تبدیل به عدد

یک متغیر str با مقدار "   45   " تعریف کن. اون رو به عدد تبدیل کن و نتیجه رو چاپ کن. چرا این تبدیل جواب می‌ده؟

پاسخ:

let str = "   45   ";
let num = Number(str);
console.log(num); //  45

توضیح: جاوااسکریپت موقع تبدیل رشته به عدد، فضاهای خالی اطراف رو حذف می‌کنه. بنابراین "   45   " بدون مشکل به عدد 45 تبدیل می‌شه.

تمرین 3: مقدار نامعتبر

یک متغیر input با مقدار "hello123" تعریف کن. اون رو به عدد تبدیل کن و نتیجه رو چاپ کن. چرا این تبدیل به NaN می‌رسه؟

پاسخ:

let input = "hello123";
let num = Number(input);
console.log(num); //  NaN

توضیح: رشته ی "hello123" شامل کاراکترهایی هست که نمی‌شه به عدد تبدیلشون کرد. جاوااسکریپت در این شرایط مقدار NaN (Not a Number) رو برمی گردونه.

تمرین 4: تبدیل به بولین

مقدارهای زیر رو به بولین تبدیل کن و نتیجه رو چاپ کن:

• "hello"
• ""
• 0
• "0"

پاسخ:

console.log(Boolean("hello")); //  true
console.log(Boolean(""));      //  false
console.log(Boolean(0));       //  false
console.log(Boolean("0"));     //  true

توضیح:

• "hello" یک رشته غیرخالیه، پس به true تبدیل می‌شه.
• "" یک رشته خالیه، پس به false تبدیل می‌شه.
• 0 یک مقدار "خالی" محسوب می‌شه، پس false هست.
• "0"، چون یک رشته غیرخالیه، به true تبدیل می‌شه.

تمرین 5: تبدیل چندگانه

یک متغیر به نام value با مقدار "100" تعریف کن. ابتدا اون رو به عدد و بعد به بولین تبدیل کن. نتیجه نهایی (بعد از تبدیل به بولین) رو چاپ کن.

پاسخ:

let value = "100";
let num = Number(value);
let bool = Boolean(num);
console.log(bool); //  true

توضیح:

• مقدار "100" رو به عدد 100 تبدیل کردیم.
• عدد 100 به دلیل اینکه مقدار غیرصفره، به true تبدیل می‌شه.

تمرین 6: تبدیل و عملیات ریاضی

دو مقدار "12" و "4" رو به عدد تبدیل کن و مجموعشون رو به کاربر نمایش بده.

پاسخ:

let num1 = "12";
let num2 = "4";
let sum = Number(num1) + Number(num2);
alert(`مجموع: ${sum}`); //  مجموع: 16

توضیح:

• مقادیر "12" و "4" رو به عدد تبدیل کردیم.
• عملیات جمع انجام شد و نتیجه نمایش داده شد.

تمرین 7: null و undefined

یک متغیر به نام value1 با مقدار null و یک متغیر به نام value2 با مقدار undefined تعریف کن. این دو مقدار رو به عدد تبدیل کن و نتیجه رو چاپ کن. تفاوتشون رو توضیح بده.

پاسخ:

let value1 = null;
let value2 = undefined;
console.log(Number(value1)); //  0
console.log(Number(value2)); //  NaN

توضیح:

• null به عدد 0 تبدیل می‌شه، چون "هیچی" به عنوان مقدار صفر در نظر گرفته می‌شه.
• undefined به NaN تبدیل می‌شه، چون جاوااسکریپت نمی‌تونه مقدار مشخصی بهش اختصاص بده.

تمرین 8: تعامل با کاربر

یک برنامه بنویس که از کاربر سنش رو با prompt بپرسه و مقدار وارد شده رو به عدد تبدیل کنه. اگر تبدیل موفقیت آمیز بود، عدد رو چاپ کن، وگرنه پیغام خطا نمایش بده.

پاسخ:

let age = prompt("سنت رو وارد کن:", "");
if (isNaN(Number(age))) {
  alert("ورودی نامعتبره!");
} else {
  alert(`سن شما: ${Number(age)}`);
}

توضیح:

• مقدار وارد شده رو با prompt می‌گیریم و می‌ریزیم تو متغیر age.
• با Number(age) اون رو به عدد تبدیل می‌کنیم. اگر مقدار معتبر نباشه، isNaN مقدار true برمی گردونه و پیغام خطا نشون می‌دیم.
• اگر معتبر باشه، سن رو چاپ می‌کنیم.

اگه هنوز یکم برات گنگه بیا قدم به قدم منطق برنامه رو بررسی کنیم:
1. Number(age) چه کار می‌کنه؟

• Number(age) مقدار ورودی age رو به یک عدد تبدیل می‌کنه.
• اگر مقدار ورودی مثل "123" باشه، اون رو به عدد 123 تبدیل می‌کنه.
• اما اگر مقدار ورودی قابل تبدیل به عدد نباشه (مثل "hello")، نتیجه ی این تبدیل می‌شه NaN.

چند مثال:

Number("123");    //  123 (تبدیل موفق)
Number("123abc"); //  NaN (تبدیل ناموفق)
Number("");       //  0 (رشته خالی به 0 تبدیل می‌شه)
Number(null);     //  0 (null به 0 تبدیل می‌شه)
Number(undefined);//  NaN (تبدیل ناموفق)

2. isNaN() چه کار می‌کنه؟

• تابع isNaN(value) بررسی می‌کنه که آیا مقدار value معادل NaN هست یا نه.
• اگر مقدار ورودی NaN باشه، isNaN مقدار true برمی گردونه.
• در غیر این صورت، مقدار false برمی گردونه.

چند مثال:

isNaN(NaN);       //  true
isNaN(123);       //  false
isNaN("hello");   //  true (چون تبدیل به عدد، NaN می‌ده)
isNaN("");        //  false (رشته خالی به 0 تبدیل می‌شه، پس NaN نیست)
isNaN(null);      //  false (null به 0 تبدیل می‌شه، پس NaN نیست)

3. حالا ترکیب isNaN(Number(age))

این دستور در دو مرحله کار می‌کنه:

1. Number(age) مقدار ورودی age رو به عدد تبدیل می‌کنه.

• اگر تبدیل موفق باشه، یک عدد معتبر (مثلاً 123) می‌ده.
• اگر تبدیل ناموفق باشه، NaN می‌ده.

2. isNaN(Number(age)) بررسی می‌کنه که آیا نتیجه ی تبدیل به NaN هست یا نه:

• اگر NaN باشه، یعنی ورودی عدد نیست → true برمی گردونه.
• اگر عدد معتبر باشه، یعنی ورودی یک عدد بوده → false برمی گردونه.

مثال گام به گام:

let age = "30"; // رشته عددی
let result = isNaN(Number(age)); // 1. Number("30") -> 30 (عدد معتبر)، پس isNaN(30) -> false
console.log(result); //  false (ورودی عدد بوده)
age = "abc"; // رشته غیرعددی
result = isNaN(Number(age)); // 1. Number("abc") -> NaN، پس isNaN(NaN) -> true
console.log(result); //  true (ورودی عدد نیست)

جمع بندی:

• Number(age) مقدار رو به عدد تبدیل می‌کنه.
• اگر تبدیل ناموفق باشه، NaN می‌ده.
• isNaN() بررسی می‌کنه که آیا نتیجه ی تبدیل، NaN بوده یا نه.
• به این ترتیب، ترکیب isNaN(Number(age)) مشخص می‌کنه که آیا مقدار ورودی یک عدد معتبر هست یا نه.

پیشنهاد برای درک بهتر:

می تونی چند ورودی مختلف رو امتحان کنی و گام به گام نتیجه رو با استفاده از Number و isNaN بررسی کنی:

let inputs = ["123", "abc", "", null, undefined, "123abc"];
inputs.forEach(input => {
  console.log(`Input: "${input}"`);
  console.log(`Number(input):`, Number(input));
  console.log(`isNaN(Number(input)):`, isNaN(Number(input)));
});

این آزمایش کمک می‌کنه بفهمی چطور هر مقدار پردازش می‌شه. 😊

تمرین 9: شرط با تبدیل به بولین

یک برنامه بنویس که مقدار ورودی کاربر رو بگیره. اگر مقدار وارد شده به بولین true تبدیل شد، پیغام "مقدار معتبر است" چاپ کن. در غیر این صورت، پیغام "مقدار نامعتبر است" چاپ کن.

پاسخ:

let input = prompt("یه چیزی وارد کن:", "");
if (Boolean(input)) {
  alert("مقدار معتبر است");
} else {
  alert("مقدار نامعتبر است");
}

توضیح:

• مقدار ورودی رو به بولین تبدیل کردیم.
• اگر مقدار وارد شده غیرخالی باشه، پیغام "مقدار معتبر است" نشون داده می‌شه.
• اگر خالی باشه، پیغام "مقدار نامعتبر است" نشون داده می‌شه.

تمرین 10: چالش – همه نوع تبدیل

یک متغیر value با مقدار "5" تعریف کن. سپس این کارها رو انجام بده:

• مقدار رو به عدد تبدیل کن.
• عدد رو به بولین تبدیل کن.
• بولین رو دوباره به رشته تبدیل کن. نتیجه نهایی و نوع داده ی اون رو چاپ کن.

پاسخ:

let value = "5";
let num = Number(value);      // تبدیل به عدد
let bool = Boolean(num);      // تبدیل به بولین
let str = String(bool);       // تبدیل به رشته
console.log(str);             //  "true"
console.log(typeof str);      //  string

توضیح:

• مقدار "5" به عدد 5 تبدیل شد.
• عدد 5 به دلیل اینکه مقدار غیرصفره، به true تبدیل شد.
• مقدار true به رشته "true" تبدیل شد. نوع نهایی هم string هست.

جمع بندی: خلاصه ی مبحث تبدیل نوع در جاوااسکریپت

توی جاوااسکریپت، سه نوع تبدیل اصلی داریم که خیلی استفاده می‌شن: تبدیل به رشته، تبدیل به عدد و تبدیل به بولین.

تبدیل به رشته (String Conversion): این تبدیل زمانی اتفاق میوفته که بخوایم چیزی رو نمایش بدیم یا خروجی بگیریم. همچنین می‌تونیم به صورت دستی با دستور String(value) این کار رو انجام بدیم.
برای مقادیر ابتدایی (مثل عدد، بولین و...)، این تبدیل معمولاً خیلی سرراست و مشخصه.

تبدیل به عدد (Numeric Conversion): تبدیل به عدد معمولاً توی عملیات‌های ریاضی اتفاق میوفته. البته می‌تونیم با دستور Number(value) این تبدیل رو خودمون انجام بدیم.

قوانین تبدیل به عدد:

مثال ها:

Number("123");        // نتیجه: 123
Number("  456  ");    // نتیجه: 456 (فاصله‌ها حذف می‌شن)
Number("abc123");     // نتیجه: NaN (چون "abc" عدد نیست)
Number(null);         // نتیجه: 0
Number(undefined);    // نتیجه: NaN

تبدیل به بولین (Boolean Conversion): این تبدیل معمولاً توی عملیات‌های منطقی (مثلاً شرط ها) اتفاق میوفته. می‌تونیم با دستور Boolean(value) این کار رو دستی انجام بدیم.

قوانین تبدیل به بولین:

مثال ها:

Boolean(0);            // نتیجه: false
Boolean("hello");       // نتیجه: true (رشته ی غیرخالی)
Boolean("");            // نتیجه: false (رشته ی خالی)
Boolean("0");           // نتیجه: true (رشته ی "0")
Boolean(" ");           // نتیجه: true (رشته ی فقط شامل فاصله)

چند نکته که باید حواست باشه:

• undefined وقتی به عدد تبدیل می‌شه، به NaN تبدیل می‌شه، نه 0.
• رشته ی "0" و رشته ای که فقط شامل فاصله هست (" ")، توی تبدیل به بولین، true می‌شن.

هنوز اشیا رو یاد نگرفتیم! تبدیل نوع هایی که مربوط به اشیاء هستن، اینجا پوشش داده نشدن. بعداً توی مقاله «تبدیل اشیاء به مقدار ابتدایی» این موضوع رو یاد می‌گیریم، وقتی که بیشتر با جاوااسکریپت آشنا شدیم.