تبدیل انواع داده ها به یکدیگر - Type Conversion در جاوااسکریپت

تبدیل انواع داده ها به یکدیگر یا Type Conversion در جاوااسکریپت الگوریتمی هست که به ما اجازه میده تا بصورت دستی تایپ یک متغیر را تغییر بدیم. حتی خیلی وقت ها هست که خود جاوااسکریپت در پشت صحنه بصورت خودکار این تغییر تایپ یک متغیر را انجام میده و هدفش هم از تغییر تایپ یک متغیر درست و بهتر کار کردن کد در بخش مربوطه هستش.

همه محاسبات در جاوااسکریپت فقط با data type های یکسان امکان پذیره. ولی اگر بخواهیم یک عدد را به یک string اضافه کنیم باید چکار کرد ؟ تو اینجور مواقع جاوااسکریپت بطور خودکار میاد و تایپ عدد مارو تبدیل میکنه به یک string و درنهایت که همه تایپ ها یکسان شدن میاد عمل جمع زدن و یکی کردن دوتا string را شروع میکنه. به این کار اصطلاحا میگیم type conversion و قراره تو این مقاله بطور کامل یادش بگیریم.

Type Conversion در جاوااسکریپت به چی گفته میشه ؟

type conversion به تبدیل یک نوعی از متغیر (‌ data type ) به نوعی دیگه گفته میشه ( مثلا تبدیل یک number به string ) و به عنوان مثال این اتفاق میتونه هم بصورت دستی توسط ما انجام بشه و هم توسط جاوااسکریپت بطور خودکار.

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

// عدد تبدیل به رشته شد
console.log('5' + 3); // '53'

// رشته تبدیل به عدد شد تا محاسبه به درستی انجام بشه
console.log('5' - 3); // 2
console.log('5' * 3); // 15

// تبدیل به boolean
console.log(null == 1);   // false

// وقتی خروجی عدد نیست
console.log('Ale' - 2021); // NaN

در مثال بالا ما داریم یکسری عملیات هایی رو روی data type های متفاوت انجام میدیم. از اینرو جاوااسکریپت پیش خودش تصمیم میگیره که برای خروجی مناسب تر بیاد یکسری تبدیل هایی رو انجام بده و در نتیجه موقع استفاده از عملگر های - و * و / در محاسباتی که یک طرف number  و یک طرف دیگه string هست، میاد string رو تبدیل به number میکنه و بلعکس در مواقع استفاده از عملگر + هم میاد number رو تبدیل به string میکنه.

همچنین مقایسه نسبیه == هم در مواقع نیاز ممکنه تبدیل تایپ رو انجام بده و ازینرو در مثال null == 1 مقداره null رو تبدیل به عدد 0 کرده و در نتیجه خروجی false رو برای مقایسه 0 با 1 به ما داده.

و در مثال آخر که داریم عمل - را روی یک string و عدد 2021 انجام میدیم که یک محاسبه غلط و بدون نتیجه هست و عملا نمیتونه 'Ale' را به عدد تبدیل کنه به ما خروجی NaN میده.

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

اساسا دو نوع کلی Type Conversion داریم که عبارت اند از:

• Implicit type conversions : که بطور خودکار و در پشت صحنه توسط جاوااسکریپت انجام میشه.
• Explicit type conversions : که توسط ما و بصورت دستی انجام میشه.

همچنین type conversion را میشه روی تمام data type ها در جاوااسکریپت پیاده کرد و تفاوتی نداره که Primitive هستند یا Object هرچند که شکل کار primitive ها و آبجکت ها در جاوااسکریپت بطور کل باهم فرق دارن، ولی میشه هردوی این تایپ هارو فقط به سه تایپ زیر تبدیل کرد:

• number
• string
• boolean

بیایید حالا کمی بریم سراغ انواع تبدیل تایپ ها و درمورد Implicit و Explicit صحبت کنیم.

1. Implicit Type Conversion

Implicit type conversion به عملی گفته میشه که در اون مفسر کد جاوااسکریپت بصورت خودکار سعی میکنه تا دوتا تایپ مختلف رو به یک تایپ یکسان تبدیل کنه ( تا مطمعن بشه که در فانکشن یا عملگر مدنظر به درستی کارشو انجام بده، مثل یک جمع یا تفریق ). این تبدیل هارو همچنین با عنوان type coercion هم میشناسیم.

