Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Converting strings into camelCased strings
Julia Furst Morgado
Julia Furst Morgado

Posted on

Converting strings into camelCased strings

While doing my homework, I encountered an exciting exercise. The goal was to write a function that changes words like "add four subtract six" into camel-cased "addFourSubtractSix".

That is: removes all spaces, and each word besides the first one becomes uppercased.

Below I'll explain step by step how I solved the problem.

Start the function

Here we'll create a function called *camelize * that accepts a parameter named *str *of type string.

function camelize(str) {//function body}
Enter fullscreen modeExit fullscreen mode

Return the string with methods applied to it

return str
Enter fullscreen modeExit fullscreen mode

We start with a return statement because we already want the result of the function right off the bat.

Split the string into an array

We call the split() method on the string (str). First, let's split the string based on the space ('') character. Here the space character acts as a splitter or divider.

.split(' ')
Enter fullscreen modeExit fullscreen mode

Be aware that if you don't add a space between the quotes, it will split the string by each character and return an array containing each character as an element.

Capitalize the first letter of each word in the array (except for the first one)

To capitalize the first letter of each word in an array:

  1. Use the map() method to iterate over each array element.
  2. The body of the function arrow has a ternary operator that evaluates if the element is of index zero (first word) or not.
  3. If it's the first word, leave it be.
  4. If not, capitalize the first character of the word, word[0], and concatenate the rest of the characters, slice(1).
  5. On each iteration, use the toUpperCase() method on the first character of the word and concatenate the rest.
  6. The map method will return a new array with all words capitalized (except the first one).
.map(    (word, index) => index == 0 ? word: word[0].toUpperCase() + word.slice(1)      )
Enter fullscreen modeExit fullscreen mode

Convert the array back into a string

The call string.join(") creates a string with the array elements joined by glue. In this case, the glue is to have no space between the characters.

.join('');
Enter fullscreen modeExit fullscreen mode

Call your function

console.log(camelize("background color green blue"))
Enter fullscreen modeExit fullscreen mode

To test our result, we use console.log(). Otherwise, we wouldn't be able to see if our function is working or not.

To call the function, we call it directly by name, then pass in the parameter value as an argument.

The full answer would be:

function camelize(str) {    return str      .split(' ')      .map((word, index) => index == 0 ? word: word[0].toUpperCase() + word.slice(1)      )      .join('');   }  console.log(camelize("background color green blue"))
Enter fullscreen modeExit fullscreen mode

Finally!

We've created a reusable function that capitalizes every word of a string except the first one, converting a string into camelCase in Javascript.

If you liked this article please follow me on Dev.to for my latest articles. I'm tweeting my journey onTwitter daily, this way to myLinkedIn, and this is myYoutube channel :)

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
frankwisniewski profile image
Frank Wisniewski
programmer specializing in:Javascript, PHP, assembler
  • Location
    Adenau
  • Joined
console.log(camelize("background  color green blue"))
Enter fullscreen modeExit fullscreen mode

type error....

CollapseExpand
 
juliafmorgado profile image
Julia Furst Morgado
Self-taught Full-Stack Web Developer breaking down what I've learned the hard way so you can learn it the easy way.
  • Location
    New York City
  • Education
    UC Berkeley
  • Work
    Software Engineer
  • Joined

It gave you an error? Weird, let me check again.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Self-taught Full-Stack Web Developer breaking down what I've learned the hard way so you can learn it the easy way.
  • Location
    New York City
  • Education
    UC Berkeley
  • Work
    Software Engineer
  • Joined

More fromJulia Furst Morgado

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp