JavaScript Capitalize First Letter: How to make strings and arrays sentence case

Подписаться 56 тыс.

Просмотров 27 тыс.

50% 1

In this tutorial, you’ll learn how to use JavaScript to capitalize the first letter of a sentence or an array of words. Get my free 32 page eBook of JavaScript HowTos 👉bit.ly/2ThXPL3
Don’t forget to subscribe to the Junior Developer Central channel for more videos and tutorials!
You’ll also learn some tips and tricks on how to make this simple bit of code more powerful within your applications.
Although this may seem like a simple task, using JavaScript to capitalize the first letter of a string or using JavaScript to capitalize first letter of each word of a string, it’s a common task for Junior Developers to do.
It will mainly come in to play when working with presented data to the user as you want to ensure a consistent experience for the user. For example, it might be that data was stored (possibly by the user themselves) in all upper or lowercase.
So, How do you capitalize the first letter in HTML?
The first thing you need to do is to get the first character of the string using either bracket notation [] or the charAt function. In the video, i’ll explain the difference between the two.
Once you have the first character you can make this uppercase with the toUpperCase function which will transform the character to uppercase.
The final thing you’ll need to do is get the rest of the remaining original string and add it to the first, uppercase letter. You can do this with the slice function which ill show in the video.
Other videos in the JavaScript Snippets series:
JavaScript How To Remove An Item From Array Tutorial: • JavaScript How To Remo...
Javascript String Length: How to determine the size of a string: • Javascript String Leng...
How to find the longest word in a String with JavaScript: • How to find the longes...
Find the largest number in an array JavaScript Tutorial: • Find the largest numbe...
Check if a String is a palindrome with JavaScript Tutorial: • Check if a String is a...
How to reverse a String in JavaScript Tutorial: • How to reverse a Strin...
JavaScript join method: How to merge arrays into one value: • JavaScript join method...
Javascript How To Convert String To Number Tutorial: • Javascript How To Conv...
JavaScript Create HTML Element: How to dynamically add tags to your pages: • JavaScript Create HTML...
JavaScript String Contains: How to check a string exists in another: • JavaScript String Cont...
Link JavaScript to HTML: How to run your JavaScript code in the browser: • Link JavaScript to HTM...
JavaScript Copy Array: How to make an exact copy of an array in JavaScript: • JavaScript Copy Array:...
Javascript Print To Console Tutorial: Different ways to output data to the console: • Javascript Print To Co... Channel Handle @codebubb

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 42

@codewithbubb 5 лет назад

Get my free 32 page eBook of JavaScript HowTos 👉bit.ly/2ThXPL3 Check out the next video in the series - How to copy an array in JavaScript: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5rybkWfeh-A.html

@KodyAgue 4 года назад

Thank you! Wasn't difficult to follow and was exactly what I needed!

@codewithbubb 4 года назад

Thanks Kody! Glad you found it useful 👍

@gizmotechs 2 года назад

Thank you!! Easiest explanations!

@namirasyed 2 года назад

Thanks so much. I am new to coding and your video has helped me find uppercase in arrays.

@EduardoBarros13 2 года назад

Extremely useful.

@codewithbubb 2 года назад

Cheers! Glad you found it useful.

@JillYva 4 года назад

Thank you very much just what i needed very simple and easy to follow :)

@codewithbubb 4 года назад

Cheers! Glad it helped you out 😀

@gopinathkrm58 3 года назад

I was looking for this solution. Thank you so much

@codewithbubb 3 года назад

Hope it helped you out.

@00el04 4 года назад

exactly what i was looking for!

@TR-TR340 3 года назад

Thank you

@codewithbubb 3 года назад

You're welcome

@ShubhamSingh-eg6wq 2 года назад

loved it , can you please also make a video to show how to make a copy to clickboard function

@puanabidah2041 3 года назад

Thanks! This video helped me so much!!

@techslugz 3 года назад

Hay JR Dev Central! Just discovered your channel trying to do a FCC challenge (I bet most can guess which one lol) it's nice to be able to learn from someone with a similar accent :) do you do any in person courses or tutoring?

@satvikjoshi589 3 года назад

thank you to tell

@codewithbubb 3 года назад

No problem, hope you enjoyed the tutorial!

@uaplatformacomua 5 лет назад

Superb!!! Thank you!

@codewithbubb 5 лет назад

Thanks! It's a common question that gets asked at Junior Developer interviews!

@Aliena92 5 лет назад

Great! Thank you!

@codewithbubb 5 лет назад

Thanks Alina! Glad you found it useful.

@user-zp1dv4yh5e 4 года назад

Thanks

@codewithbubb 4 года назад

You're welcome, hope you found it useful?

@RavingAngel 5 лет назад

Hi, could you please show how you would do this for an array with a for..of loop? Thanks

@codewithbubb 5 лет назад

Hi, sure - do you mean make an array of strings have a first letter uppercase? If so, you could do something like this: const arrayOfWords = ['the', 'quick', 'brown', 'fox']; for (let i = 0; i < arrayOfWords.length; i += 1) { arrayOfWords[i] = arrayOfWords[i][0].toUpperCase() + arrayOfWords[i].slice(1); } console.log(arrayOfWords); // ["The", "Quick", "Brown", "Fox"] Here's a link to a GitHub Gist: gist.github.com/codebubb/55513ad4c7a48b4913454e64d2788604 Hope that helps!?

@royassouline3929 4 года назад

@@codewithbubb that returns an error - identifier arrayOfWords has already been declared

@mfilipe77 4 года назад

THankkkk Youuuuuuuuuuuuuuuuuuuuuuuuuuuuu

@TheWebShala 5 лет назад

Nice

@codewithbubb 5 лет назад

Thanks for your support!

@kovoempire4093 3 года назад

what if the string starts with a number though?

@mallireddydeepak4101 3 года назад

How to convert 'dct academy' to 'DctAcademy'

@katyrihannah5934 4 года назад

How can I get below output for given string ? Given String =This is bird.it can fly.thank you. Output = This IS BIRD. It CAN FLY. Thank YOU. Please give me the code for it.

@codewithbubb 4 года назад

Did you want to match a particular pattern or just convert that one instance of that string? I would probably do something like this: const str = `This is ${'bird'.toUpperCase()}. It ${'can fly'.toUpperCase()}. Thank ${'you'.toUpperCase()}.` Hope that helps :)

@katyrihannah5934 4 года назад

@@codewithbubb no for any input it's should convert

@codewithbubb 4 года назад

OK, so what is the pattern? Is it to keep the first word title case and then make the rest of the string uppercase? Does the original string need to be split onto new lines by the fullstop (period) . ?

@katyrihannah5934 4 года назад

@@codewithbubb yeah correct .That is the pattern first word title case.Rest of the lines uppercase.

@codewithbubb 4 года назад

OK, there's probably a better way to do this with regular expressions but following on from the techniques in the video, you could do something like this: const firstWordTitleCase = str => str.split(' ').map((word, index) => index === 0 ? word[0].toUpperCase() + word.slice(1).toLowerCase() : word.toUpperCase()).join(' '); It's a bit messy but essentially we're splitting the string by spaces and then checking the position of each word in the array and making the first word title case and the rest uppercase (with the ternary condition). You could then use the function to produce the string you were after (or any other string): 'This is bird.it can fly.thank you.'.split('.').filter(line => line).map(firstWordTitleCase).join(' '); The filter is just there to remove any empty lines that might be in your original string. Code as a Gist: gist.github.com/codebubb/45ed0dafd25c9c4bf9f43f5646a12151 Hope that is what you were after?