Lodash upperCase with Delimiter Separated Words

The _.upperCase method in the Lodash JavaScript library transforms delimiter-separated strings into clean, space-separated uppercase words. When passed a string containing delimiters such as hyphens, underscores, dots, or slashes, Lodash strips those delimiters, extracts the individual words, capitalizes every letter, and joins the words with a single space. This article details how this transformation works under the hood and provides clear examples of different delimiter formats.

How _.upperCase Works

When _.upperCase processes a string, it follows a three-step pipeline:

  1. Word Extraction: It splits the input string into discrete words using Lodash's internal word-segmentation logic. This logic detects boundaries created by whitespace, casing transitions (like camelCase), and common punctuation/delimiters.
  2. Delimiter Removal: The identified delimiter characters (such as -, _, ., or /) are discarded during the extraction phase rather than preserved.
  3. Reassembly: The isolated words are converted entirely to uppercase letters and joined together using a single space (" ") character.

Handling Specific Delimiters

Lodash handles both single and mixed delimiter types consistently across standard naming conventions.

Hyphens (Kebab-Case)

Hyphens are stripped, including consecutive or surrounding hyphens.

const _ = require('lodash');

_.upperCase('user-profile-settings');
// Output: 'USER PROFILE SETTINGS'

_.upperCase('--header-nav--');
// Output: 'HEADER NAV'

Underscores (Snake_Case)

Underscores are treated as word boundaries and removed, making the function ideal for formatting database column names or constant identifiers.

_.upperCase('first_name_field');
// Output: 'FIRST NAME FIELD'

_.upperCase('__API_RESPONSE__');
// Output: 'API RESPONSE'

Dots and Slashes (Path Formats)

Dots, forward slashes, and backslashes are also treated as word breaks.

_.upperCase('config.database.port');
// Output: 'CONFIG DATABASE PORT'

_.upperCase('assets/images/logo');
// Output: 'ASSETS IMAGES LOGO'

Mixed Delimiters

If a string uses multiple distinct delimiters together, Lodash removes all of them and standardizes the output.

_.upperCase('order_item-id.number');
// Output: 'ORDER ITEM ID NUMBER'

Summary of Delimiter Behavior