37. Μετατροπή τύπων JavaScript (Type Conversion)

JS Type Conversion


Η συνάρτηση Number() μετατρέπει σε Number, η String() μετατρέπει σε String, η Boolean() μετατρέπεται σε Boolean.


Τύποι δεδομένων JavaScript

Στη JavaScript υπάρχουν 5 διαφορετικοί τύποι δεδομένων που μπορούν να περιέχουν τιμές:

  • string (συμβολοσειρά)
  • number (αριθμός)
  • boolean
  • object (αντικείμενο)
  • function (συνάρτηση)

Υπάρχουν 6 τύποι αντικειμένων:

  • Object (αντικέιμενο)
  • Date (ημερομηνία)
  • Array (πίνακας)
  • String (συμβολοσειρά)
  • Number (αριθμός)
  • Boolean

Και 2 τύποι δεδομένων που δεν μπορούν να περιέχουν τιμές:

  • null (μηδέν)
  • undefined (απροσδιόριστο)

Ο τελεστής typeOf

Μπορείτε να χρησιμοποιήσετε τον typeof χειριστή για να βρείτε τον τύπο δεδομένων μιας μεταβλητής JavaScript.

Παράδειγμα

typeof "Γιάννης"                 		// Επιστρέφει "string"
typeof 3.14                   			// Επιστρέφει "number"
typeof NaN                    			// Επιστρέφει "number"
typeof false                  			// Επιστρέφει "boolean"
typeof [1,2,3,4]              			// Επιστρέφει "object"
typeof {όνομα:'Γιάννης', ηλικία:34}  	// Επιστρέφει "object"
typeof new Date()             			// Επιστρέφει "object"
typeof function () {}         			// Επιστρέφει "function"
typeof myCar                  			// Επιστρέφει "undefined" *
typeof null                   			// Επιστρέφει "object"

Δοκιμάστε το »

Παρατηρήστε:

  • Ο τύπος δεδομένων του NaN είναι number
  • Ο τύπος δεδομένων ενός πίνακα είναι object
  • Ο τύπος δεδομένων μιας ημερομηνίας είναι object
  • Ο τύπος δεδομένων null είναι object
  • Ο τύπος δεδομένων μιας αόριστης μεταβλητής είναι undefined*
  • Ο τύπος δεδομένων μιας μεταβλητής στην οποία δεν έχει εκχωρηθεί μια τιμή είναι επίσης undefined*

Δεν μπορείτε να χρησιμοποιήσετε το typeof για να προσδιορίσετε εάν ένα αντικείμενο JavaScript είναι ένας πίνακας (ή μια ημερομηνία).


Ο τύπος δεδομένων του typeOf

Το typeof δεν είναι μεταβλητή. Είναι τελεστής. Οι τελετές (+ – * /) δεν έχουν κανένα τύπο δεδομένων.

Αλλά, ο τελεστής typeof επιστρέφει πάντα μια συμβολοσειρά (που περιέχει τον τύπο του τελεστή).


Η ιδιότητα constructor (The constructor Property)

Η ιδιότητα constructor επιστρέφει τη συνάρτηση constructor για όλες τις μεταβλητές JavaScript.

Παράδειγμα

"Γιάννης".constructor             			// Επιστρέφει function String()  {[native code]}
(3.14).constructor                			// Επιστρέφει function Number()  {[native code]}
false.constructor                 			// Επιστρέφει function Boolean() {[native code]}
[1,2,3,4].constructor             			// Επιστρέφει function Array()   {[native code]}
{όμομα:'Γιάννης',ηλικία:34}.constructor  	// Επιστρέφει function Object()  {[native code]}
new Date().constructor            			// Επιστρέφει function Date()    {[native code]}
function () {}.constructor        			// Επιστρέφει function Function(){[native code]}

Δοκιμάστε το »

Μπορείτε να ελέγξετε την ιδιότητα constructor για να μάθετε αν ένα αντικείμενο είναι ένα Array (περιέχει τη λέξη “Array”):

Παράδειγμα

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

Δοκιμάστε το »

Ή ακόμα πιο απλά, μπορείτε να ελέγξετε αν το αντικείμενο είναι μια Array function :

Παράδειγμα

function isArray(myArray) {
  return myArray.constructor === Array;
}

Δοκιμάστε το »

Μπορείτε να ελέγξετε την ιδιότητα constructor για να διαπιστώσετε εάν ένα αντικείμενο είναι μία Date (περιέχει τη λέξη “Date”):

Παράδειγμα

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

