upperFirst()

upperFirst(str): string

Converts the first character of a string to uppercase and the rest to lowercase.

💎 Why is this a Hidden Gem?

Capitalize just the first character — ideal for display names and UI labels.

DEPRECATED

Use capitalize from Arkhe directly instead.

---

Parameters

str: string

The string to convert.

---

Returns: string

The string with its first character converted to uppercase and the rest lowercased.

---

See Also

String.toUpperCase() - MDN

---

Since

2.0.0

---

Also known as

upperFirst (Lodash, es-toolkit) · ❌ (Remeda, Radashi, Ramda, Effect, Modern Dash, Antfu)

---

Example

// ❌ Deprecated approach
upperFirst('hello'); // => 'Hello'
upperFirst('HELLO'); // => 'Hello'

// ✅ Recommended approach
import { capitalize } from 'pithos/arkhe/string/capitalize';
capitalize('hello'); // => 'Hello'

---

How it works?

Converts the first character to uppercase. Deprecated: Use str[0].toUpperCase() + str.slice(1) directly.

Native Equivalent

// ❌ upperFirst('hello')
// ✅ 'hello'[0].toUpperCase() + 'hello'.slice(1)

---

Use Cases

Capitalize first letter 📌

Uppercase first character only.

#capitalize#first#upper#letter

const result = upperFirst('hello'); // 'Hello'

Format user-generated sentences

Ensure the first letter of user-submitted text is capitalized for consistent display.

#format#sentence#user#content#display#normalize

const formatComment = (text: string) => upperFirst(text.trim());

formatComment('great article, thanks!');
// => 'Great article, thanks!'

Build component names from strings

Capitalize the first letter when constructing dynamic component or class names.

#component#name#dynamic#React#convention#PascalCase

const getComponentName = (type: string) => `Icon${upperFirst(type)}`;

getComponentName('arrow');  // 'IconArrow'
getComponentName('check');  // 'IconCheck'