String Casing Utilities in JavaScript

String Casing Utilities in JavaScript

Sometimes, instead of adding a bulky library to handle string casing, all we need are a few simple, reusable functions for converting strings from one case format to another. This article presents handy utility functions for these use cases. Feel free to copy and paste them into your project!

Common String Casing Conversions

When working with JavaScript, you'll frequently encounter various casing styles. The right utility function can save time and ensure consistency. Here are some key string cases you’ll likely use:

• PascalCase: Every word starts with a capital letter, no spaces (e.g., MyVariable).
• camelCase: Similar to PascalCase, but the first letter is lowercase (e.g., myVariable).
• kebab-case: Words are separated by hyphens, all lowercase (e.g., my-variable).
• Plain Text: Natural human-readable format, typically in lowercase (e.g., my variable).

Let’s explore some essential utility functions to convert between these formats.

1. Capitalize All Words in a String

/**
 * Capitalize the first letter of all words in a string.
 *
 * @param str The string to capitalize.
 * @returns The capitalized string.
 * @example
 * capitalizeAll('hello world') // "Hello World"
 */
function capitalizeAll(str: string): string {
  return str.replace(/\b\w/g, (char) => char.toUpperCase())
}

2. Convert PascalCase to Plain Text

/**
 * Convert a PascalCase string to plain text.
 *
 * @param str The string to convert.
 * @returns The plain text.
 * @example
 * pascalCaseToPlainText('HelloWorld') // "hello world"
 */
function pascalCaseToPlainText(str: string): string {
  return str
    .replace(/([A-Z])/g, ' $1')
    .trim()
    .toLowerCase()
}

3. Convert camelCase to kebab-case

/**
 * Convert a camel case string to kebab case.
 *
 * @param str The string to convert.
 * @returns The kebab case string.
 * @example
 * camelCaseToKebabCase('helloWorld') // "hello-world"
 */
function camelCaseToKebabCase(str: string): string {
  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
}

4. Convert kebab-case to Plain Text

/**
 * Convert a kebab case string to plain text.
 *
 * @param str The string to convert.
 * @returns The plain text.
 * @example
 * kebabCaseToPlainText('hello-world') // "hello world"
 */
function kebabCaseToPlainText(str: string): string {
  return str.replace(/-/g, ' ')
}

5. Convert Plain Text to kebab-case

/**
 * Convert plain text to kebab case.
 *
 * @param str The string to convert.
 * @returns The kebab case string.
 * @example
 * toKebabCase('Hello World') // "hello-world"
 */
function toKebabCase(str: string): string {
  return str.replace(/\s+/g, '-').toLowerCase()
}

Visual Representation of String Conversions

Here’s a quick look at how the string transformations work:

Practical Uses for Casing Conversions

These utilities are incredibly useful for:

• Formatting input data in different casing styles (e.g., user input forms).
• Converting API responses to match the naming conventions in your app.
• Displaying data in a more human-readable format on a UI.

Why Not Use Libraries?

While libraries like Lodash or Underscore provide utility functions for string conversions, it’s often overkill for small projects. These minimal functions can easily handle the job without adding unnecessary dependencies to your codebase.

What’s Next?

Stay tuned for more string casing utilities! We’re planning to add functions for:

• snake_case transformations
• Converting between multiple cases in one go
• Detecting string casing types

Feel free to comment with your suggestions or feature requests!

Learn how to safely rename a case-sensitive file or directory in a Git repository: Case sensitive renaming