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

با سلام، قصد داریم در این مقاله در رابطه با بحث Type Conversion در جاوا اسکریپت صحبت کنیم اما ابتدا باید به طور خلاصه به برخی از پیش نیاز های آن بپردازیم.

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

در جاوا اسکریپت 5 نوع داده وجود دارند که می توانند مقدار بپذیرند:

رشته ها (string)
اعداد (number)
بولین ها (Boolean)
اشیاء (object)
توابع (function)

همچنین 3 نوع شیء داریم:

شیء (Object)
تاریخ (Date)
آرایه (Array)

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

null
undefined

اپراتور typeof

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

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable, object, function or expression.</p>

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

<script>
document.getElementById("demo").innerHTML = 
  typeof "john" + "<br>" +
  typeof 3.14 + "<br>" +
  typeof NaN + "<br>" +
  typeof false + "<br>" +
  typeof [1,2,3,4] + "<br>" +
  typeof {name:'john', age:34} + "<br>" +
  typeof new Date() + "<br>" +
  typeof function () {} + "<br>" +
  typeof myCar + "<br>" +
  typeof null;
</script>

</body>
</html>

خروجی کد به شکل زیر خواهد بود:

string
number
number
boolean
object
object
object
function
undefined
object

نکات مهم در رابطه با کد بالا:

نوع داده ی NaN یک عدد (number) است.
نوع داده ی آرایه یک شیء (object) است.
نوع داده ی تاریخ یک شیء (object) است.
نوع داده ی null یک شیء (object) است.
نوع داده ی undefined همان undefined است.
نوع داده ی متغیری که هنوز هیچ داده ای در خود ندارد، undefined است.

با توجه به این نکات می توان گفت: شما نمی توانید با دستور typeof مشخصا بفهمید یک شیء جاوا اسکریپت، در واقع آرایه است یا date یا شیء.

سوال: نوع داده ی خودِ typeof چیست؟

پاسخ: typeof یک اپراتور است و اپراتورها (مانند علامت جمع، ضرب و ...) نوع داده ندارند اما همیشه یک رشته را برمیگرداند که همان نوع متغیری است که از او خواسته ایم.

خصوصیت constructor

خصوصیت constructor در واقع تابع constructor در تمامی متغیرهای جاوا اسکریپت را برمیگرداند:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript constructor Property</h2>

<p>The constructor property returns the constructor function for a variable or an 
object.</p>

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

<script>
document.getElementById("demo").innerHTML = 
  "john".constructor + "<br>" +
  (3.14).constructor + "<br>" +
  false.constructor + "<br>" +
  [1,2,3,4].constructor + "<br>" +
  {name:'john', age:34}.constructor + "<br>" +
  new Date().constructor + "<br>" +
  function () {}.constructor;
</script>

</body>
</html>

خروجی این کد به شکل زیر خواهد بود:

function String() { [native code] }
function Number() { [native code] }
function Boolean() { [native code] }
function Array() { [native code] }
function Object() { [native code] }
function Date() { [native code] }
function Function() { [native code] }

سوال: این خصوصیت به چه درد ما می خورد؟

پاسخ: گفتیم که با دستور typeof نمی توان به طور واضح اشیاء، تاریخ و آرایه ها را از هم تشخیص داد اما با خصوصیت constructor می توانیم بفهمیم آیا شیء ما آرایه است یا خیر.

مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>This "home made" isArray() function returns true when used on an array:</p>

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

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

</body>
</html>

خروجی این کد عبارت true خواهد بود.

توضیح کد:

اگر شیء ما آرایه باشد، قطعا در متن طولانی ای که constructor برمیگرداند کلمه ی "Array" وجود خواهد داشت.
تابع indexOf در صورتی که کلمه ای را در متنی پیدا کند مقدار مثبت و در غیر این صورت مقدار منفی تحویل می دهد.
بر اساس این دو نکته می گوییم اگر کلمه ی Array در متن برگشتی از constructor وجود داشت (مقدار indexOf عددی بیشتر از 1- بود)، شیء ما از نوع آرایه خواهد بود.

حتی می توانیم این کد را ساده تر از این بنویسیم:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Object</h2>
<p>This "home made" isArray() function returns true when used on an array:</p>

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

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor === Array;
}
</script>

</body>
</html>

خروجی این کد نیز کلمه ی true است.

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

مثال:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to check if "fruits" is an array.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}
</script>

</body>
</html>

خروجی این تابع عبارت true خواهد بود.

برای دیدن مثال های بیشتر و کسب اطلاعات دیگر در مورد تابع ()Array.isArray به این صفحه از وب سایت توسعه دهندگان Mozilla مراجعه کنید.

این موضوع در مورد Date نیز صادق است. به طور مثال با کد زیر و به همان شیوه ی قبل می توان از تاریخ بودن یک شیء اطلاع پیدا کرد:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Date Object</h2>
<p>This "home made" isDate() function returns true when used on an date:</p>

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

<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);

function isDate(myDate) {
  return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>

</body>
</html>

و باز هم مانند قبل می توان آن را ساده تر نوشت:

function isDate(myDate) {
  return myDate.constructor === Date;
}

در این قسمت در رابطه با پیش نیاز های مبحث تبدیل انواع داده (Type Conversion) صحبت کردیم که شامل بررسی دستور های typeof و indexOf و همچنین خصوصیت constructor بودند. در قسمت بعد به سراغ توابع مخصوص Type Conversion خواهیم رفت.

در قسمت قبل در رابطه با دستور های typeof و constructor صحبت کردیم. همانطور که می دانید این مباحث به عنوان پیش نیاز برای بحث Type Conversion مطرح می شوند و آشنایی با آن ها ضروری است. در این قسمت میخواهیم در مورد خود Type Conversion و توابع آن صحبت کنیم.

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

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

با استفاده از توابع مربوط
به صورت خودکار توسط خود جاوا اسکریپت

در مورد هر دوی این موارد صحبت خواهیم کرد، اما از توابع شروع می کنیم.

تبدیل اعداد به رشته

تابع ()String می تواند اعداد را به رشته تبدیل کند و هر نوع عدد، literal، متغیر و ... را نیز می گیرد. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript String() Method</h2>

<p>The String() method can convert a number to a string.</p>

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

<script>
var x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>
</body>
</html>

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

123
123
123

نکته: احتمالا نام تابع ()toString را نیز شنیده باشید. باید بگویم این تابع فرقی با ()String ندارد. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The toString() method converts a number to a string.</p>

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

<script>
var x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>

خروجی این کد، دقیقا مانند کد قبلی، سه رشته ی 123 است.

نکته: به تفاوت طرز استفاده از این دو توجه داشته باشید.

توابع بیشتری برای کار با اعداد وجود دارند:

متد	توضیحات
()toExponential	یک رشته را برمیگرداند، به همراه عددی که گرد شده و به صورت نمایی نوشته شده است.
()toFixed	یک رشته را برمیگرداند، به همراه عددی که گرد شده و رقم اعشار مشخصی دارد.
()toPrecision	یک رشته را برمیگرداند، با عددی که طول مشخصی دارد.

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

تبدیل بولین ها به رشته

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

String(false)      // returns "false"
String(true)       // returns "true"

همچنین مانند بحث قبلی می توانید از ()toString نیز استفاده کنید:

false.toString()   // returns "false"
true.toString()    // returns "true"

تبدیل تاریخ به رشته

باز هم می توان از تابع ()String استفاده کرد:

String(Date())  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

و همچنین از()toString :

Date().toString()  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

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

دریافت سال به صورت چهار رقمی (yyyy)	()getFullYear
دریافت ماه به صورت عددی (0-11)	()getMonth
دریافت روز به صورت عددی (1-31)	()getDate
دریافت ساعت (0-23)	()getHours
دریافت دقیقه (0-59)	()getMinutes
دریافت ثانیه (0-59)	()getSeconds
دریافت میلی ثانیه (0-999)	()getMilliseconds
دریافت زمان (در واحد میلی‌ثانیه، سپری شده از 1 ژانویه 1970)	()getTime
دریافت روز هفته به صورت عددی (0-6)	()getDay
دریافت زمان در ECMAScript 5	()Date.now

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

تبدیل رشته ها به عدد

برای این کار می توانیم از تابع ()Number استفاده کنیم. با استفاده از این تابع اگر رشته ای حاوی عددی باشد (مانند رشته ی "3.14")، تبدیل به عدد می شود (مانند عدد 3.14).

نکته: رشته های خالی تبدیل به 0 و بقیه ی موارد تبدیل به NaN می شوند.

مثال:

Number("3.14")    // returns 3.14
Number(" ")       // returns 0 
Number("")        // returns 0
Number("99 88")   // returns NaN

اپراتور + unary

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

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var y = "5";
  var x = + y;
  document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
}
</script>

