Πώς να κεφαλαιοποιήσετε το πρώτο γράμμα κάθε λέξης σε JavaScript - ένα JS Uppercase Tutorial

Σε αυτό το άρθρο, θα μάθετε πώς να κεφαλαιοποιήσετε το πρώτο γράμμα οποιασδήποτε λέξης σε JavaScript. Μετά από αυτό, θα κεφαλαιοποιήσετε το πρώτο γράμμα όλων των λέξεων από μια πρόταση.

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

Κεφαλαιοποιήστε το πρώτο γράμμα μιας λέξης

Πρώτα απ 'όλα, ας ξεκινήσουμε με κεφαλαία το πρώτο γράμμα μιας λέξης. Αφού μάθετε πώς να το κάνετε αυτό, θα προχωρήσουμε στο επόμενο επίπεδο - το κάνουμε σε κάθε λέξη από μια πρόταση. Εδώ είναι ένα παράδειγμα:

const publication = "freeCodeCamp"; 

Στο JavaScript, αρχίζουμε να μετράμε από το 0. Για παράδειγμα, εάν έχουμε έναν πίνακα, η πρώτη θέση είναι 0, όχι 1.

Επίσης, μπορούμε να έχουμε πρόσβαση σε κάθε γράμμα από μια συμβολοσειρά με τον ίδιο τρόπο που έχουμε πρόσβαση σε ένα στοιχείο από έναν πίνακα. Για παράδειγμα, το πρώτο γράμμα από τη λέξη " freeCodeCamp " βρίσκεται στη θέση 0.

Αυτό σημαίνει ότι μπορούμε να πάρουμε το γράμμα f από το freeCodeCamp κάνοντας publication[0].

Με τον ίδιο τρόπο, μπορείτε να έχετε πρόσβαση σε άλλα γράμματα από τη λέξη. Μπορείτε να αντικαταστήσετε το "0" με οποιονδήποτε αριθμό, αρκεί να μην υπερβαίνετε το μήκος της λέξης. Με την υπέρβαση του μήκους της λέξης, εννοώ να προσπαθώ να κάνω κάτι τέτοιο publication[25, το οποίο ρίχνει ένα σφάλμα επειδή υπάρχουν μόνο δώδεκα γράμματα στη λέξη "freeCodeCamp".

Πώς να κεφαλαιοποιήσετε το πρώτο γράμμα

Τώρα που ξέρουμε πώς να αποκτήσουμε πρόσβαση σε ένα γράμμα από μια λέξη, ας το αξιοποιήσουμε.

Στο JavaScript, έχουμε μια μέθοδο που ονομάζεται toUpperCase(), την οποία μπορούμε να καλέσουμε σε συμβολοσειρές ή λέξεις. Όπως μπορούμε να υπονοήσουμε από το όνομα, το λέτε σε μια συμβολοσειρά / λέξη και πρόκειται να επιστρέψει το ίδιο πράγμα, αλλά με κεφαλαία γράμματα.

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

const publication = "freeCodeCamp"; publication[0].toUpperCase(); 

Εκτελώντας τον παραπάνω κωδικό, θα πάρετε κεφαλαίο F αντί για f. Για να επαναφέρουμε ολόκληρη τη λέξη, μπορούμε να το κάνουμε αυτό:

const publication = "freeCodeCamp"; publication[0].toUpperCase() + publication.substring(1); 

Τώρα συνδυάζει το "F" με το "reeCodeCamp", που σημαίνει ότι παίρνουμε πίσω τη λέξη "FreeCodeCamp". Αυτό είναι όλο!

Ας ανακεφαλαιώσουμε

Για να είμαστε σίγουροι ότι τα πράγματα είναι ξεκάθαρα, ας ανακεφαλαιώσουμε όσα έχουμε μάθει μέχρι τώρα:

  • Στο JavaScript, η μέτρηση ξεκινά από το 0.
  • Μπορούμε να έχουν πρόσβαση σε e-mail από μια σειρά με τον ίδιο τρόπο που έχουν πρόσβαση σε ένα στοιχείο από μια σειρά - όπως string[index].
  • Μην χρησιμοποιείτε ευρετήριο που υπερβαίνει το μήκος συμβολοσειράς (χρησιμοποιήστε τη μέθοδο μήκους - string.length- για να βρείτε το εύρος που μπορείτε να χρησιμοποιήσετε).
  • Χρησιμοποιήστε την ενσωματωμένη μέθοδο toUpperCase()στο γράμμα που θέλετε να μετατρέψετε σε κεφαλαία.

Κεφαλαιοποιήστε το πρώτο γράμμα κάθε λέξης από μια συμβολοσειρά

Το επόμενο βήμα είναι να πάρετε μια πρόταση και να κεφαλαιοποιήσετε κάθε λέξη από αυτήν την πρόταση. Ας πάρουμε την ακόλουθη πρόταση:

const mySentence = "freeCodeCamp is an awesome resource"; 

Χωρίστε το σε λέξεις

Πρέπει να κεφαλαιοποιήσουμε το πρώτο γράμμα από κάθε λέξη από την πρόταση freeCodeCamp is an awesome resource.

Το πρώτο βήμα που κάνουμε είναι να χωρίσουμε την πρόταση σε μια σειρά λέξεων. Γιατί; Έτσι μπορούμε να χειριστούμε κάθε λέξη ξεχωριστά. Μπορούμε να το κάνουμε ως εξής:

const mySentence = "freeCodeCamp is an awesome resource"; const words = mySentence.split(" "); 

Επαναλάβετε κάθε λέξη

Αφού εκτελέσουμε τον παραπάνω κώδικα, στη μεταβλητή wordsεκχωρείται ένας πίνακας με κάθε λέξη από την πρόταση. Ο πίνακας έχει ως εξής ["freeCodeCamp", "is", "an", "awesome", "resource"].

const mySentence = "freeCodeCamp is an awesome resource"; const words = mySentence.split(" "); for (let i = 0; i < words.length; i++) { words[i] = words[i][0].toUpperCase() + words[i].substr(1); } 

Τώρα το επόμενο βήμα είναι να περιηγηθείτε στη σειρά λέξεων και να κεφαλαιοποιήσετε το πρώτο γράμμα κάθε λέξης.

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

Συμμετάσχετε στις λέξεις

Τι κάνει ο παραπάνω κώδικας; Επαναλαμβάνει κάθε λέξη και την αντικαθιστά με το κεφαλαίο του πρώτου γράμματος + το υπόλοιπο της συμβολοσειράς.

Αν πάρουμε ως παράδειγμα το "freeCodeCamp", μοιάζει με αυτό freeCodeCamp = F + reeCodeCamp.

Αφού επαναλάβει όλες τις λέξεις, ο wordsπίνακας είναι ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. Ωστόσο, έχουμε έναν πίνακα, όχι μια συμβολοσειρά, που δεν είναι αυτό που θέλουμε.

Το τελευταίο βήμα είναι να ενώσετε όλες τις λέξεις για να σχηματίσετε μια πρόταση. Λοιπόν, πώς το κάνουμε αυτό;

Στο JavaScript, έχουμε μια μέθοδο που ονομάζεται join, την οποία μπορούμε να χρησιμοποιήσουμε για να επιστρέψουμε έναν πίνακα ως συμβολοσειρά. Η μέθοδος παίρνει ένα διαχωριστικό ως όρισμα. Δηλαδή, καθορίζουμε τι να προσθέσουμε μεταξύ των λέξεων, για παράδειγμα ένα κενό διάστημα.

const mySentence = "freeCodeCamp is an awesome resource"; const words = mySentence.split(" "); for (let i = 0; i < words.length; i++) { words[i] = words[i][0].toUpperCase() + words[i].substr(1); } words.join(" "); 

Στο παραπάνω απόσπασμα κώδικα, μπορούμε να δούμε τη μέθοδο σύνδεσης σε δράση. Το ονομάζουμε στον wordsπίνακα και καθορίζουμε το διαχωριστικό, το οποίο στην περίπτωσή μας είναι κενό.

Επομένως, ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]γίνεται FreeCodeCamp Is An Awesome Resource.

Άλλες μέθοδοι

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

const mySentence = "freeCodeCamp is an awesome resource"; const words = mySentence.split(" "); words.map((word) => { return word[0].toUpperCase() + word.substring(1); }).join(" "); 

What is the difference between the above solution and the initial solution? The two solutions are very similar, the difference being that in the second solution we are using the map function, whereas in the first solution we used a for loop.

Let's go even further, and try to do a one-liner. Be aware! One line solutions might look cool, but in the real world they are rarely used because it is challenging to understand them. Code readability always comes first.

const mySentence = "freeCodeCamp is an awesome resource"; const finalSentence = mySentence.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase()); 

The above code uses RegEx to transform the letters. The RegEx might look confusing, so let me explain what happens:

  • ^ matches the beginning of the string.
  • \w matches any word character.
  • {1} takes only the first character.
  • Thus, ^\w{1} matches the first letter of the word.
  • | works like the boolean OR. It matches the expression after and before the |.
  • \s+ matches any amount of whitespace between the words (for example spaces, tabs, or line breaks).

Thus, with one line, we accomplished the same thing we accomplished in the above solutions. If you want to play around with the RegEx and to learn more, you can use this website.

Conclusion

Congratulations, you learnt a new thing today! To recap, in this article, you learnt how to:

  • access the characters from a string
  • capitalize the first letter of a word
  • split a string in an array of words
  • join back the words from an array to form a string
  • use RegEx to accomplish the same task

Αν σας αρέσει αυτό που γράφω, οι πιθανότητες είναι ότι θα λατρέψετε αυτό που στέλνω μέσω email. Σκεφτείτε να εγγραφείτε στη λίστα αλληλογραφίας μου. Εάν δεν είστε λάτρης των ενημερωτικών δελτίων , μπορούμε πάντα να διατηρούμε επαφή στο Twitter .