Cum Să Titlați O Frază în JavaScript

Îți amintești la școala primară când profesorii tăi ți-au arătat cum să scrii corect o lucrare? Primul lucru cu care începeți este un titlu bun și fiecare titlu bun este valorificat corespunzător.

În timpul acestei provocări de algoritm, vom învăța cum să titlăm o propoziție cu majuscule în JavaScript. În cele din urmă, vom avea algoritmul nostru să ia o frază și să scrie cu majusculă prima literă a fiecărui cuvânt ca și cum ar fi titlul unei lucrări.

Instrucțiuni de algoritm

Întoarceți șirul furnizat cu prima literă a fiecărui cuvânt cu majuscule. Asigurați-vă că restul cuvântului este cu litere mici.

În scopul acestui exercițiu, ar trebui să scrieți cu majusculă cuvinte de legătură precum „cel” și „al”.

Cazuri de testare furnizate

titleCase("I'm a little tea pot")ar trebui să returneze un șir.
titleCase("I'm a little tea pot")ar trebui să se întoarcă I'm A Little Tea Pot.
titleCase("sHoRt AnD sToUt")ar trebui să se întoarcă Short And Stout.
titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")ar trebui să se întoarcă Here Is My Handle Here Is My Spout.

Soluția # 1: .map () și .slice ()

PEDAC

Înțelegerea problemei: Avem o singură intrare, un șir. Rezultatul nostru este, de asemenea, un șir. În cele din urmă, dorim să returnăm șirul de intrare cu prima literă – și numai prima literă – a fiecărui cuvânt cu majuscule.

Exemple / cazuri de testare: Cazurile noastre de testare furnizate arată că ar trebui să avem o literă cu majusculă numai la începutul fiecărui cuvânt. Trebuie să scriem cu minuscule restul. Cazurile de test furnizate arată, de asemenea, că nu suntem aruncați bile de curbă în termeni de cuvinte compuse ciudate separate prin simboluri în loc de spații albe. Aceasta este o veste bună pentru noi!

Structură de date: Va trebui să ne transformăm șirul de intrare într-o matrice pentru a manipula fiecare cuvânt separat.

Câteva note despre metodele pe care le vom folosi:

Hai sa vorbim despre .map():

.map() creează o nouă matrice cu rezultatele apelării unei funcții pe fiecare element din matrice.

Cu alte cuvinte, .map() ne permite să manipulăm fiecare element dintr-un tablou cu o funcție, apoi să returnăm un nou tablou cu rezultatele manipulării noastre. Funcția poate viza atât Valoarea curentă, cât și indicele valorii curente, astfel:

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

Nu trebuie să folosim întotdeauna Indexul. Totuși, vor exista momente în care trebuie să vizăm elemente ale unei matrice după indexul lor, deci este util să rețineți.

Acum să vedem un exemplu de .map() în acțiune. Avem o matrice plină de numere și vrem să înmulțim fiecare număr cu 2.

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

Acum hai să investigăm .slice():

.slice() extrage o secțiune dintr-un șir și o returnează ca un șir nou. Dacă suni .slice() pe un șir fără a-i transmite informații suplimentare, acesta va returna întregul șir.

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

Avem opțiunea de a trece .slice() un beginIndex și endIndex, așa

.slice(beginIndex, endIndex)

Acest lucru spune .slice() de unde să începeți felierea și de unde să terminați felierea. Rețineți că șirurile sunt indexate zero! Deci, dacă am vrea să ne întoarcem de la litera cu 2 indexuri a lui „Bastian” până dar fără a include scrisoarea cu 5 indexuri a lui „Bastian”, am putea face acest lucru:

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

Având în vedere acest lucru, putem tăia începutul cuvintelor și le putem restitui restul, trecând doar un beginIndex, astfel:

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

Algoritm:

Predați toate literele str la litere mici.
Împărțiți minusculele str într-o matrice, fiecare cuvânt fiind un element separat în matrice.
Scrieți cu majusculă prima literă a fiecărui element din matrice.
Alăturați fiecare element al matricei într-un singur șir, separând fiecare cuvânt printr-un spațiu alb.
Întoarceți șirul cu titlu.

Cod: Vezi mai jos!

Am creat o mulțime de variabile locale inutile în codul de mai sus pentru a arăta efectul fiecărei metode asupra intrării. Mai jos am eliminat variabilele locale, am înlănțuit toate metodele și am eliminat comentariile.

Soluția # 2: regex

Avertizare! Regex nu este cea mai bună soluție pentru începători. Expresiile regulate sunt dificile de la sine, iar complexitatea lor este o problemă obișnuită pentru mulți dezvoltatori cu experiență. Dar hei, mă simt aventuros în timp ce scriu acest lucru și îmi place să mă provoc pe mine să înțeleg în continuare regexul ori de câte ori pot. Această provocare de scriptare a algoritmului se pretează, de fapt, la regex, așa că haideți să aruncăm o privire și să vedem dacă putem îmbunătăți înțelegerea regexului!

PEDAC

Structură de date: Nu vom transforma șirul nostru într-o matrice în timp ce folosim expresii regulate. JavaScript are o metodă inteligentă .replace() care ne permite să vizăm aproape orice vrem într-un șir și să îl înlocuim cu altceva. Folosim expresii regulate pentru a viza ceea ce dorim să înlocuim.

Există atât de multe simboluri utilizate în expresiile obișnuite încât nu pot spera să le ofer o prezentare generală a acestora aici. Vă pot îndrepta spre acest lucru foaie de cheats, totuși, pe care îl folosesc ori de câte ori trebuie să folosesc regex.

Ce pot face este să-ți spun că regex cu .replace() în JavaScript urmează un model de bază. .replace() ia două argumente: un model (de obicei o expresie regulată) și un înlocuitor (ar putea fi un șir sau o funcție).

string.replace(regex, function)

În soluția noastră, vom înlocui litera la începutul fiecărui cuvânt. Cum facem ca regex să facă acest lucru pentru noi? Noi spunem .replace() pentru a se potrivi cu orice caracter care urmează unui spațiu alb sau care se potrivește cu primul caracter al întregului șir (deoarece chiar primul cuvânt al șirului nu are un spațiu alb înainte).

Să descompunem partea regex a soluției noastre. Pentru a face acest lucru, să ne uităm la primul argument al .replace() funcţie. Acesta este codul regex care determină ce tipar căutăm să potrivim și să înlocuim.

// full solution:

function titleCase(str) {  return str.toLowerCase().replace(/(^|s)S/g,  (firstLetter) => firstLetter.toUpperCase());}

În cele din urmă, dorim să găsim toate caracterele care nu sunt spații albe, reprezentate de S.

Apoi vrem să specificăm că vrem să potrivim acele caractere care nu sunt spații albe la începutul unui șir ^ sau | după orice caracter de spațiu alb s.

Adăugăm modificatorul global g pentru a căuta și înlocui toate aceste modele în întregul șir.

Algoritm: