Cómo poner en mayúsculas la primera letra de una cadena en JavaScript

JavaScript ofrece muchas formas de poner en mayúscula una cadena para convertir el primer carácter en mayúscula. Aprenda las diversas formas y también descubra cuál debe usar, usando JavaScript simple

Una de las operaciones más comunes con cadenas es poner la cadena en mayúsculas: en mayúsculas su primera letra y dejar el resto de la cadena como está.


La mejor forma de hacerlo es mediante una combinación de dos funciones. Uno pone en mayúsculas la primera letra y el segundo corta la cadena y la devuelve a partir del segundo carácter:

const name = 'flavio'
const nameCapitalized = name.charAt(0).toUpperCase() + name.slice(1)

Puede extraer eso a una función, que también comprueba si el parámetro pasado es una cadena, y devuelve una cadena vacía si no:

const capitalize = (s) => {
  if (typeof s !== 'string') return ''
  return s.charAt(0).toUpperCase() + s.slice(1)
}

capitalize(‘flavio’) //‘Flavio’ capitalize(‘f’) //‘F’ capitalize(0) //’’ capitalize({}) //’’

En lugar de usars.charAt(0)también puede usar la indexación de cadenas (no es compatible con versiones anteriores de IE):s[0].

Algunas soluciones en línea abogan por agregar la función al prototipo String:

String.prototype.capitalize = function() {
  return this.charAt(0).toUpperCase() + this.slice(1)
}

(usamos una función regular para hacer uso dethis-funciones de flechafallaría en este caso, ya quethisen las funciones de flecha no hace referencia al objeto actual)

Esta solución no es ideal, porque la edición del prototipo generalmente no se recomienda y es una solución mucho más lenta que tener una función independiente.


No olvide que si solo desea capitalizar con fines de presentación en una página web, CSS podría ser una mejor solución, solo agregue uncapitalizeclass a su párrafo HTML y use:

p.capitalize {
  text-transform: capitalize;
}

Más tutoriales de js: