7.6 Η μετατροπή τύπων στη JavaScript

Η μετατροπή τύπων στη JavaScript αναφέρεται στη δυνατότητα της γλώσσας να μετατρέπει μεταξύ διαφορετικών τύπων δεδομένων. Οι τύποι δεδομένων στη JavaScript περιλαμβάνουν τους ακόλουθους:

Πρωταρχικοί τύποι (Primitive types):

• string: περιγραφικό κείμενο, π.χ. “Hello”
• number: αριθμοί, π.χ. 42, 3.14
• boolean: αληθές (true) ή ψευδές (false)
• undefined: αν μια μεταβλητή δεν έχει ανατεθεί τιμή, έχει την τιμή undefined
• null: αναπαριστά μια “άδεια” ή μη υπάρχουσα τιμή

Σύνθετοι τύποι (Complex types):

• object: αντικείμενα, π.χ. { name: “John”, age: 30 }
• array: πίνακες, π.χ. [1, 2, 3]
• function: συναρτήσεις, π.χ. function add(a, b) { return a + b; }

Οι μετατροπές τύπων μπορούν να γίνουν αυτόματα (ιμπλίκιτη μετατροπή) ή με τη χρήση συναρτήσεων μετατροπής (τύπου όπως String(), Number(), Boolean() κ.λπ.). Ας δούμε μερικά παραδείγματα:

// Ιμπλίκιτη μετατροπή
let x = 42; // number
let y = "3.14"; // string
let z = x + y; // Η μετατροπή είναι αυτόματη, z θα είναι "423.14" (συνένωση κειμένου)

// Συναρτησιακή μετατροπή
let a = "42";
let b = Number(a); // μετατροπή σε αριθμό, b θα είναι 42 (τύπος number)

let c = 3.14;
let d = String(c); // μετατροπή σε κείμενο, d θα είναι "3.14" (τύπος string)

let e = "true";
let f = Boolean(e); // μετατροπή σε boolean, f θα είναι true (τύπος boolean)

Καλό είναι να είστε προσεκτικοί κατά τη μετατροπή τύπων, ειδικά όταν χρησιμοποιείτε ιμπλίκιτες μετατροπές, για να αποφύγετε ανεπιθύμητα αποτελέσματα ή σφάλματα.

[adinserter block=”2″]

Για να μετατρέψετε ένα κείμενο (string) σε αριθμό (number) στη JavaScript, μπορείτε να χρησιμοποιήσετε τη συνάρτηση Number() ή τη συνάρτηση parseFloat() ή τη συνάρτηση parseInt(), ανάλογα με το αποτέλεσμα που θέλετε να επιτύχετε:

let strNum = "42"; // κείμενο με αριθμό

let num1 = Number(strNum); // μετατροπή με τη συνάρτηση Number()
let num2 = parseFloat(strNum); // μετατροπή σε δεκαδικό αριθμό με τη συνάρτηση parseFloat()
let num3 = parseInt(strNum); // μετατροπή σε ακέραιο αριθμό με τη συνάρτηση parseInt()

console.log(num1); // 42 (τύπος number)
console.log(num2); // 42 (τύπος number)
console.log(num3); // 42 (τύπος number)

Η Number() μετατρέπει το κείμενο σε αριθμό, αν το κείμενο περιέχει αριθμητικούς χαρακτήρες. Αν το κείμενο περιέχει αλφαβητικούς χαρακτήρες ή άδειο κείμενο, η μετατροπή θα επιστρέψει NaN (Not a Number).

Η parseFloat() μετατρέπει το κείμενο σε δεκαδικό αριθμό, αν το κείμενο περιέχει αριθμητικούς χαρακτήρες με δεκαδικό διαχωριστικό (π.χ. “3.14”).

Η parseInt() μετατρέπει το κείμενο σε ακέραιο αριθμό, αν το κείμενο περιέχει αριθμητικούς χαρακτήρες χωρίς δεκαδικό διαχωριστικό. Αν το κείμενο περιέχει δεκαδικό διαχωριστικό, η μετατροπή θα σταματήσει στο δεκαδικό διαχωριστικό και θα αγνοήσει τους υπόλοιπους χαρακτήρες μετά το διαχωριστικό.

Ο μοναδικός (+) τελεστής, γνωστός ως “unary plus operator”, χρησιμοποιείται στη JavaScript για να μετατρέψει μια μη-αριθμητική τιμή σε αριθμό. Αν το αρχικό δεδομένο είναι ένας αριθμός, τότε δεν συμβαίνει τίποτα. Αλλά, αν το αρχικό δεδομένο είναι μη-αριθμητικό, τότε ο τελεστής (+) το μετατρέπει σε αριθμό.

Ας δούμε μερικά παραδείγματα:

let strNum = "42"; // κείμενο με αριθμό

