كيفية تكبير الحرف الأول من كل كلمة في JavaScript - برنامج تعليمي بأحرف كبيرة من JS

في هذه المقالة ، ستتعلم كيفية كتابة الحرف الأول من أي كلمة بأحرف كبيرة في JavaScript. بعد ذلك ، ستعمل على تكبير الحرف الأول من كل الكلمات من الجملة.

الشيء الجميل في البرمجة هو أنه لا يوجد حل عالمي واحد لحل مشكلة ما. لذلك ، في هذه المقالة سترى طرقًا متعددة لحل نفس المشكلة.

اجعل الحرف الأول من الكلمة كبيرًا

بادئ ذي بدء ، لنبدأ بكتابة الحرف الأول من الكلمة الواحدة بحرف كبير. بعد أن تتعلم كيفية القيام بذلك ، سننتقل إلى المستوى التالي - القيام بذلك على كل كلمة من جملة. هنا مثال:

const publication = "freeCodeCamp"; 

في JavaScript ، نبدأ العد من 0. على سبيل المثال ، إذا كان لدينا مصفوفة ، فإن الموضع الأول هو 0 ، وليس 1.

أيضًا ، يمكننا الوصول إلى كل حرف من سلسلة نصية بنفس الطريقة التي نصل بها إلى عنصر من مصفوفة. على سبيل المثال ، الحرف الأول من كلمة " freeCodeCamp " موجود في الموضع 0.

هذا يعني أنه يمكننا الحصول على الحرف f من freeCodeCamp عن طريق القيام بذلك publication[0].

بنفس الطريقة ، يمكنك الوصول إلى أحرف أخرى من الكلمة. يمكنك استبدال "0" بأي رقم ، بشرط عدم تجاوز طول الكلمة. بتجاوز طول الكلمة ، أعني محاولة القيام بشيء مثل publication[25، مما يؤدي إلى حدوث خطأ لأنه لا يوجد سوى اثني عشر حرفًا في كلمة "freeCodeCamp".

كيفية تكبير الحرف الأول

الآن بعد أن عرفنا كيفية الوصول إلى حرف من كلمة ، فلنكتبها بأحرف كبيرة.

في JavaScript ، لدينا طريقة تسمى toUpperCase()، والتي يمكننا استدعاؤها على السلاسل أو الكلمات. كما يمكن أن نشير من الاسم ، يمكنك تسميته على سلسلة / كلمة ، وسيعيد نفس الشيء ولكن كأحرف كبيرة.

على سبيل المثال:

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

بتشغيل الكود أعلاه ، ستحصل على F بدلاً من f. لاستعادة الكلمة بأكملها ، يمكننا القيام بذلك:

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

الآن يربط بين "F" و "reeCodeCamp" ، مما يعني أننا نستعيد كلمة "FreeCodeCamp". هذا كل شيء!

دعونا نلخص

للتأكد من أن الأمور واضحة ، دعنا نلخص ما تعلمناه حتى الآن:

  • في JavaScript ، يبدأ العد من 0.
  • يمكننا الوصول إلى حرف من سلسلة بنفس الطريقة التي نصل بها إلى عنصر من مصفوفة - على سبيل المثال string[index].
  • لا تستخدم فهرسًا يتجاوز طول السلسلة (استخدم طريقة الطول - string.length- للعثور على النطاق الذي يمكنك استخدامه).
  • استخدم الطريقة المضمنة في toUpperCase()الحرف الذي تريد تحويله إلى أحرف كبيرة.

اجعل الحرف الأول من كل كلمة من سلسلة أحرف كبيرة

الخطوة التالية هي أن تأخذ جملة وتكتب كل كلمة بأحرف كبيرة من تلك الجملة. لنأخذ الجملة التالية:

const mySentence = "freeCodeCamp is an awesome resource"; 

قسّمها إلى كلمات

علينا أن نكتب الحرف الأول من كل كلمة من الجملة بحرف كبير freeCodeCamp is an awesome resource.

الخطوة الأولى التي نتخذها هي تقسيم الجملة إلى مجموعة من الكلمات. لماذا ا؟ حتى نتمكن من معالجة كل كلمة على حدة. يمكننا القيام بذلك على النحو التالي:

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

كرر على كل كلمة

بعد تشغيل الكود أعلاه ، wordsيتم تعيين المتغير مصفوفة مع كل كلمة من الجملة. المصفوفة على النحو التالي ["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); } 

الآن الخطوة التالية هي تكرار مجموعة الكلمات وكتابة الحرف الأول من كل كلمة بحروف كبيرة.

في الكود أعلاه ، يتم أخذ كل كلمة على حدة. ثم يقوم بتكبير الحرف الأول ، وفي النهاية ، يربط الحرف الأول الكبير مع باقي السلسلة.

انضم إلى الكلمات

ماذا يفعل الكود أعلاه؟ يتكرر فوق كل كلمة ، ويستبدلها بالحرف الكبير للحرف الأول + بقية السلسلة.

إذا أخذنا "freeCodeCamp" كمثال ، فسيبدو هكذا freeCodeCamp = F + reeCodeCamp.

بعد أن تتكرر على جميع الكلمات ، تكون wordsالمصفوفة ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. ومع ذلك ، لدينا مصفوفة ، وليس سلسلة ، وهذا ليس ما نريده.

The last step is to join all the words to form a sentence. So, how do we do that?

In JavaScript, we have a method called join, which we can use to return an array as a string. The method takes a separator as an argument. That is, we specify what to add between words, for example a space.

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

In the above code snippet, we can see the join method in action. We call it on the words array, and we specify the separator, which in our case is a space.

Therefore, ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"] becomes FreeCodeCamp Is An Awesome Resource.

Other methods

In programming, usually, there are multiple ways of solving the same problem. So let's see another approach.

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

إذا أعجبك ما أكتبه ، فمن المحتمل أنك ستحب ما أرسله بالبريد الإلكتروني. النظر في الاشتراك في القائمة البريدية الخاصة بي. إذا لم تكن من محبي النشرات الإخبارية ، فيمكننا دائمًا البقاء على اتصال على Twitter .