Δοκιμάστε το »

Ή ακόμα πιο απλά, μπορείτε να ελέγξετε αν το αντικείμενο είναι μια συνάρτηση ημερομηνίας :

Παράδειγμα

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

Δοκιμάστε το »


Μετατροπή τύπου JavaScript

Οι μεταβλητές JavaScript μπορούν να μετατραπούν σε μια νέα μεταβλητή και σε έναν άλλο τύπο δεδομένων:

  • Με τη χρήση μιας συνάρτησης JavaScript
  • Αυτόματα από τη JavaScript

Μετατροπή αριθμών σε συμβολοσειρές

Η global μέθοδος String()μπορεί να μετατρέψει τους αριθμούς σε συμβολοσειρές.

Μπορεί να χρησιμοποιηθεί σε οποιοδήποτε τύπο αριθμών, αλφαριθμητικών, μεταβλητών ή εκφράσεων:

Παράδειγμα

String(x)         // returns a string from a number variable x
String(123)       // returns a string from a number literal 123
String(100 + 23)  // returns a string from a number from an expression

Δοκιμάστε το »

Η μέθοδος αριθμών toString()κάνει το ίδιο.

Παράδειγμα

x.toString()
(123).toString()
(100 + 23).toString()

Δοκιμάστε το »

Στο κεφάλαιο μέθοδοι αριθμών , θα βρείτε περισσότερες μεθόδους που μπορούν να χρησιμοποιηθούν για τη μετατροπή αριθμών σε συμβολοσειρές:

MethodDescription
toExponential()Επιστρέφει μια συμβολοσειρά, με έναν αριθμό στρογγυλοποιημένο και γραμμένο με εκθετική σημείωση.
toFixed()Επιστρέφει μια συμβολοσειρά, με έναν αριθμό στρογγυλοποιημένο και γραμμένο με συγκεκριμένο αριθμό δεκαδικών.
toPrecision()Επιστρέφει μια συμβολοσειρά, με έναν αριθμό γραμμένο με καθορισμένο μήκος

Μετατροπή Booleans σε συμβολοσειρές

Η global μέθοδος String()μπορεί να μετατρέπει τα booleans σε συμβολοσειρές

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

Η Boolean μέθοδος toString() κάνει το ίδιο

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

Μετατροπή ημερομηνιών σε συμβολοσειρές

Η global μέθοδος 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)"

Στο κεφάλαιο μέθοδοι Date, θα βρείτε περισσότερες μεθόδους που μπορούν να χρησιμοποιηθούν για τη μετατροπή ημερομηνιών σε συμβολοσειρές:

ΜέθοδοςΠεριγραφή
getDate()Λήψη της ημέρας ως αριθμό (1-31)
getDay()Λήψη της ημέρας της εβδομαδας ως αριθμό (0-6)
getFullYear()Λήψη τετραψήφιου έτους (yyyy)
getHours()Λήψη της ώρας (0-23)
getMilliseconds()Λήψη χιλιοστών δευτερολέπτου (0-999)
getMinutes()Λήψη των λεπτών (0-59)
getMonth()Λήψη του μήνα (0-11)
getSeconds()Λήψη των δευτερολέπτων (0-59)
getTime()Λήψη της ώρας (χιλιοστά δευτερολέπτου από την 1η Ιανουαρίου 1970)

Μετατρέποντας τις συμβολοσειρές σε αριθμούς

Η global μέθοδος Number() μπορεί να μετατρέψει τις συμβολοσειρές σε αριθμούς.

Οι συμβολοσειρές που περιέχουν αριθμούς (όπως το “3.14”) μετατρέπονται σε αριθμούς (όπως 3.14).

Οι κενές συμβολοσειρές μετατρέπονται σε 0.

Οτιδήποτε άλλο μετατρέπεται σε NaN( Not a Number )

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

Στο κεφάλαιο μέθοδοι Αριθμών , θα βρείτε περισσότερες μεθόδους που μπορούν να χρησιμοποιηθούν για τη μετατροπή των συμβολοσειρών σε αριθμούς:

ΜέθοδοςΠεριγραφή
parseFloat()Αναλύει μια συμβολοσειρά και επιστρέφει έναν αριθμό κινητής υποδιαστολής
parseInt()Αναλύει μια συμβολοσειρά και επιστρέφει έναν ακέραιο αριθμό

Ο τελεστής Unary +

Ο τελεστής unary + μπορεί να χρησιμοποιηθεί για τη μετατροπή μιας μεταβλητής σε έναν αριθμό:

