Cara Memanfaatkan Huruf Pertama Setiap Kata dalam JavaScript - Tutorial Huruf Besar JS

Dalam artikel ini, anda akan belajar bagaimana memanfaatkan huruf pertama dari setiap kata dalam JavaScript. Selepas itu, anda akan menggunakan huruf besar dari semua perkataan dari satu ayat.

Perkara yang indah mengenai pengaturcaraan adalah bahawa tidak ada satu penyelesaian universal untuk menyelesaikan masalah. Oleh itu, dalam artikel ini anda akan melihat pelbagai cara untuk menyelesaikan masalah yang sama.

Huruf besar huruf pertama perkataan

Pertama sekali, mari kita mulakan dengan menggunakan huruf besar dari satu perkataan. Setelah anda mengetahui cara melakukannya, kami akan terus ke tahap seterusnya - melakukannya pada setiap perkataan dari satu ayat. Berikut adalah contoh:

const publication = "freeCodeCamp"; 

Dalam JavaScript, kita mulai menghitung dari 0. Contohnya, jika kita mempunyai array, posisi pertama adalah 0, bukan 1.

Juga, kita dapat mengakses setiap huruf dari String dengan cara yang sama seperti kita mengakses elemen dari array. Contohnya, huruf pertama dari kata " freeCodeCamp " berada di kedudukan 0.

Ini bermaksud bahawa kita boleh mendapatkan huruf f dari freeCodeCamp dengan melakukan publication[0].

Dengan cara yang sama, anda boleh mengakses huruf lain dari kata tersebut. Anda boleh mengganti "0" dengan nombor apa pun, selagi anda tidak melebihi panjang perkataan. Dengan melampaui panjang perkataan, maksud saya cuba melakukan sesuatu seperti publication[25, yang menimbulkan kesalahan kerana hanya terdapat dua belas huruf dalam perkataan "freeCodeCamp".

Cara menggunakan huruf besar

Setelah kita mengetahui cara mengakses huruf dari satu kata, mari kita memanfaatkannya.

Dalam JavaScript, kita mempunyai kaedah yang disebut toUpperCase(), yang kita dapat memanggil string, atau kata-kata. Seperti yang dapat kita maksudkan dari nama, Anda menyebutnya pada string / kata, dan itu akan mengembalikan hal yang sama tetapi sebagai huruf besar.

Contohnya:

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

Dengan menjalankan kod di atas, anda akan mendapat modal F dan bukannya f. Untuk mendapatkan kembali keseluruhan perkataan, kita boleh melakukan ini:

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

Sekarang ia menggabungkan "F" dengan "reeCodeCamp", yang bermaksud kita mendapatkan kembali perkataan "FreeCodeCamp". Itu sahaja!

Mari merakam

Untuk memastikan semuanya jelas, mari kita rangkum apa yang telah kita pelajari sejauh ini:

  • Dalam JavaScript, pengiraan bermula dari 0.
  • Kita dapat mengakses huruf dari rentetan dengan cara yang sama seperti kita mengakses elemen dari array - mis string[index].
  • Jangan gunakan indeks yang melebihi panjang rentetan (gunakan kaedah panjang - string.length- untuk mencari julat yang boleh anda gunakan).
  • Gunakan kaedah bawaan toUpperCase()pada huruf yang ingin anda ubah menjadi huruf besar.

Huruf besar huruf pertama setiap perkataan dari rentetan

Langkah seterusnya adalah mengambil ayat dan menggunakan huruf besar setiap perkataan dari ayat itu. Mari kita ambil ayat berikut:

const mySentence = "freeCodeCamp is an awesome resource"; 

Bahagikan kepada perkataan

Kita harus menggunakan huruf besar dari setiap perkataan dari ayat freeCodeCamp is an awesome resource.

Langkah pertama yang kita ambil adalah memisahkan ayat menjadi susunan kata. Kenapa? Oleh itu, kita dapat memanipulasi setiap perkataan secara individu. Kita boleh melakukannya seperti berikut:

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

Ulangi setiap perkataan

Setelah kita menjalankan kod di atas, pemboleh ubah wordsdiberi susunan dengan setiap perkataan dari ayat. Susunannya adalah seperti berikut ["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); } 

Sekarang langkah seterusnya adalah mencari susunan kata dan memanfaatkan huruf pertama setiap kata.

Dalam kod di atas, setiap perkataan diambil secara berasingan. Kemudian huruf besarnya ditulis huruf pertama, dan pada akhirnya, huruf itu menggabungkan huruf pertama dengan huruf lain.

Bergabung dengan kata-kata

Apa yang dilakukan oleh kod di atas? Ia berulang setiap kata, dan menggantikannya dengan huruf besar huruf pertama + selebihnya dari rentetan.

Sekiranya kita mengambil "freeCodeCamp" sebagai contoh, ia kelihatan seperti ini freeCodeCamp = F + reeCodeCamp.

Setelah mengulangi semua perkataan, wordssusunannya adalah ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. Namun, kami mempunyai susunan, bukan rentetan, yang tidak seperti yang kami mahukan.

Langkah terakhir ialah menggabungkan semua perkataan untuk membentuk ayat. Jadi, bagaimana kita melakukannya?

Dalam JavaScript, kami memiliki metode yang disebut join, yang dapat kami gunakan untuk mengembalikan array sebagai string. Kaedah mengambil pemisah sebagai hujah. Maksudnya, kita menentukan apa yang harus ditambahkan di antara kata-kata, misalnya spasi.

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

Dalam coretan kod di atas, kita dapat melihat kaedah bergabung dalam tindakan. Kami menyebutnya pada wordsarray, dan kami menentukan pemisah, yang dalam kes kami adalah spasi.

Oleh itu, ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]menjadi FreeCodeCamp Is An Awesome Resource.

Kaedah lain

Dalam pengaturcaraan, biasanya, terdapat banyak cara untuk menyelesaikan masalah yang sama. Oleh itu mari kita lihat pendekatan lain.

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.