Convert Strings to Camelcase with JavaScript

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will learn how to convert strings to camelcase using JavaScript. Camelcase is a naming convention used in programming where multi-word identifiers are written in a way that each word, except the first one, starts with a capital letter without any spaces or underscores between them. The toCamelCase() function provided in this lab uses regular expressions and array methods to convert strings to camelcase.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") subgraph Lab Skills javascript/variables -.-> lab-28648{{"`Convert Strings to Camelcase with JavaScript`"}} javascript/data_types -.-> lab-28648{{"`Convert Strings to Camelcase with JavaScript`"}} javascript/arith_ops -.-> lab-28648{{"`Convert Strings to Camelcase with JavaScript`"}} javascript/comp_ops -.-> lab-28648{{"`Convert Strings to Camelcase with JavaScript`"}} javascript/higher_funcs -.-> lab-28648{{"`Convert Strings to Camelcase with JavaScript`"}} end

Camelcase String Conversion

To convert a string to camelcase, follow these steps:

  1. Open the Terminal/SSH and type node to start practicing coding.
  2. Use String.prototype.match() with an appropriate regular expression to break the string into words.
  3. Use Array.prototype.map(), Array.prototype.slice(), Array.prototype.join(), String.prototype.toLowerCase(), and String.prototype.toUpperCase() to combine the words and capitalize the first letter of each one.
  4. Use the toCamelCase function shown below to perform the conversion:
const toCamelCase = (str) => {
  const words =
    str &&
    str.match(
      /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
    );
  const capitalizedWords =
    words &&
    words.map(
      (word) => word.slice(0, 1).toUpperCase() + word.slice(1).toLowerCase()
    );
  const camelCaseString = capitalizedWords && capitalizedWords.join("");
  return (
    camelCaseString &&
    camelCaseString.slice(0, 1).toLowerCase() + camelCaseString.slice(1)
  );
};

Here are some examples of how to use the toCamelCase function:

toCamelCase("some_database_field_name"); // 'someDatabaseFieldName'
toCamelCase("Some label that needs to be camelized");
// 'someLabelThatNeedsToBeCamelized'
toCamelCase("some-javascript-property"); // 'someJavascriptProperty'
toCamelCase("some-mixed_string with spaces_underscores-and-hyphens");
// 'someMixedStringWithSpacesUnderscoresAndHyphens'

Summary

Congratulations! You have completed the Camelcase String lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like