Παράδειγμα

var y = "5";      // y is a string
var x = + y;      // x is a number

Δοκιμάστε το »

Εάν η μεταβλητή δεν μπορεί να μετατραπεί, θα γίνει ακόμα ένας αριθμός, αλλά με την τιμή NaN (Not a Number):

Παράδειγμα

var y = "John";   // y is a string
var x = + y;      // x is a number (NaN)

Δοκιμάστε το »


Μετατροπή Booleans σε αριθμούς

Η global μέθοδος Number() μπορεί επίσης να μετατρέπει τα booleans σε αριθμούς

Number(false)     // επιστρέφει 0
Number(true)      // επιστρέφει 1

Μετατροπή ημερομηνιών σε αριθμούς

Η global μέθοδος Number() μπορεί να χρησιμοποιηθεί για τη μετατροπή ημερομηνιών σε αριθμούς

d = new Date();
Number(d)          // επιστρέφει 1404568027739

Η μέθοδος ημερομηνίας getTime() κάνει το ίδιο

d = new Date();
d.getTime()        // επιστρέφει 1404568027739

Αυτόματη μετατροπή τύπου

Όταν η JavaScript προσπαθεί να λειτουργήσει με έναν “λάθος” τύπο δεδομένων, θα προσπαθήσει να μετατρέψει την τιμή σε “σωστό” τύπο.

Το αποτέλεσμα δεν είναι πάντα αυτό που περιμένετε:

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

Δοκιμάστε το »


Αυτόματη μετατροπή συμβολοσειράς

Η JavaScript καλεί αυτόματα τη συνάρτηση toString() της μεταβλητής όταν προσπαθείτε να “εξάγετε” ένα αντικείμενο ή μια μεταβλητή:

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

// if myVar = {όνομα:"Γιάννης"}  // toString μετατρέπει σε "[object Object]"
// if myVar = [1,2,3,4]       // toString μετατρέπει σε "1,2,3,4"
// if myVar = new Date()      // toString μετατρέπει σε "Mon Jan 20 2020 21:48:40 GMT+0200"

Οι αριθμοί και τα booleans μετατρέπονται επίσης, αλλά αυτό δεν είναι πολύ ορατό:

// if myVar = 123             // toString μετατρέπει σε "123"
// if myVar = true            // toString μετατρέπει σε "true"
// if myVar = false           // toString μετατρέπει σε "false"

Πίνακας μετατροπής τύπων JavaScript

Αυτός ο πίνακας εμφανίζει το αποτέλεσμα της μετατροπής διαφορετικών τιμών JavaScript σε αριθμό, συμβολοσειρά και Boolean:

Πρωτότυπη ΤιμήΜετατροπή σε ΑριθμόΜετατροπή σε συμβολοσειράΜετατροπή σε BooleanΔοκιμάστε το
false0“false”falseΔοκιμάστε το »
true1“true”trueΔοκιμάστε το »
00“0”falseΔοκιμάστε το »
11“1”trueΔοκιμάστε το »
“0”0“0”trueΔοκιμάστε το »
“000”0“000”trueΔοκιμάστε το »
“1”1“1”trueΔοκιμάστε το »
NaNNaN“NaN”falseΔοκιμάστε το »
InfinityInfinity“Infinity”trueΔοκιμάστε το »
-Infinity-Infinity“-Infinity”trueΔοκιμάστε το »
“”0“”falseΔοκιμάστε το »
“20”20“20”trueΔοκιμάστε το »
“twenty”NaN“twenty”trueΔοκιμάστε το »
[ ]0“”trueΔοκιμάστε το »
[20]20“20”trueΔοκιμάστε το »
[10,20]NaN“10,20”trueΔοκιμάστε το »
[“twenty”]NaN“twenty”trueΔοκιμάστε το »
[“ten”,”twenty”]NaN“ten,twenty”trueΔοκιμάστε το »
function(){}NaN“function(){}”trueΔοκιμάστε το »
{ }NaN“[object Object]”trueΔοκιμάστε το »
null0“null”falseΔοκιμάστε το »
undefinedNaN“undefined”falseΔοκιμάστε το »

Οι τιμές σε εισαγωγικά υποδεικνύουν τις τιμές των συμβολοσειρών.

Οι κόκκινες τιμές υποδεικνύουν τιμές που (ορισμένοι) προγραμματιστές δεν θα περίμεναν.

Days
Hours
Minutes

37. Μετατροπή τύπων JavaScript (Type Conversion)

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: