Cómo poner la primera letra en mayúscula en JavaScript: 5 formas + secretos

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

«¿Por qué JavaScript no tiene un método incorporado para capitalizar?» — preguntarás

Esta pregunta atormenta a los principiantes desde hace muchos años. En Stack Overflow ha acumulado miles de votos y millones de visitas. Parecería que no hay nada más simple que poner la primera letra en mayúscula. Pero en JavaScript, una operación tan básica se convierte en una pequeña aventura.

En este artículo no solo daremos una respuesta preparada. Analizaremos cinco enfoques diferentes, los compararemos en términos de rendimiento, legibilidad y fiabilidad. Descubrirás por qué str[0].toUpperCase() + str.slice(1) no siempre es la mejor opción y cómo manejar casos exóticos como cadenas vacías o caracteres Unicode.

1. Clásico del género: charAt + slice

La respuesta más popular en Stack Overflow — y con razón. Este método se usa en el 90% de los proyectos.

function capitalizeFirst(str) {    return str.charAt(0).toUpperCase() + str.slice(1);}

console.log(capitalizeFirst('hello')); // 'Hello'console.log(capitalizeFirst('javaScript')); // 'JavaScript'

¿Por qué charAt y no str[0]?

En navegadores antiguos (IE 8 e inferiores), el acceso por índice str[0] devolvía undefined para una cadena vacía. charAt(0) siempre devuelve una cadena vacía, lo cual es más seguro. En el código moderno casi no hay diferencia, pero el hábito de usar charAt se ha mantenido como best practice para compatibilidad con sistemas heredados.

Ventajas: simplicidad, legibilidad, funciona en todas partes.
Desventajas: no maneja cadenas vacías (genera un error TypeError).

2. Enfoque moderno: template literals + slice

Con la llegada de ES6, el código se puede hacer un poco más elegante:

const capitalize = (str) => {    return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;};

O incluso más corto con el operador opcional (ES2020):

const capitalize = (str) => str?.charAt(0).toUpperCase() + str.slice(1);

El operador ?. protege contra null o undefined, pero no contra una cadena vacía. Para una cadena vacía, str?.charAt(0) devolverá "", y toUpperCase() en una cadena vacía también devuelve "". Resultado: "" + "".slice(1) → "". ¡Funciona correctamente!

3. Expresiones regulares: para geeks y estetas

El método con regex parece magia, pero es muy potente:

function capitalizeRegex(str) {    return str.replace(/^./, char => char.toUpperCase());}

console.log(capitalizeRegex('world')); // 'World'

¿Qué sucede aquí? ^. significa «primer carácter de la cadena». Lo reemplazamos con el resultado de llamar a toUpperCase().

Ventajas:

No requiere verificar si la cadena está vacía (regex simplemente no hará nada)
Fácil de extender: /^\\w/ — solo para letras, /^[a-z]/ — solo para el alfabeto latino

Desventajas:

Entre un 20 y un 30% más lento (las pruebas en jsPerf lo confirman)
Menos legible para principiantes

4. Método CSS: cuando no se necesita JS

A veces el mejor código es el código que no escribiste. Si trabajas con la salida de texto en una página, la capitalización mediante CSS puede ser la solución ideal:

/* CSS */.capitalize {    text-transform: capitalize;}

// HTML<p class="capitalize">este texto se mostrará con mayúscula inicial</p>

Pero hay un detalle: text-transform: capitalize pone en mayúscula cada palabra, no solo la primera. Si solo se necesita la primera palabra — no se puede evitar usar JS.