</body>
</html>

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

نکته: اگر متغیر قابلیت تبدیل شدن به عدد را نداشته باشد، باز هم تبدیل به یک عدد می شود اما مقدار آن برابر با NaN خواهد بود:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  var y = "John";
  var x = + y;
  document.getElementById("demo").innerHTML = typeof x + "<br>" + x;
}
</script>

</body>
</html>

خروجی این کد به شکل زیر خواهد بود:

number
NaN

تبدیل بولین ها و تاریخ به عدد

برای تبدیل تاریخ یا بولین به عدد باز هم می توانیم از تابع ()Number استفاده کنیم.

برای بولین ها به شکل:

Number(false)     // returns 0
Number(true)      // returns 1

و برای اعداد به شکل:

d = new Date();
Number(d)          // returns 1404568027739

البته در مورد تاریخ ها لازم به ذکر است که تابع ()getTime نیز همین کار را می کند:

d = new Date();
d.getTime()        // returns 1404568027739

Type Conversion به صورت خودکار

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

<!DOCTYPE html>
<html>
<body>

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

<script>
var x = [];
document.getElementById("demo").innerHTML =
(5 + null) + "<br>"  +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>

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

5
5null
52
3
10
2.5

نکات کد:

از نظر جاوا اسکریپت عبارت 5 + null می شود 5 چرا که null تبدیل به 0 خواهد شد.
از نظر جاوا اسکریپت عبارت "5" + null می شود "5null" چرا که null تبدیل به رشته ی "null" می شود.
از نظر جاوا اسکریپت عبارت "5" + 2 می شود 52 چرا که 2 تبدیل به رشته ی "2" می شود.
از نظر جاوا اسکریپت عبارت "5" - 2 می شود 3 چرا که رشته ی "5" تبدیل به عدد 5 خواهد شد.
از نظر جاوا اسکریپت عبارت "5" * "2" می شود 10 چرا که رشته های "5" و "2" تبدیل به اعداد 5 و 2 می شوند.

نکته: اگر بخواهید به هر نحوی از یک شیء یا متغیر خروجی بگیرید، جاوا اسکریپت به صورت خودکار تابع ()toString را صدا خواهد زد:

document.getElementById("demo").innerHTML = myVar;

اگر {"myVar = {name:"Fjohn باشد، دستور ()toString آن را تبدیل به "[object Object]" می کند.
اگر [myVar = [1,2,3,4 باشد، دستور ()toString آن را تبدیل به "1,2,3,4" می کند.
اگر ()myVar = new Date باشد، دستور ()toString آن را تبدیل به چیزی مثل "Fri Jul 18 2014 09:08:55 GMT+0200" می کند.
اگر myVar = true باشد، دستور ()toString آن را تبدیل به "true" می کند و بالعکس.

امیدوارم از آن لذت برده باشید.