ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ

Το Αντικείμενο String της JavaScript
και οι Μέθοδοί του

 

Το Αντικείμενο String της JavaScript

Το αντικείμενο string χρησιμοποιείται όταν έχουμε να κάνουμε με κείμενο (text).

 

Η Ιδιότητα length

Η ιδιότητα αυτή επιστρέφει το πλήθος των χαρακτήρων που υπάρχουν σ’ ένα string. Το επόμενο παράδειγμα δημιουργεί μια μεταβλητή τύπου string, της δίνει τιμή, την εμφανίζει και μετά υπολογίζει και εμφανίζει και το πλήθος των χαρακτήρων που περιέχει.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write("<p>" + str + "</p>")

document.write(str.length)

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

Florina per sempre!

19

 

Η Μέθοδος anchor()

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

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

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.anchor("florinapersempre"))

</script>

</body>

</html>

Το ίδιο αποτέλεσμα με το παραπάνω παράδειγμα θα μπορούσαμε να είχαμε πετύχει και με καθαρό HTML κώδικα, ως εξής :

<a name="florinapersempre">Florina per sempre!</a>

 

Η Μέθοδος big()

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

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str)

document.write("<p>" + str.big())

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

Florina per sempre!

Florina per sempre!

 

Η Μέθοδος blink()

Η μέθοδος αυτή κάνει ένα string να αναβοσβήνει. Πρέπει να έχουμε υπόψη μας ότι η μέθοδος αυτή δεν έχει αποτέλεσμα στον Internet Explorer. Στο επόμενο παράδειγμα δημιουργούμε μια μεταβλητή string, της καταχωρούμε κάποιο κείμενο, την εμφανίζουμε πρώτα ως κανονικό κείμενο και μετά χρησιμοποιούμε τη μέθοδο blink() για να δούμε την επίδρασή της στην εμφάνιση του ίδιου κειμένου.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str)

document.write("<p>" + str.blink())

</script>

</body>

</html>

 

Η Μέθοδος bold()

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

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str)

document.write("<p>" + str.bold())

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

Florina per sempre!

Florina per sempre!

 

Η Μέθοδος charAt()

Η μέθοδος αυτή επιστρέφει τον χαρακτήρα που βρίσκεται σε μια συγκεκριμένη θέση ενός string. Πρέπει να έχουμε υπόψη μας ότι ο πρώτος χαρακτήρας ενός string βρίσκεται στη θέση 0. Στο επόμενο παράδειγμα δημιουργούμε μια μεταβλητή string, της καταχωρούμε κάποιο κείμενο και μετά εμφανίζουμε τους χαρακτήρες που βρίσκονται στις θέσεις 1 και 2 του string.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write("Ο 2ος χαρακτήρας του string : " +

str.charAt(1) + "<br />")

document.write("Ο 3ος χαρακτήρας του string : " +

str.charAt(2))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής : 

Ο 2ος χαρακτήρας του string : l

Ο 3ος χαρακτήρας του string : o

 

Η Μέθοδος charCodeAt()

Η μέθοδος αυτή επιστρέφει τον κώδικα Unicode του χαρακτήρα που βρίσκεται σε μια συγκεκριμένη θέση ενός string. Πρέπει να έχουμε υπόψη μας ότι ο πρώτος χαρακτήρας ενός string βρίσκεται στη θέση 0. Στο επόμενο παράδειγμα δημιουργούμε μια μεταβλητή string, της καταχωρούμε κάποιο κείμενο και μετά εμφανίζουμε τους κώδικες Unicode των χαρακτήρων που βρίσκονται στις θέσεις 1 και 2 του string.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write("Ο κώδικας Unicode του 2ου χαρακτήρα

του string είναι : " + str.charCodeAt(1) + "<br />")

document.write("Ο κώδικας Unicode του 3ου χαρακτήρα

του string είναι : " + str.charCodeAt(2))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

Ο κώδικας Unicode του 2ου χαρακτήρα του string είναι : 108

Ο κώδικας Unicode του 3ου χαρακτήρα του string είναι : 111

 

Η Μέθοδος concat()

Η μέθοδος αυτή συνδυάζει δύο ή και περισσότερα strings και τα επιστρέφει ως ένα καινούργιο string. Στο επόμενο παράδειγμα ενώνουμε δύο strings.

<html>

<body>

<script type="text/javascript">

var str1="Florina "

var str2="per sempre!"

document.write(str1.concat(str2))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής : 

Florina per sempre!

 

Η Μέθοδος fixed()

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

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.fixed())

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

Florina per sempre!

 

Η Μέθοδος fontcolor()

Η μέθοδος αυτή επιστρέφει ένα string μ’ ένα συγκεκριμένο χρώμα. 

<html>

<body>

<script type="text/javascript">

var txt="Florina per sempre!"

                        document.write("<p>" + txt.fontcolor() + "</p>")

document.write("<p>" + txt.fontcolor('red') + "</p>")

document.write("<p>" + txt.fontcolor('blue') + "</p>")

document.write("<p>" + txt.fontcolor('green') + "</p>")

</script>

</body>

</html>

 

Η Μέθοδος fontsize()

Η μέθοδος αυτή επιστρέφει ένα string μ’ ένα συγκεκριμένο μέγεθος.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.fontsize(16))

</script>

</body>

</html>

 

Η Μέθοδος fromCharCode()

Η μέθοδος αυτή επιστρέφει έναν χαρακτήρα από την αντίστοιχη τιμή του στον κώδικα Unicode. Το επόμενο παράδειγμα εμφανίζει με τη σειρά τους χαρακτήρες FLORINA από τους αντίστοιχους κώδικες Unicode.

<html>

<body>

<script type="text/javascript">

document.write(String.fromCharCode(70, 76, 79, 82, 73, 78, 65))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

FLORINA

 

Η Μέθοδος indexOf()

Η μέθοδος αυτή επιστρέφει τη θέση της πρώτης εμφάνισης ενός συγκεκριμένου string μέσα σ’ ένα άλλο string. Αν δεν βρεθεί κάτι, επιστρέφει την τιμή –1. Η μέθοδος αυτή ξεχωρίζει τα πεζά από τα κεφαλαία γράμματα (case sensitive). Το επόμενο παράδειγμα ελέγχει αν ένα string περιέχει μια συγκεκριμένη λέξη. Αν η λέξη βρεθεί μέσα στο string, επιστρέφεται η θέση του πρώτου χαρακτήρα της λέξης που υπάρχει μέσα στο string.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

var pos=str.indexOf("Florina")

if (pos>=0) {

document.write("Το string βρέθηκε στη θέση : ")

document.write(pos + "<br />")

}

else {

document.write("Το string δεν βρέθηκε")

}

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

Το string βρέθηκε στη θέση : 0

Στο επόμενο παράδειγμα κάνουμε διάφορες αναζητήσεις της λέξης per μέσα στο string "Florina per sempre!".

<html>

<body>

<script type="text/javascript">

                        var str="Florina per sempre!"

document.write(str.indexOf("per") + "<br />")

document.write(str.indexOf("Per") + "<br />")

document.write(str.indexOf("peer") + "<br />")

document.write(str.indexOf("per!"))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

8
-1

-1

-1

 

Η Μέθοδος italics()

Η μέθοδος αυτή επιστρέφει ένα string με πλάγια γράμματα (italic).

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.italics())

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

Florina per sempre!

 

Η Μέθοδος lastIndexOf()

Η μέθοδος αυτή επιστρέφει τη θέση της πρώτης εμφάνισης ενός συγκεκριμένου string μέσα σ’ ένα άλλο string. Αν δεν βρεθεί κάτι, επιστρέφει την τιμή –1. Η μέθοδος αυτή ξεχωρίζει τα πεζά από τα κεφαλαία γράμματα (case sensitive) και έχει το χαρακτηριστικό ότι κάνει την αναζήτηση από τα δεξιά προς τα αριστερά, δηλ. από το τέλος προς την αρχή του string. Στο επόμενο παράδειγμα κάνουμε διάφορες αναζητήσεις της λέξης per μέσα στο string "Florina per sempre!".

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.lastIndexOf("per") + "<br />")

document.write(str.lastIndexOf("Per") + "<br />")

document.write(str.lastIndexOf("peer") + "<br />")

document.write(str.lastIndexOf("per!"))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

8
-1

-1

-1

 

Η Μέθοδος link()

Η μέθοδος αυτή επιστρέφει ένα string ως υπερσύνδεσμο (hyperlink). Στο επόμενο παράδειγμα κάνουμε το κείμενο "Florina per sempre!" να γίνει υπερσύνδεσμος (hyperlink) για μια ιστοσελίδα.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.link("http://www.florina.gr"))