let num1 = +strNum; // μετατροπή με τον unary + τελεστή
let num2 = +"3.14"; // μετατροπή κειμένου με δεκαδικό σε δεκαδικό αριθμό
let num3 = +"John"; // μετατροπή κειμένου σε NaN (Not a Number)

console.log(num1); // 42 (τύπος number)
console.log(num2); // 3.14 (τύπος number)
console.log(num3); // NaN (τύπος number)

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

let strNum = "42"; // κείμενο με αριθμό
let num1 = +strNum; // μετατροπή σε αριθμό

let strValue = "10";
let intValue = +strValue; // μετατροπή σε αριθμό

console.log(num1); // 42
console.log(intValue); // 10

Ο unary + τελεστής είναι ένας γρήγορος τρόπος για μετατροπή μη-αριθμητικών τιμών σε αριθμούς, χωρίς να χρειάζεται να χρησιμοποιήσετε τις συναρτήσεις Number(), parseFloat() ή parseInt().

Στη JavaScript, μπορείτε να μετατρέψετε αριθμούς σε κείμενο χρησιμοποιώντας τη μέθοδο toString() ή τον unary τελεστή (+) για τη μετατροπή σε κείμενο. Ας δούμε παραδείγματα για τις δύο μεθόδους:

Μέθοδος toString():

let number = 42; // αριθμός
let str1 = number.toString(); // μετατροπή αριθμού σε κείμενο

console.log(str1); // "42" (τύπος κειμένου)

Τελεστής (+):

let number = 3.14; // αριθμός
let str2 = number + ""; // μετατροπή αριθμού σε κείμενο με τον unary τελεστή +

console.log(str2); // "3.14" (τύπος κειμένου)

Η μέθοδος toString() είναι η προτιμώμενη μέθοδος για τη μετατροπή αριθμών σε κείμενο, καθώς παρέχει περισσότερη ευελιξία. Για παράδειγμα, μπορείτε να δώσετε έναν ακέραιο ως όρισμα στη μέθοδο toString() για να μετατρέψετε τον αριθμό σε δυαδικό, οκταδικό, δεκαεξαδικό κ.λπ.:

let number = 42; // αριθμός
let binaryStr = number.toString(2); // μετατροπή σε δυαδικό κείμενο

console.log(binaryStr); // "101010" (τύπος κειμένου)

Σημειώστε ότι οι αριθμοί στη JavaScript μπορούν να αποθηκεύονται ως ακέραιοι ή δεκαδικοί, οπότε δεν είναι απαραίτητο να δηλώνετε έναν αριθμό ως δεκαδικό για να μπορέσετε να τον μετατρέψετε σε κείμενο. Η μέθοδος toString() είναι εξίσου χρήσιμη για ακέραιους και δεκαδικούς αριθμούς.

[adinserter block=”3″]

Για να μετατρέψετε μια ημερομηνία (Date object) σε αριθμό, μπορείτε να χρησιμοποιήσετε τη μέθοδο getTime(). Αυτή η μέθοδος επιστρέφει τον αριθμό των χιλιοδευτερολέπτων που έχουν παρέλθει από την 1η Ιανουαρίου 1970 έως τη συγκεκριμένη ημερομηνία.

Ας δούμε ένα παράδειγμα:

let myDate = new Date(); // ημερομηνία και ώρα της τρέχουσας στιγμής
let timestamp = myDate.getTime(); // μετατροπή της ημερομηνίας σε αριθμό

console.log(timestamp); // αριθμός (χιλιοδευτερόλεπτα από την 1η Ιανουαρίου 1970)

Σημειώστε ότι η getTime() επιστρέφει τον αριθμό των χιλιοδευτερολέπτων σε μορφή UTC (Παγκόσμια Συντονισμένη Ώρα). Εάν θέλετε να μετατρέψετε την ημερομηνία σε διαφορετική μορφή (π.χ. δευτερόλεπτα από την 1η Ιανουαρίου 1970), θα πρέπει να προσαρμόσετε το αποτέλεσμα ανάλογα.

Για να μετατρέψετε ημερομηνίες σε συμβολοσειρές στη JavaScript, μπορείτε να χρησιμοποιήσετε τη μέθοδο toDateString(), την toLocaleDateString() ή την toISOString() ανάλογα με τις ανάγκες σας.

Εδώ είναι παραδείγματα για την μετατροπή ημερομηνιών σε συμβολοσειρές:

var currentDate = new Date(); // Δημιουργία τρέχουσας ημερομηνίας

var dateString1 = currentDate.toDateString();
console.log(dateString1); // Εμφανίζει: "Wed Jul 07 2023"

var dateString2 = currentDate.toLocaleDateString('el-GR'); // Με ελληνική μορφή
console.log(dateString2); // Εμφανίζει: "Τετάρτη, 7 Ιουλίου 2023"

