Hogyan lehet nagybetűvel írni az egyes szavakat a JavaScript-ben - JS nagybetűs oktatóanyag

Ebben a cikkben megtudhatja, hogyan lehet nagybetűket írni a JavaScript bármely szójának első betűjéből. Ezt követően az összes szó első betűjét nagybetűvel írja egy mondatból.

A programozásban az a szép, hogy egyetlen probléma megoldására nincs egyetemes megoldás. Ezért ebben a cikkben ugyanazon probléma megoldásának több módját fogja megismerni.

Nagybetűvel írja be a szó első betűjét

Először is kezdjük az egyetlen szó első betűjének nagybetűs írásával. Miután megtudta, hogyan kell ezt megtenni, továbblépünk a következő szintre - egy mondat minden szaván megtesszük. Íme egy példa:

const publication = "freeCodeCamp"; 

A JavaScript-ben 0-tól kezdjük a számolást. Például, ha van tömbünk, akkor az első pozíció 0, nem 1.

Ezenkívül egy karakterlánc minden betűjéhez ugyanúgy hozzáférhetünk, mint egy tömb elemeihez. Például a " freeCodeCamp " szó első betűje a 0. pozícióban van.

Ez azt jelenti, hogy lehet kapni a levél f re freeCodeCamp csinál publication[0].

Ugyanígy a szóból más betűket is elérhet. A "0" tetszőleges számmal helyettesíthető, amennyiben nem haladja meg a szó hosszát. A szóhossz túllépésén azt értem, hogy megpróbálok valami hasonlót végrehajtani publication[25, ami hibát dob, mert csak tizenkét betű van a "freeCodeCamp" szóban.

Hogyan lehet nagybetűvel írni az első betűt

Most, hogy tudjuk, hogyan férhetünk hozzá egy levélhez egy szóból, írjuk nagybetűvel.

A JavaScript-ben van egy úgynevezett metódusunk toUpperCase(), amelyet karakterláncokra vagy szavakra hívhatunk meg. Ahogy a névből is következtethetünk rá, egy sztringre / szóra hívod, és ez ugyanazt adja vissza, de nagybetűként.

Például:

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

A fenti kód futtatásával F helyett nagy F betűt fog kapni . Az egész szó visszaszerzéséhez megtehetjük ezt:

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

Most összefűzi az "F" -t a "reeCodeCamp" -nel, ami azt jelenti, hogy visszakapjuk a "FreeCodeCamp" szót. Ez minden!

Tegyük fel újra

Annak érdekében, hogy a dolgok egyértelműek legyenek, összegezzük az eddig tanultakat:

  • A JavaScript-ben a számlálás 0-tól kezdődik.
  • A karakterláncból származó betűhöz ugyanúgy férhetünk hozzá, mint egy tömb elemeihez - pl string[index].
  • Ne használjon olyan indexet, amely meghaladja a karakterlánc hosszát (a hosszúsági módszerrel - string.length- keresse meg a használható tartományt).
  • Használja a toUpperCase()nagybetűvé alakítani kívánt betű beépített módszerét .

Az egyes szavak első betűjét nagybetűvel írja egy karakterláncból

A következő lépés egy mondat felvétele és a szó minden szavának nagybetűs használata. Vegyük a következő mondatot:

const mySentence = "freeCodeCamp is an awesome resource"; 

Ossza szavakra

A mondat minden szavából az első betűt nagybetűvel kell írnunk freeCodeCamp is an awesome resource.

Első lépésként a mondatot tömb szavakra osztjuk. Miért? Tehát minden szót külön-külön manipulálhatunk. Ezt a következőképpen tehetjük meg:

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

Minden szó után iterál

Miután futtattuk a fenti kódot, a változóhoz wordsegy tömböt rendelünk a mondat minden egyes szavához. A tömb a következő ["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); } 

A következő lépés a hurok áttekintése és az egyes szavak nagybetűs írásmódja.

A fenti kódban minden szót külön veszünk. Ezután nagybetűvel írja az első betűt, és végül összefűzi a nagybetűs első betűt a húr többi részével.

Csatlakozz a szavakhoz

Mit csinál a fenti kód? Minden szó fölött iterál, és felváltja az első betű nagybetűjével + a karakterlánc többi részével.

Ha a "freeCodeCamp" példát vesszük, akkor ez így néz ki freeCodeCamp = F + reeCodeCamp.

Az összes szó iterációja után a wordstömb ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. Van azonban egy tömbünk, nem egy karakterláncunk, amit nem szeretnénk.

Az utolsó lépés az összes szó összekapcsolása egy mondat kialakításához. Szóval, hogyan csináljuk ezt?

A JavaScript-ben van egy úgynevezett metódusunk join, amellyel egy tömböt adhatunk vissza karakterláncként. A módszer elválasztót vesz fel argumentumként. Vagyis meghatározzuk, mit kell hozzáadni a szavak közé, például szóközt.

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

A fenti kódrészletben a csatlakozási módszert láthatjuk működés közben. Meghívjuk a wordstömbön, és megadjuk az elválasztót, amely esetünkben szóköz.

Ezért ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]válik FreeCodeCamp Is An Awesome Resource.

Egyéb módszerek

A programozás során általában többféle módon lehet megoldani ugyanazt a problémát. Lássunk tehát egy másik megközelítést.

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.