همانطور هم که گفتیم این تبدیل ها معمولا زمانی رخ میدن که ما عملیات هایی رو روی تایپ های مختلف داریم، مثل '2' + 1 یا null == 1

حالا بیایید چند مثال رو ببینیم تا توی عمل متوجه بشیم که این تبدیل تایپ ها چه زمان هایی رخ میدن:

// Implicit conversion be string
'25' + 15; // '2515'

// Implicit conversions be number
23 * '2';   // 46

23 - true;  // 22  // true be 1 tabdil shode

true - null; // 1

false + undefined;  // NaN  // tabdile undefined be NaN

const arr = [];
if(arr) { console.log('Hello World') };  // Hello World 
// inja arr tabdil be yek meghdare boolean shode

یک عملگری که تبدیل تایپ روش اثر نمیزاره === هست که در یک حالت سختیگرانه و خاص میاد مقایسه مارو انجام میده و برخلاف == نمیاد درصورت نیاز تایپ هارو به چیز دیگه ایی تبدیل کنه.

implicit type conversion مثل یه شمشیر دو لبه هست، گاهی اوقات میتونه مفید و کاربردی باشه و گاهی اوقات هم میتونه باعث ایجاد ارور یا مشکل در کد ما بشه.

2. Explicit Type Conversion

explicit type conversion به فرایندی گفته میشه که بصورت دستی توسط برنامه نویس انجام میشه و تایپ متغیر مدنظر توسط برنامه نویس تبدیل و تعیین میشه. اینکار باعث میشه تا ما اطمینان حاصل کنیم که جاوااسکریپت در پشت صحنه بصورت خودکار نمیاد تایپی رو تبدیل کنه و همه چیز تحت نظارت خود ما انجام میشه. به اینکار اصطلاحا type casting هم گفته میشه.

بیایید یک مثالی رو از این قضیه باهم ببینیم و تا متوجه بشیم که چه زمانی این تبدیل تایپ بصورت دستی میتونه برای ما مفید باشه. اگر خاطرتون باشه prompt در جاوااسکریپت همیشه برای ما یک string برمیگردونه و ما اگر بخواهیم از مقدار prompt که توسط کاربر وارد شده توی یک عملیات ریاضی جمع ( + ) استفاده کنیم با مشکل مواجه میشیم چرا که موقع جمع کردن یک string با یک number جاوااسکریپت میاد بصورت خودکار number رو هم تبدیل به string میکنه.

بریم این مورد رو باهم ببینیم:

const pensInBag = prompt('How many pens you have in your bag?');
const pensInHand = 10;
const totalPens = pensInHand + pensInBag;

// prompt = 5
console.log(totalPens);  // خروجی 105

در کد بالا فرض کنید ما مقدار 5 رو در prompt وارد کردیم و در نهایت با متغیر pensInHand که عدد 10 بود جمع کردیم. در واقع اومدیم "5" + 10 کردیم و جاوااسکریپت هم اومد بطور خودکار 10 رو تبدیل به string کرد و خروجی کار به ما "105" رو داد.

برای رفع این مشکل همانطور که گفتیم باید بصورت دستی تایپ هارو تبدیل کنیم و از explicit type conversion استفاده کنیم. بنابر این بوسیله فانکشن Number() میاییم خروجی prompt را تبدیل به عدد میکنیم:

const pensInBag = Number(prompt('How many pens you have in your bag?'));
const pensInHand = 10;
const totalPens = pensInHand + pensInBag;


console.log(totalPens); // خروجی 15

و در نهایت میبینیم که دیگه خبری از خودسرانه عمل کردن جاوااسکریپت نیست و کد ما طبق انتظارمون کار میکنه.

موارد زیر هم مثال های دیگه ایی از explicit type conversion ها هست:

// tabdil be string ba String()
String(2 - true);  // '1'
'56' === String(56);  // true

// tabdil be number ba Number()
Number(prompt());  // tabdile value prompt be number
Number('2350e-2');  // '23.5'
Number('23') + 7;  // 30

// tabdil be boolean
Boolean(''); // false
Boolean(2) == true;  //true

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

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

• تبدیل به string
• تبدیل به number
• تبدیل به boolean
• تبدیل به symbol

تبدیل به string یا String Conversion

برای تبدیل یک مقدار به string میتونیم از فانکشن String() استفاده کنیم تا بصورت دستی و اصطلاحا از نوع Explicit type conversion استفاده کنیم و از طرفی دیگه برای تبدیل خودکار و به شکل implicit هم نیازه تا از عملگر + استفاده کنیم.

// Implicit Type Conversion
"25" + 56; // '2556'
"25" + null; // '25null'
"Ale " + undefined; // 'Ale undefined'
"25" + false; // '25fasle'

// Explicit Type Conversion
String(23);   // '23'
String(true); // 'true'
String(32 - false);  // '32'
String(32 - true);   // '31'

تبدیل به مقادیر عددی - Numeric Conversion

برای تبدیل یک مقدار غیر عددی به یک مقدار عددی در روش دستی و explicit type casting میتونیم از فانکشن Number() استفاده کنیم.

از طرفیم جهت تبدیل خودکار و یا implicit type casting هم میتونیم به روش های زیر عمل کنیم:

• عملگر های مقایسه ایی مثل >, <, =>, <=
• عملگر های حسابی مثل + ,  / ,  % 
• عملگر های | , & , ^ , ~
• برسی برابری بوسیله == یا =!

// Explicit Type Conversion
Number(" 12 ");  // 12
Number("-12.34");  // -12.34
Number("\n");   // 0

//null va undefined be number
Number(null);   // 0
Number(undefined);  // NaN

// Booleans be Number
Number(true); // 1
Number(false); // 0

prompt('what is you age?'); // '26'
Number(prompt('what is you age?')); // 26

حواستون باشه که null و undefined رو باید به شکل دیگه ایی مدیریت کنیم چراکه null به عدد 0 و undefined هم به NaN تبدیل میشه.

تبدیل به Boolean یا Boolean Conversion

برای تبدیل یک مقدار به Boolean در روش دستی و explicit type casting میتونیم از فانکشن Boolean() استفاده کنیم. و بصورت خودکار هم زمانیکه از if/else و یا ||, &&, ! استفاده کنیم، جاوااسکریپت فرایند تبدیل را بصورت دستی برای ما انجام میده.

Boolean(2);   // true

if(' ') {console.log(`Empty string`)};   // Empty string 

!! 2;    // true
'' || 23;  // 23

عملگرهایی مثل || و && کار تبدیل تایپ رو انجام میدن اما در نهایت مقدار اصلیه عملوند را برمیگردونه ( حتی اگر اونها boolean نباشن )

'' || 23; // returns 23, bejaye true

ما میدونیم که تو یه مقدار boolean صرفا دو حالت true یا false وجود دارن و ما برای اینکه بهتر یادمون بمونه که چه مقادیری true هستند و چه مقادیری false. میتونیم بیاییم فقط false هارو بشناسیم و مابقیه مقادیر رو به عنوان true در نظر بگیریم:

Boolean('');   // false
Boolean(0);    // false     
Boolean(-0);   // false
Boolean(NaN);  // false
Boolean(null);  // false
Boolean(undefined);  // false
Boolean(false);   // false

جدول خلاصه تبدیل انواع داده ها به یکدیگر

تو جدول زیر میتونید بطور خلاصه انواع تبدیل داده ها و Type Conversion ها در جاوااسکریپت رو ببینید:

مقدار	تبدیل به String	تبدیل به Number	تبدیل به Boolean
20	'20'	20	true
'20'	'20'	20	true
false	'false'	0	false
true	'true'	1	true
0	'0'	0	false
'0'	'0'	0	true
NaN	'NaN'	NaN	false
null	'null'	0	false
undefined	'undefined'	NaN	false
[]	''	0	true
""	""	0	false
[23]	'23'	23	true
[10,23]	'10,23'	NaN	true
" "	' '	0	true
['fun']	'fun'	NaN	true
['fun','enjoy']	'fun,enjoy'	NaN	true
function(){}	'function(){}'	NaN	true
{}	'[object Object]'	NaN	true
Infinity	'Infinity'	Infinity	true
-Infinity	'-Infinity'	-Infinity	true