Як писати велику літеру кожного слова в 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].
  • Не використовуйте індекс, який перевищує довжину рядка (використовуйте метод length - 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"]. Однак у нас є масив, а не рядок, а це не те, що ми хочемо.

Останній крок - об’єднати всі слова, щоб утворити речення. Отже, як ми це робимо?

У JavaScript у нас є метод join, який називається , і який ми можемо використовувати для повернення масиву як рядка. Метод бере аргумент як роздільник. Тобто ми вказуємо, що додавати між словами, наприклад пробіл.

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

У наведеному вище фрагменті коду ми бачимо метод join в дії. Ми називаємо це на wordsмасиві і вказуємо роздільник, який у нашому випадку є пробілом.

Тому ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]стає FreeCodeCamp Is An Awesome Resource.

Інші методи

У програмуванні, як правило, існує кілька способів вирішення однієї і тієї ж проблеми. Тож давайте побачимо інший підхід.

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.