</script>

</body>

</html>

 

Η Μέθοδος match()

Η μέθοδος αυτή είναι παρόμοια με τις μεθόδους indexOf() and lastIndexOf(), δηλ. ελέγχει αν ένα string περιέχει ένα συγκεκριμένο κείμενο, αλλά αντί να επιστρέφει μια αριθμητική τιμή, επιστρέφει το ίδιο το string ή την τιμή null αν το string δεν βρεθεί. Η μέθοδος αυτή ξεχωρίζει τα πεζά από τα κεφαλαία γράμματα (case sensitive). Στο επόμενο παράδειγμα κάνουμε διάφορες αναζητήσεις της λέξης per μέσα στο string "Florina per sempre!".

<html>

<body>

<script type="text/javascript">

                        var str="Florina per sempre!"

document.write(str.match("per") + "<br />")

document.write(str.match("Per") + "<br />")

document.write(str.match("peer") + "<br />")

document.write(str.match("per!"))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

per
null

null

null

 

Η Μέθοδος replace()

Η μέθοδος αυτή αντικαθιστά κάποιους συγκεκριμένους χαρακτήρες ενός string με κάποιους άλλους και ξεχωρίζει τα πεζά από τα κεφαλαία γράμματα (case sensitive). Για να κάνουμε μια αναζήτηση όπου δεν θα ξεχωρίζουν τα πεζά από τα κεφαλαία γράμματα, μπορούμε να χρησιμοποιήσουμε την παράμετρο i (insensitive), ενώ για να αντικαταστήσουμε όλες τις εμφανίσεις των χαρακτήρων που υπάρχουν μέσα στο string, μπορούμε να χρησιμοποιήσουμε την παράμετρο g (global). Στο επόμενο παράδειγμα κάνουμε διάφορες αντικαταστάσεις της λέξης per μέσα στο string "Florina Per per sempre!".

<html>

<body>

<script type="text/javascript">

var str="Florina Per per sempre!"

document.write(str.replace(/per/, "pour") + "<br />")

document.write(str.replace(/per/i, "pour") + "<br />")

document.write(str.replace(/per/gi, "pour"))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

Florina Per pour sempre!

Florina pour per sempre!

Florina pour pour sempre!

 

Η Μέθοδος search()

Η μέθοδος αυτή επιστρέφει έναν ακέραιο αν το string περιέχει κάποιους συγκεκριμένους χαρακτήρες, πιο συγκεκριμένα επιστρέφει τη θέση μιας λέξης μέσα σε μια άλλη μεγαλύτερη λέξη, και επιστρέφει την τιμή –1 αν το string δεν περιέχει τους συγκεκριμένους χαρακτήρες. Η μέθοδος αυτή ξεχωρίζει τα πεζά από τα κεφαλαία γράμματα (case sensitive). Στο επόμενο παράδειγμα κάνουμε διάφορες αναζητήσεις της λέξης per μέσα στο string "Florina per sempre!".

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.search("per") + "<br />")

document.write(str.search("Per") + "<br />")

document.write(str.search("peer") + "<br />")

document.write(str.search("per!"))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

8

-1

-1

-1

 

Η Μέθοδος slice()

Η μέθοδος αυτή επιστρέφει ένα string που περιέχεται σε μια συγκεκριμένη θέση μέσα σ’ ένα άλλο string. Για να μπορέσουμε να χρησιμοποιήσουμε τη μέθοδο αυτή για να βρούμε έναν χαρακτήρα από το τέλος ενός string, πρέπει να χρησιμοποιήσουμε αρνητικούς αριθμούς θέσης. Στο επόμενο παράδειγμα κάνουμε αναζήτηση για να βρούμε τη θέση (index) της λέξης "sempre!" μέσα στο string "Florina per sempre!" και μετά την εκτυπώνουμε με τη μέθοδο slice().

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

                        document.write(str.search("sempre!") + "<br />")

document.write(str.slice(12))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

12

sempre!

 

Η Μέθοδος small()

Η μέθοδος αυτή μετατρέπει ένα string σε γράμματα μικρού μεγέθους (small text). Στο επόμενο παράδειγμα εμφανίζουμε το κείμενο "Florina per sempre!" με γράμματα μικρού μεγέθους.

 

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.small())

</script>

</body>

</html>

 

Η Μέθοδος split()

Η μέθοδος αυτή διαιρεί ένα string σ’ έναν πίνακα (array) από strings. Για να χρησιμοποιήσουμε αυτή τη μέθοδο, θα πρέπει να ορίσουμε ποιον χαρακτήρα θα πρέπει να χρησιμοποιήσει για να διασπάσει το string, όπως για παράδειγμα split("."), που χρησιμοποιεί τον χαρακτήρα της τελείας για να διασπάσει ένα string. Στο επόμενο παράδειγμα διασπάμε ένα string με διάφορους τρόπους.

<html>

<body>

<script type="text/javascript">

var str="Florina, Grevena, Kastoria, Kozani"

                        document.write(str.split(" ") + "<br />")

document.write(str.split(",") + "<br />")

document.write(str.split(" ", 3))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει τα εξής :

Florina,,Grevena,,Kastoria,,Kozani
Florina, Grevena, Kastoria, Kozani
Florina,,Grevena,,Kastoria
,

 

Η Μέθοδος strike()

Η μέθοδος αυτή επιστρέφει ένα string με μια διακριτή διαγραφή (strikethrough). Στο επόμενο παράδειγμα εμφανίζουμε το κείμενο "Florina per sempre!" με μια γραμμή ανάμεσα στα γράμματα.

 

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.strike())

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

Florina per sempre!

 

Η Μέθοδος sub()

Η μέθοδος αυτή μετατρέπει ένα string σε μορφή δείκτη (subscript). Στο επόμενο παράδειγμα εμφανίζουμε το κείμενο "Florina per sempre!" με τη μορφή δείκτη.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.sub())

            </script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

Florina per sempre!

 

Η Μέθοδος substr()

Η μέθοδος αυτή επιστρέφει ένα συγκεκριμένο κομμάτι ενός string. Η μέθοδος δέχεται δύο ορίσματα και αν για παράδειγμα οι τιμές αυτές είναι οι 2 και 7, το string που θα επιστραφεί θα αρχίζει από τον 2ο χαρακτήρα (όπου η αρχή της αρίθμησης είναι από το 0) και θα περιέχει 7 χαρακτήρες. Στο επόμενο παράδειγμα καλούμε τη μέθοδο substr() με τα ορίσματα 2 και 7 και με string το κείμενο "Florina per sempre!".

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.substr(2, 7))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

orina p

 

Η Μέθοδος substring()

Η μέθοδος αυτή επιστρέφει ένα συγκεκριμένο κομμάτι ενός string. Η μέθοδος δέχεται δύο ορίσματα και αν για παράδειγμα οι τιμές αυτές είναι οι 2 και 6, το string που θα επιστραφεί θα αρχίζει από τον 2ο χαρακτήρα (όπου η αρχή της αρίθμησης είναι από το 0) μέχρι και, αλλά χωρίς να τον περιλαμβάνει, τον 6ο χαρακτήρα. Στο επόμενο παράδειγμα καλούμε τη μέθοδο substring() με τα ορίσματα 2 και 6 και με string το κείμενο "Florina per sempre!".

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.substring(2, 6))

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

orin

 

Η Μέθοδος sup()

Η μέθοδος αυτή μετατρέπει ένα string σε μορφή εκθέτη (superscript). Στο επόμενο παράδειγμα εμφανίζουμε το κείμενο "Florina per sempre!" με τη μορφή εκθέτη.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.sup())

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

Florina per sempre!

 

Η Μέθοδος toLowerCase()

Η μέθοδος αυτή μετατρέπει ένα string σε πεζά γράμματα (lower case). Στο επόμενο παράδειγμα εμφανίζουμε το κείμενο "FLORINA PER SEMPRE!" με πεζά γράμματα.

<html>

<body>

<script type="text/javascript">

var str="FLORINA PER SEMPRE!"

document.write(str.toLowerCase())

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

florina per sempre!

 

Η Μέθοδος toUpperCase()

Η μέθοδος αυτή μετατρέπει ένα string σε κεφαλαία γράμματα (upper case). Στο επόμενο παράδειγμα εμφανίζουμε το κείμενο "Florina per sempre!" με κεφαλαία γράμματα.

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write(str.toUpperCase())

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εκτυπώσει το εξής :

FLORINA PER SEMPRE!

 

back.gif (9867 bytes)

Επιστροφή