JavaScript String Case Conversion: A Complete Guide to 9 Case Formats

Why Case Conventions Matter

Every programming language and ecosystem has preferred naming conventions. In JavaScript, variables and functions use camelCase. React components use PascalCase. CSS classes often use kebab-case. Environment variables and constants typically use CONSTANT_CASE. Database columns might use snake_case.

When data flows between these boundaries -- a REST API response populating a React component, a config file generating environment variables, a CMS title becoming a URL slug -- you need reliable case conversion. Understanding the nine standard case formats and how to convert between them is an essential skill for any JavaScript developer.

The Nine Standard Case Formats

While there are many variations and niche formats, the software industry has converged on nine primary case conventions. Each serves a distinct purpose:

The Core Challenge: Tokenization

The hardest part of case conversion is not the transformation itself -- it is figuring out where the word boundaries are. The input "helloWorld","hello-world", "hello_world", and"HELLO_WORLD" all represent the same two words, but each uses a different delimiter. A robust tokenizer must handle all of them.

The approach is to normalize all inputs by replacing known separators (hyphens, underscores) with spaces, then inserting spaces at camelCase boundaries (where a lowercase letter is followed by an uppercase letter, or where a sequence of uppercase letters precedes a capitalized word). Finally, split on whitespace to get a clean array of words.

function tokenize(input: string): string[] {
  return input
    .replace(/[-_]+/g, ' ')              // separators → spaces
    .replace(/([a-z])([A-Z])/g, '$1 $2') // camelCase splits
    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
    .split(/\s+/)
    .filter(Boolean);
}

tokenize('helloWorld')     // ['hello', 'World']
tokenize('HELLO_WORLD')   // ['HELLO', 'WORLD']
tokenize('kebab-case')    // ['kebab', 'case']
tokenize('XMLParser')     // ['XML', 'Parser']

Building Each Converter

Once you have a tokenizer, each case conversion is straightforward. The pattern is always: tokenize, transform each word, then join with the appropriate separator.

camelCase and PascalCase

Both camelCase and PascalCase capitalize word boundaries. The only difference is whether the first word is lowercased (camelCase) or capitalized (PascalCase). These formats are used extensively in JavaScript and TypeScript. Component names in React and Vue must be PascalCase. Variables, functions, and object properties follow camelCase by convention.

When converting from other formats, be careful with acronyms. The input"XMLHTTPRequest" is ambiguous -- should it becomexmlHttpRequest or xmlhttprequest? Most style guides recommend treating acronyms as regular words in camelCase, so xmlHttpRequestis preferred.

snake_case and CONSTANT_CASE

Snake case joins words with underscores. In its lowercase form, it is the standard in Python, Ruby, and many database schemas. In its uppercase form (CONSTANT_CASE or SCREAMING_SNAKE_CASE), it is the universal convention for constants and environment variables across almost every language and platform.

When writing configuration files, deployment scripts, or CI/CD pipelines, you will frequently need to convert between camelCase property names and CONSTANT_CASE environment variable names. For example, a databaseUrl config property maps to a DATABASE_URL environment variable.

kebab-case

Kebab case (also called dash-case or lisp-case) joins words with hyphens. It is the standard for CSS class names, HTML attributes, URL paths, and CLI flags. The name comes from the visual resemblance to words skewered on a kebab stick.

Kebab case is particularly important for web development because URLs are case-insensitive by convention but hyphens are the preferred word separator. Google explicitly recommends hyphens over underscores in URLs for SEO purposes, since the search engine treats hyphens as word separators but treats underscores as joiners.

Title Case and Sentence Case

Title Case capitalizes the first letter of every word. It is used for headings, button labels, and display names. Sentence case capitalizes only the first letter of each sentence. It is generally preferred for body text, descriptions, and informational messages in user interfaces.

English-language style guides differ on which words to capitalize in titles. AP style lowercases articles, prepositions, and conjunctions shorter than four letters. Chicago style lowercases articles, prepositions, and coordinating conjunctions. For programmatic use, capitalizing every word (simple Title Case) is the most common approach because it is language-agnostic and unambiguous.

Real-World Use Cases

API Response Transformation

REST APIs built in Python or Ruby often return snake_case keys. Frontend JavaScript code expects camelCase. A recursive key-transform utility that convertsuser_name to userName at the API boundary keeps both codebases idiomatic. Many HTTP client libraries like Axios offer interceptors where this conversion can happen transparently.

Code Generation

CLI tools and code generators frequently need case conversion. A database table named user_sessions might generate a TypeScript interface calledUserSession (PascalCase), a variable called userSession(camelCase), and a REST endpoint at /user-sessions (kebab-case). All three derive from the same source name.

URL Slug Generation

Content management systems convert article titles to URL-safe slugs. The title "How to Use TypeScript Generics" becomes how-to-use-typescript-generics. This process involves lowercasing, removing special characters, replacing spaces with hyphens, and optionally transliterating accented characters. Try this yourself with our Slug Generator.

Edge Cases to Watch For

Production-grade case conversion must handle several tricky scenarios: consecutive uppercase letters in acronyms (XMLParser), numbers embedded in identifiers (h2Database), Unicode characters, empty strings, and strings that are already in the target format. A robust implementation should be idempotent -- converting a string that is already in the target format should return it unchanged.

Our Text Transform tool handles all nine case formats with proper tokenization and Unicode support. Try pasting your variable names, API keys, or titles to see the conversions in real time.

Related Tools

Case conversion often pairs with other text operations. Use our URL Encoder for URL-safe encoding, the Hash Generator for checksums, or the Hex Converter for binary-to-hex transformations.