Τρόπος τίτλου περίπτωσης μιας πρότασης σε JavaScript

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

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

Οδηγίες αλγορίθμου

Επιστρέψτε την παρεχόμενη συμβολοσειρά με το πρώτο γράμμα κάθε λέξης με κεφαλαία γράμματα. Βεβαιωθείτε ότι η υπόλοιπη λέξη είναι με πεζά γράμματα. Για τους σκοπούς αυτής της άσκησης, θα πρέπει επίσης να κεφαλαιοποιήσετε λέξεις σύνδεσης όπως «το» και «του».

Παρεχόμενες δοκιμές

  • titleCase("I'm a little tea pot")πρέπει να επιστρέψει μια συμβολοσειρά.
  • titleCase("I'm a little tea pot")πρέπει να επιστρέψει I'm A Little Tea Pot.
  • titleCase("sHoRt AnD sToUt")πρέπει να επιστρέψει Short And Stout.
  • titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")πρέπει να επιστρέψει Here Is My Handle Here Is My Spout.

Λύση # 1: .map () και .slice ()

PEDAC

Κατανόηση του προβλήματος : Έχουμε μία είσοδο, μια συμβολοσειρά. Η παραγωγή μας είναι επίσης μια συμβολοσειρά. Τελικά, θέλουμε να επιστρέψουμε τη συμβολοσειρά εισαγωγής με το πρώτο γράμμα - και μόνο το πρώτο γράμμα - κάθε λέξης με κεφαλαία γράμματα.

Παραδείγματα / Δοκιμαστικές περιπτώσεις : Οι παρεχόμενες δοκιμαστικές περιπτώσεις μας δείχνουν ότι πρέπει να έχουμε κεφαλαίο γράμμα μόνο στην αρχή κάθε λέξης. Πρέπει να μειώσουμε τα υπόλοιπα. Οι παρεχόμενες δοκιμαστικές θήκες δείχνουν επίσης ότι δεν πετάμε μπάλες καμπύλης όσον αφορά περίεργες σύνθετες λέξεις που διαχωρίζονται με σύμβολα αντί για κενό διάστημα. Αυτά είναι καλά νέα για εμάς!

Δομή δεδομένων : Θα πρέπει να μετατρέψουμε τη συμβολοσειρά εισόδου μας σε έναν πίνακα για να χειριστούμε κάθε λέξη ξεχωριστά.

Μερικές σημειώσεις σχετικά με τις μεθόδους που θα χρησιμοποιήσουμε:

Ας μιλήσουμε για .map():

.map() δημιουργεί έναν νέο πίνακα με τα αποτελέσματα της κλήσης μιας συνάρτησης σε κάθε στοιχείο του πίνακα.

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

array.map((currentValue, Index) => { // manipulate the currentValue in some way})

Δεν χρειάζεται πάντα να χρησιμοποιούμε το Ευρετήριο. Ωστόσο, θα υπάρξουν στιγμές που πρέπει να στοχεύσουμε στοιχεία ενός πίνακα από το ευρετήριό τους, οπότε είναι βολικό να θυμάστε.

Τώρα ας δούμε ένα παράδειγμα .map()δράσης. Έχουμε έναν πίνακα γεμάτο αριθμούς και θέλουμε να πολλαπλασιάσουμε κάθε αριθμό με 2.

let arrayOfNumbers = [3, 6, 10, 42, 98]arrayOfNumbers.map(number => number * 2)// returns [6, 12, 20, 84, 196]

Τώρα ας διερευνήσουμε .slice():

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

"Bastian".slice()// returns "Bastian"

Έχουμε την επιλογή να περάσουμε .slice()ένα beginIndex και endIndex, όπως έτσι

.slice(beginIndex, endIndex)

Αυτό λέει .slice()πού να ξεκινήσετε τον τεμαχισμό και πού να τερματίσετε τον τεμαχισμό. Λάβετε υπόψη ότι οι συμβολοσειρές είναι μηδενικές! Επομένως, αν θέλαμε να επιστρέψουμε από το 2-ευρετήριο γράμμα του «Bastian» έως ότου δεν περιλαμβάνεται το 5-ευρετήριο γράμμα του «Bastian», θα μπορούσαμε να το κάνουμε αυτό:

"Bastian".slice(2, 5)// returns "sti"

Έχοντας αυτό κατά νου, μπορούμε να κόψουμε την αρχή των λέξεων και να επιστρέψουμε τις υπόλοιπες περνώντας μόνο ένα beginIndex, όπως έτσι:

"Bastian".slice(3)// returns "tian"

Αλγόριθμος :

  1. Γυρίστε όλα τα γράμματα σε strπεζά γράμματα.
  2. Διαχωρίστε την πεζά strσε έναν πίνακα, με κάθε λέξη να είναι ξεχωριστό στοιχείο στον πίνακα.
  3. Κεφαλαιοποιήστε το πρώτο γράμμα κάθε στοιχείου στον πίνακα.
  4. Συνδέστε κάθε στοιχείο του πίνακα σε μια συμβολοσειρά, χωρίζοντας κάθε λέξη με κενό διάστημα.
  5. Επιστρέψτε τη συμβολοσειρά με τίτλο.

Κωδικός : Δείτε παρακάτω!

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

Λύση # 2: regex

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

PEDAC

Κατανόηση του προβλήματος : Έχουμε μία είσοδο, μια συμβολοσειρά. Η παραγωγή μας είναι επίσης μια συμβολοσειρά. Τελικά, θέλουμε να επιστρέψουμε τη συμβολοσειρά εισαγωγής με το πρώτο γράμμα - και μόνο το πρώτο γράμμα - κάθε λέξης με κεφαλαία γράμματα.

Παραδείγματα / Δοκιμαστικές περιπτώσεις : Οι παρεχόμενες δοκιμαστικές περιπτώσεις μας δείχνουν ότι πρέπει να έχουμε κεφαλαίο γράμμα μόνο στην αρχή κάθε λέξης. Πρέπει να μειώσουμε τα υπόλοιπα. Οι παρεχόμενες δοκιμαστικές θήκες δείχνουν επίσης ότι δεν πετάμε μπάλες καμπύλης όσον αφορά περίεργες σύνθετες λέξεις που διαχωρίζονται με σύμβολα αντί για κενό διάστημα. Αυτά είναι καλά νέα για εμάς!

Δομή δεδομένων : Δεν θα μετατρέψουμε τη συμβολοσειρά μας σε πίνακα κατά τη χρήση κανονικών εκφράσεων. Το JavaScript έχει μια καλή μέθοδο .replace()που μας επιτρέπει να στοχεύουμε σχεδόν οτιδήποτε θέλουμε σε μια συμβολοσειρά και να την αντικαθιστούμε με κάτι άλλο. Χρησιμοποιούμε κανονικές εκφράσεις για να στοχεύσουμε αυτό που θέλουμε να αντικαταστήσουμε.

Υπάρχουν τόσα πολλά σύμβολα που χρησιμοποιούνται σε κανονικές εκφράσεις που δεν ελπίζω να δώσω μια ευρεία επισκόπηση αυτών εδώ. Μπορώ να σας δείξω αυτό το cheatsheet, το οποίο χρησιμοποιώ όποτε πρέπει να χρησιμοποιήσω το regex.

Αυτό που μπορώ να κάνω είναι να σας πω ότι το regex με .replace()JavaScript ακολουθεί ένα βασικό μοτίβο. .replace()παίρνει δύο ορίσματα: ένα μοτίβο (συνήθως μια κανονική έκφραση) και μια αντικατάσταση (θα μπορούσε να είναι μια συμβολοσειρά ή μια συνάρτηση).

string.replace(regex, function)

Στη λύση μας, θα αντικαταστήσουμε το γράμμα στην αρχή κάθε λέξης. Πώς μπορούμε να κάνουμε regex να το κάνουμε αυτό για εμάς; Λέμε .replace()να ταιριάζει με οποιονδήποτε χαρακτήρα μετά από ένα κενό διάστημα ή να ταιριάζει με τον πρώτο χαρακτήρα ολόκληρης της συμβολοσειράς (επειδή η πρώτη λέξη της συμβολοσειράς δεν έχει κενό διάστημα πριν από αυτήν).

Ας αναλύσουμε το regex μέρος της λύσης μας. Για να το κάνουμε αυτό, ας δούμε το πρώτο όρισμα της .replace()συνάρτησης. Αυτός είναι ο κωδικός regex που καθορίζει ποιο μοτίβο θέλουμε να ταιριάξουμε και να αντικαταστήσουμε.

// full solution:
function titleCase(str)  return str.toLowerCase().replace(/(^

Θέλουμε τελικά να βρούμε όλους τους χαρακτήρες χωρίς κενό διάστημα, τους οποίους αντιπροσωπεύει ο \S.

Στη συνέχεια, θέλουμε να καθορίσουμε ότι θέλουμε να ταιριάξουμε αυτούς τους χαρακτήρες χωρίς κενό διάστημα στην αρχή μιας συμβολοσειράς ^ή |μετά από οποιονδήποτε χαρακτήρα κενό διάστημα \s.

Προσθέτουμε τον καθολικό τροποποιητή gγια αναζήτηση και αντικατάσταση όλων αυτών των μοτίβων σε ολόκληρη τη συμβολοσειρά.

Αλγόριθμος :

  1. Γυρίστε όλα τα γράμματα σε strπεζά γράμματα.
  2. Αντικαταστήστε το πρώτο γράμμα κάθε λέξης στη συμβολοσειρά με το κεφαλαίο γράμμα.
  3. Επιστρέψτε τη συμβολοσειρά με τίτλο.

Κωδικός : Δείτε παρακάτω!

Εάν έχετε άλλες λύσεις ή / και προτάσεις, μοιραστείτε τα σχόλια!

Αυτό το άρθρο είναι μέρος της σειράς FreeCodeCamp Algorithm Scripting.

Αυτό το άρθρο αναφέρεται σε σενάριο freeCodeCamp Basic Algorithm Scripting: Title Case a Sentence

Μπορείτε να με ακολουθήσετε στο Medium, το LinkedIn και το GitHub!