Kako napisati veliko slovo svake riječi u JavaScriptu - JS vodič za velika slova

U ovom ćete članku naučiti kako napisati velika slova bilo koje riječi u JavaScript-u. Nakon toga počet ćete velikim slovom prvo slovo svih riječi iz rečenice.

Lijepa stvar kod programiranja je što ne postoji jedno univerzalno rješenje za rješavanje problema. Stoga ćete u ovom članku vidjeti više načina rješavanja istog problema.

Veliko početno slovo riječi napisati velikim slovom

Prije svega, krenimo s velikim početnim slovom jedne riječi. Nakon što naučite kako se to radi, prijeći ćemo na sljedeću razinu - radeći je na svakoj riječi iz rečenice. Evo primjera:

const publication = "freeCodeCamp"; 

U JavaScript-u počinjemo računati od 0. Na primjer, ako imamo niz, prva pozicija je 0, a ne 1.

Također, svakom slovu iz niza možemo pristupiti na isti način kao i elementu iz niza. Na primjer, prvo slovo riječi " freeCodeCamp " nalazi se na položaju 0.

To znači da slovo f možemo dobiti od freeCodeCamp radeći publication[0].

Na isti način možete pristupiti drugim slovima iz riječi. "0" možete zamijeniti bilo kojim brojem, sve dok ne premašite duljinu riječi. Prekoračujući duljinu riječi, mislim pokušati učiniti nešto slično publication[25, što dovodi do pogreške jer u riječi "freeCodeCamp" postoji samo dvanaest slova.

Kako napisati veliko slovo velikim slovom

Sad kad znamo kako pristupiti slovu iz riječi, напиnimo ga velikim slovom.

U JavaScript-u imamo metodu koja se naziva toUpperCase(), a koju možemo pozivati ​​u nizovima ili riječima. Kao što možemo pretpostaviti iz imena, pozivate ga u nizu / riječi i vratit će istu stvar, ali kao veliko slovo.

Na primjer:

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

Pokretanjem gornjeg koda dobit ćete veliko slovo F umjesto f. Da bismo vratili cijelu riječ, možemo to učiniti:

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

Sada spaja "F" s "reeCodeCamp", što znači da vraćamo riječ "FreeCodeCamp". To je sve!

Sažeti se

Da bismo bili sigurni da su stvari jasne, ponovimo ono što smo do sada naučili:

  • U JavaScript-u brojanje počinje od 0.
  • Slovu iz niza možemo pristupiti na isti način kao i elementu iz niza - npr string[index].
  • Ne koristite indeks koji premašuje duljinu niza (upotrijebite metodu duljine - string.length- da biste pronašli raspon koji možete koristiti).
  • Upotrijebite ugrađenu metodu toUpperCase()na slovu koje želite preoblikovati u velika slova.

Veliko slovo svake riječi iz niza napisati velikim slovom

Sljedeći je korak uzeti rečenicu i napisati velikim slovima svaku riječ iz te rečenice. Uzmimo sljedeću rečenicu:

const mySentence = "freeCodeCamp is an awesome resource"; 

Podijelite to na riječi

Prvo slovo svake riječi iz rečenice moramo napisati velikim slovom freeCodeCamp is an awesome resource.

Prvi korak koji poduzmemo je podijeliti rečenicu u niz riječi. Zašto? Tako možemo manipulirati svakom riječju pojedinačno. To možemo učiniti na sljedeći način:

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

Ponavljajte svaku riječ

Nakon što pokrenemo gornji kod, varijabli wordsse dodjeljuje niz sa svakom riječi iz rečenice. Niz je sljedeći ["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); } 

Sada je sljedeći korak prelazak preko niza riječi i veliko početno slovo svake riječi.

U gornjem kodu svaka se riječ uzima zasebno. Zatim velikim početnim slovom stavlja veliko slovo, a na kraju povezuje veliko početno slovo s ostatkom niza.

Pridružite se riječima

Što radi gornji kod? Prevlači se nad svakom riječi i zamjenjuje je velikim slovom prvog slova + ostatkom niza.

Ako za primjer uzmemo "freeCodeCamp", to izgleda ovako freeCodeCamp = F + reeCodeCamp.

Nakon iteracije nad svim riječima, wordsniz je ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. Međutim, imamo niz, a ne niz, što nije ono što želimo.

Posljednji korak je spajanje svih riječi u rečenicu. Pa, kako to učiniti?

U JavaScript-u imamo pozvanu metodu joinkojom možemo vratiti niz kao niz. Metoda kao argument uzima separator. Odnosno, mi određujemo što dodati između riječi, na primjer razmak.

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(" "); 

U gornjem isječku koda možemo vidjeti metodu pridruživanja na djelu. Pozivamo ga na wordsniz i određujemo separator, koji je u našem slučaju razmak.

Stoga, ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]postaje FreeCodeCamp Is An Awesome Resource.

Ostale metode

U programiranju obično postoji više načina rješavanja istog problema. Pa da vidimo drugi pristup.

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

If you like what I write, the chances are you would love what I email. Consider subscribing to my mailing list. If you're not a fan of newsletters, we can always keep in touch on Twitter.