var dateString3 = currentDate.toISOString();
console.log(dateString3); // Εμφανίζει: "2023-07-07T00:00:00.000Z"

Στο πρώτο παράδειγμα, χρησιμοποιούμε την toDateString() για να μετατρέψουμε την ημερομηνία σε μια συμβολοσειρά που περιέχει την ημερομηνία στην τοπική μορφή χωρίς την ώρα.

Στο δεύτερο παράδειγμα, χρησιμοποιούμε την toLocaleDateString() για να μετατρέψουμε την ημερομηνία σε μια συμβολοσειρά που περιέχει την ημερομηνία στην τοπική μορφή με την ημέρα της εβδομάδας και τον μήνα στα ελληνικά.

Στο τρίτο παράδειγμα, χρησιμοποιούμε την toISOString() για να μετατρέψουμε την ημερομηνία σε μια συμβολοσειρά που περιέχει την ημερομηνία και την ώρα σε μορφή ISO 8601.

Μπορείτε να επιλέξετε τη μέθοδο που ταιριάζει καλύτερα με τις ανάγκες της εφαρμογής σας.

Για να μετατρέψετε τις λογικές τιμές (Booleans) σε αριθμούς στη JavaScript, μπορείτε απλά να χρησιμοποιήσετε τον αριθμητικό τελεστή, δηλαδή τον πρόθεμα +, για να μετατρέψετε true σε 1 και false σε 0.

Εδώ είναι ένα παράδειγμα:

var booleanValue1 = true;
var booleanValue2 = false;

var numberValue1 = +booleanValue1; // Μετατροπή true σε 1
var numberValue2 = +booleanValue2; // Μετατροπή false σε 0

console.log(numberValue1); // Εμφανίζει: 1
console.log(numberValue2); // Εμφανίζει: 0

Χρησιμοποιώντας τον αριθμητικό τελεστή +, οι λογικές τιμές μετατρέπονται αυτόματα σε αριθμούς. Αν το true μετατραπεί σε 1, ενώ το false σε 0.

Μπορείτε να χρησιμοποιήσετε αυτήν τη μέθοδο όταν χρειάζεται να μετατρέψετε λογικές τιμές σε αριθμούς για περαιτέρω υπολογισμούς ή εμφανίσεις.

Για να μετατρέψετε λογικές τιμές (Booleans) σε συμβολοσειρές (Strings) στη JavaScript, μπορείτε να χρησιμοποιήσετε τη μέθοδο toString() ή την κατασκευή συμβολοσειράς.

Εδώ είναι ένα παράδειγμα:

var booleanValue1 = true;
var booleanValue2 = false;

var stringValue1 = booleanValue1.toString(); // Μετατροπή true σε "true"
var stringValue2 = booleanValue2.toString(); // Μετατροπή false σε "false"

console.log(stringValue1); // Εμφανίζει: "true"
console.log(stringValue2); // Εμφανίζει: "false"

Η μέθοδος toString() επιστρέφει τη λογική τιμή σε μορφή συμβολοσειράς, δηλαδή “true” για το true και “false” για το false.

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε την κατασκευή συμβολοσειράς, που μπορεί να χρησιμοποιηθεί για να μετατρέψετε λογικές τιμές σε συμβολοσειρές χωρίς να χρειάζεται να καλέσετε τη μέθοδο toString():

var booleanValue1 = true;
var booleanValue2 = false;

var stringValue1 = String(booleanValue1); // Μετατροπή true σε "true"
var stringValue2 = String(booleanValue2); // Μετατροπή false σε "false"

console.log(stringValue1); // Εμφανίζει: "true"
console.log(stringValue2); // Εμφανίζει: "false"

Και οι δύο προσεγγίσεις είναι ισοδύναμες και μπορείτε να επιλέξετε την πιο βολική για την εφαρμογή σας.

Η αυτόματη μετατροπή τύπων είναι μια δυνατότητα που παρέχεται από την JavaScript και αφορά τον αυτόματο μετασχηματισμό των τιμών μεταξύ διαφορετικών τύπων δεδομένων. Η JavaScript προσπαθεί να προσαρμόσει τις τιμές στους κατάλληλους τύπους όταν χρειάζεται.

Για παράδειγμα:

var numberValue = 42; // Αριθμός
var stringValue = "10"; // Συμβολοσειρά

var result = numberValue + stringValue;
console.log(result); // Εμφανίζει: "4210"

Σε αυτό το παράδειγμα, ο αριθμός 42 και η συμβολοσειρά "10" προστίθενται μεταξύ τους. Η JavaScript αυτόματα μετατρέπει τον αριθμό 42 σε συμβολοσειρά "42" για να ταιριάξει τον τύπο με την άλλη συμβολοσειρά "10". Έτσι, το αποτέλεσμα της πρόσθεσης είναι η συμβολοσειρά "4210".

[adinserter block=”4″]

Μπορείτε να βασίζεστε στην αυτόματη μετατροπή τύπων για απλές πράξεις, όμως πρέπει να είστε προσεκτικοί όταν οι πράξεις είναι πιο σύνθετες ή όταν χρειάζεστε ακριβή έλεγχο τύπων. Σε ορισμένες περιπτώσεις, μπορεί να χρειαστεί να πραγματοποιήσετε μη αυτόματη μετατροπή τύπων χρησιμοποιώντας τις συναρτήσεις όπως parseInt() και parseFloat() για αριθμητικές τιμές, και toString() για τη μετατροπή σε συμβολοσειρές.

Παρακάτω θα σας δώσω ένα παράδειγμα για κάθε μετατροπή που αναφέραμε:

1. Μετατροπή αριθμού σε συμβολοσειρά (Number to String):

var numberValue = 42;
var stringValue = numberValue.toString(); // Μετατρέπει τον αριθμό 42 σε τη συμβολοσειρά "42"

console.log(typeof stringValue); // Εμφανίζει: "string"

2. Μετατροπή συμβολοσειράς σε αριθμό (String to Number):

var stringValue = "10";
var numberValue = +stringValue; // Μετατρέπει τη συμβολοσειρά "10" στον αριθμό 10

console.log(typeof numberValue); // Εμφανίζει: "number"

3. Μετατροπή λογικής τιμής σε συμβολοσειρά (Boolean to String):

var booleanValue = true;
var stringValue = booleanValue.toString(); // Μετατρέπει τη λογική τιμή true στη συμβολοσειρά "true"

console.log(typeof stringValue); // Εμφανίζει: "string"

4. Μετατροπή συμβολοσειράς σε λογική τιμή (String to Boolean):

var stringValue = "false";
var booleanValue = Boolean(stringValue); // Μετατρέπει τη συμβολοσειρά "false" στη λογική τιμή false

console.log(typeof booleanValue); // Εμφανίζει: "boolean"

Αυτά είναι μερικά παραδείγματα που δείχνουν τις μετατροπές μεταξύ διαφορετικών τύπων δεδομένων στην JavaScript. Είναι σημαντικό να γνωρίζετε αυτές τις μετατροπές και να τις χρησιμοποιείτε κατάλληλα για τις ανάγκες της εφαρμογής σας.

Η αυτόματη μετατροπή σε συμβολοσειρές είναι μια χρήσιμη λειτουργία στη JavaScript, όπου οι τιμές μετατρέπονται αυτόματα σε συμβολοσειρές όταν αναμένονται ως συμβολοσειρές. Αυτό συμβαίνει όταν χρησιμοποιείτε τις τιμές σε περιβάλλοντα που αναμένουν συμβολοσειρές, όπως την εμφάνιση σε κονσόλα, ενσωματωμένα μηνύματα, ή την συνένωση (concatenation) σε άλλες συμβολοσειρές.

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

var num = 42;
var str = "The answer is: " + num; // Αυτόματα μετατρέπει το num σε συμβολοσειρά για συνένωση

console.log(str); // Εμφανίζει: "The answer is: 42"

var bool = true;
var message = "The value is: " + bool; // Αυτόματα μετατρέπει το bool σε συμβολοσειρά για συνένωση

console.log(message); // Εμφανίζει: "The value is: true"

Στα παραπάνω παραδείγματα, το num και το bool αυτόματα μετατρέπονται σε συμβολοσειρές όταν συνενώνονται με άλλες συμβολοσειρές. Αυτό κάνει τον κώδικα πιο σύντομο και πιο ευανάγνωστο όταν συνδυάζετε διαφορετικούς τύπους δεδομένων σε μια συμβολοσειρά.

Ωστόσο, πρέπει να είστε προσεκτικοί με την αυτόματη μετατροπή σε συμβολοσειρές και να ελέγχετε τους τύπους των δεδομένων στην περίπτωση που χρειάζεται ακριβής διαχείριση τύπων ή μαθηματικές πράξεις. Σε αυτές τις περιπτώσεις, μπορείτε να χρησιμοποιήσετε τις κατάλληλες συναρτήσεις μετατροπής, όπως parseInt() ή parseFloat() για αριθμητικές τιμές, και τη μέθοδο toString() για τη μετατροπή σε συμβολοσειρές.

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

Αρχική Τιμή	Μετατροπή σε Αριθμό	Μετατροπή σε Συμβολοσειρά	Μετατροπή σε Λογική
false	0	“false”	false
true	1	“true”	true
0	0	“0”	false
1	1	“1”	true
“0”	0	“0”	true
“000”	0	“000”	true
“1”	1	“1”	true
NaN	NaN	“NaN”	false
Infinity	Infinity	“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
null	0	“null”	false
undefined	NaN	“undefined”	false

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