¿Cómo hago la primera letra de una cadena en mayúscula en JavaScript?

¿Cómo hago la primera letra de una cadena en mayúscula, pero no cambio el caso de ninguna de las otras letras?

Por ejemplo:

• "this is a test" -> "This is a test"
• "the Eiffel Tower" -> "The Eiffel Tower"
• "/index.html" -> "/index.html"

La solución básica es:

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

console.log(capitalizeFirstLetter('foo')); // Foo

Algunas otras respuestas se modifican String.prototype(esta respuesta también solía hacerlo), pero aconsejaría en contra de esto ahora debido a la capacidad de mantenimiento (difícil de averiguar dónde se agrega la función prototypey podría causar conflictos si otro código usa el mismo nombre / un navegador agrega una función nativa con ese mismo nombre en el futuro).

... y luego, hay mucho más en esta pregunta cuando se considera la internacionalización, como lo muestra esta asombrosamente buena respuesta (enterrada a continuación).

Si desea trabajar con puntos de código Unicode en lugar de unidades de código (por ejemplo, para manejar caracteres Unicode fuera del plano multilingüe básico), puede aprovechar el hecho de que String#[@iterator]funciona con puntos de código, y puede usarlo toLocaleUpperCasepara obtener mayúsculas de localización correcta:

function capitalizeFirstLetter([ first, ...rest ], locale = navigator.language) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

console.log(capitalizeFirstLetter('foo')); // Foo
console.log(capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉")); // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
console.log(capitalizeFirstLetter("italya", 'tr')); // İtalya" (correct in Turkish Latin!)

Para obtener aún más opciones de internacionalización, consulte la respuesta original a continuación .

Aquí hay un enfoque más orientado a objetos:

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

Llamaría a la función, así:

"hello world".capitalize();

Con la salida esperada siendo:

"Hello world" 

En CSS:

p:first-letter {
    text-transform:capitalize;
}

Aquí hay una versión abreviada de la respuesta popular que obtiene la primera letra tratando la cadena como una matriz:

function capitalize(s)
{
    return s[0].toUpperCase() + s.slice(1);
}

Actualizar:

De acuerdo con los comentarios a continuación, esto no funciona en IE 7 o inferior.

Actualización 2:

Para evitar undefinedcadenas vacías (consulte el comentario de @ njzk2 a continuación ), puede verificar si hay una cadena vacía:

function capitalize(s)
{
    return s && s[0].toUpperCase() + s.slice(1);
}

Si está interesado en el rendimiento de algunos métodos diferentes publicados:

Estos son los métodos más rápidos basados ​​en esta prueba jsperf (ordenados de más rápido a más lento).

Como puede ver, los dos primeros métodos son esencialmente comparables en términos de rendimiento, mientras que la alteración String.prototypees, con mucho, la más lenta en términos de rendimiento.

// 10,889,187 operations/sec
function capitalizeFirstLetter(string) {
    return string[0].toUpperCase() + string.slice(1);
}

// 10,875,535 operations/sec
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// 4,632,536 operations/sec
function capitalizeFirstLetter(string) {
    return string.replace(/^./, string[0].toUpperCase());
}

// 1,977,828 operations/sec
String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

Para otro caso, lo necesito para poner en mayúscula la primera letra y poner en minúscula el resto. Los siguientes casos me hicieron cambiar esta función:

//es5
function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
capitalize("alfredo")  // => "Alfredo"
capitalize("Alejandro")// => "Alejandro
capitalize("ALBERTO")  // => "Alberto"
capitalize("ArMaNdO")  // => "Armando"

// es6 using destructuring 
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();

Esta es la solución ECMAScript 6+ 2018 :

const str = 'the Eiffel Tower';
const newStr = `${str[0].toUpperCase()}${str.slice(1)}`;
console.log('Original String:', str); // the Eiffel Tower
console.log('New String:', newStr); // The Eiffel Tower

Si ya está (o está considerando) usar lodash, la solución es fácil:

_.upperFirst('fred');
// => 'Fred'

_.upperFirst('FRED');
// => 'FRED'

_.capitalize('fred') //=> 'Fred'

Vea sus documentos: https://lodash.com/docs#capitalize

_.camelCase('Foo Bar'); //=> 'fooBar'

https://lodash.com/docs/4.15.0#camelCase

_.lowerFirst('Fred');
// => 'fred'

_.lowerFirst('FRED');
// => 'fRED'

_.snakeCase('Foo Bar');
// => 'foo_bar'

Vanilla js para la primera mayúscula:

function upperCaseFirst(str){
    return str.charAt(0).toUpperCase() + str.substring(1);
}

Poner en mayúscula la primera letra de todas las palabras en una cadena:

function ucFirstAllWords( str )
{
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ )
    {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(" ");
}

Podríamos obtener el primer personaje con uno de mis favoritos RegExp, parece un lindo smiley:/^./

String.prototype.capitalize = function () {
  return this.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

Y para todos los adictos al café:

String::capitalize = ->
  @replace /^./, (match) ->
    match.toUpperCase()

... y para todos los que piensan que hay una mejor manera de hacerlo, sin extender los prototipos nativos:

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

Utilizar:

var str = "ruby java";

console.log(str.charAt(0).toUpperCase() + str.substring(1));

Saldrá "Ruby java"a la consola.

Si usa underscore.js o Lo-Dash , la biblioteca underscore.string proporciona extensiones de cadena, que incluyen mayúsculas:

_.capitalize (string) Convierte la primera letra de la cadena en mayúsculas.

Ejemplo:

_.capitalize("foo bar") == "Foo bar"

String.prototype.capitalize = function(allWords) {
   return (allWords) ? // if all words
      this.split(' ').map(word => word.capitalize()).join(' ') : //break down phrase to words then  recursive calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // if allWords is undefined , capitalize only the first word , mean the first char of the whole string
}

Y entonces:

 "capitalize just the first word".capitalize(); ==> "Capitalize just the first word"
 "capitalize all words".capitalize(true); ==> "Capitalize All Words"

Actualización de noviembre de 2016 (ES6), solo por diversión:

const capitalize = (string = '') => [...string].map(    //convert to array with each item is a char of string by using spread operator (...)
    (char, index) => index ? char : char.toUpperCase()  // index true means not equal 0 , so (!index) is the first char which is capitalized by `toUpperCase()` method
 ).join('')                                             //return back to string

entonces capitalize("hello") // Hello

SHORTEST 3 soluciones, 1 y 2 manejan casos cuando la scadena es "", nully undefined:

 s&&s[0].toUpperCase()+s.slice(1)        // 32 char

 s&&s.replace(/./,s[0].toUpperCase())    // 36 char - using regexp

'foo'.replace(/./,x=>x.toUpperCase())    // 31 char - direct on string, ES6

let s='foo bar';

console.log( s&&s[0].toUpperCase()+s.slice(1) );

console.log( s&&s.replace(/./,s[0].toUpperCase()) );

console.log( 'foo bar'.replace(/./,x=>x.toUpperCase()) );

Solo CSS

p::first-letter {
  text-transform: uppercase;
}

• A pesar de ser llamado ::first-letter, se aplica al primer carácter , es decir, en el caso de una cadena %a, este selector se aplicaría %y, como tal a, no se capitalizaría.
• En IE9 + o IE5.5 + se admite en notación heredada con solo dos puntos ( :first-letter).

ES2015 de una sola línea

Como hay numerosas respuestas, pero ninguna en ES2015 que resolvería el problema original de manera eficiente, se me ocurrió lo siguiente:

const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);

Observaciones

• parameters => functionse llama función de flecha .
• Fui con el nombre en capitalizeFirstCharlugar de capitalizeFirstLetter, porque OP no pidió un código que ponga en mayúscula la primera letra de toda la cadena, sino el primer carácter (si es letra, por supuesto).
• constnos da la capacidad de declarar capitalizeFirstCharcomo constante, lo cual es deseable ya que como programador siempre debe indicar explícitamente sus intenciones.
• En el punto de referencia que realicé no hubo diferencias significativas entre string.charAt(0)y string[0]. Sin embargo, string[0]tenga en cuenta que eso sería undefinedpara una cadena vacía, por lo que debe reescribirse string && string[0], lo que es demasiado detallado, en comparación con la alternativa.
• string.substring(1)es más rápido que string.slice(1).

Punto de referencia

• 4,956,962 ops / s ± 3.03% para esta solución,
• 4,577,946 ops / s ± 1.2% para la respuesta más votada.
• Creado con JSBench.me en Google Chrome 57.

Hay una manera muy simple de implementarlo mediante el reemplazo . Para ECMAScript 6:

'foo'.replace(/^./, str => str.toUpperCase())

Resultado:

'Foo'

No vi ninguna mención en las respuestas existentes de cuestiones relacionadas con los puntos de código del plano astral o la internacionalización. "Mayúsculas" no significa lo mismo en todos los idiomas que utilizan un script determinado.

Inicialmente no vi ninguna respuesta que abordara los problemas relacionados con los puntos de código del plano astral. Hay uno , pero está un poco enterrado (¡como este, supongo!)

La mayoría de las funciones propuestas se ven así:

function capitalizeFirstLetter(str) {
  return str[0].toUpperCase() + str.slice(1);
}

Sin embargo, algunos caracteres en mayúscula quedan fuera del BMP (plano multilingüe básico, puntos de código U + 0 a U + FFFF). Por ejemplo, tome este texto de Deseret:

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

El primer carácter aquí no puede capitalizarse porque las propiedades indexadas de la matriz de cadenas no acceden a "caracteres" o puntos de código *. Acceden a las unidades de código UTF-16. Esto también es cierto cuando se divide: los valores de índice apuntan a unidades de código.

Resulta que las unidades de código UTF-16 son 1: 1 con puntos de código USV dentro de dos rangos, U + 0 a U + D7FF y U + E000 a U + FFFF inclusive. La mayoría de los personajes en mayúsculas caen en esos dos rangos, pero no todos.

A partir de ES2015, lidiar con esto se volvió un poco más fácil. String.prototype[@@iterator]produce cadenas correspondientes a puntos de código **. Entonces, por ejemplo, podemos hacer esto:

function capitalizeFirstLetter([ first, ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Para cadenas más largas, esto probablemente no sea terriblemente eficiente ***: realmente no necesitamos repetir el resto. Podríamos usar String.prototype.codePointAtpara llegar a esa primera (posible) letra, pero aún tendríamos que determinar dónde debería comenzar el corte. Una forma de evitar iterar el resto sería probar si el primer punto de código está fuera del BMP; si no es así, el corte comienza en 1, y si lo es, el corte comienza en 2.

function capitalizeFirstLetter(str) {
  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Podrías usar matemática bit a bit en lugar de > 0xFFFFallí, pero probablemente sea más fácil de entender de esta manera y lograrías lo mismo.

También podemos hacer que esto funcione en ES5 y versiones posteriores llevando esa lógica un poco más lejos si es necesario. No hay métodos intrínsecos en ES5 para trabajar con puntos de código, por lo que debemos probar manualmente si la primera unidad de código es un sustituto ****:

function capitalizeFirstLetter(str) {
  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Al principio también mencioné consideraciones de internacionalización. Algunos de estos son muy difíciles de explicar porque requieren conocimiento no solo de qué idioma se está utilizando, sino que también pueden requerir un conocimiento específico de las palabras en el idioma. Por ejemplo, el dígrafo irlandés "mb" se capitaliza como "mB" al comienzo de una palabra. Otro ejemplo, el eszett alemán, nunca comienza una palabra (afaik), pero todavía ayuda a ilustrar el problema. La letra minúscula eszett ("ß") se escribe en mayúscula a "SS", pero "SS" podría minúscula a "ß" o "ss". ¡Se requiere conocimiento fuera de banda del idioma alemán para saber cuál es la correcta!

El ejemplo más famoso de este tipo de problemas, probablemente, es el turco. En latín turco, la forma mayúscula de i es İ, mientras que la forma minúscula de I es ı: son dos letras diferentes. Afortunadamente tenemos una forma de dar cuenta de esto:

function capitalizeFirstLetter([ first, ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

En un navegador, la etiqueta de idioma más preferida del usuario se indica mediante navigator.language, se encuentra una lista en orden de preferencia navigator.languages, y se puede obtener el idioma de un elemento DOM dado (generalmente) con Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREdocumentos en varios idiomas .

En los agentes que admiten clases de caracteres de propiedad Unicode en RegExp, que se introdujeron en ES2018, podemos limpiar más aún expresando directamente en qué caracteres estamos interesados:

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

Esto podría modificarse un poco para manejar también mayúsculas múltiples palabras en una cadena con bastante buena precisión. La propiedad de carácter CWUo Changes_When_Uppercased coincide con todos los puntos de código que, bueno, cambian cuando se escribe en mayúscula. Podemos probar esto con caracteres de dígrafo enchapados en títulos como el holandés ij por ejemplo:

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

En el momento de escribir este artículo (febrero de 2020), Firefox / Spidermonkey aún no ha implementado ninguna de las características RegExp introducidas en los últimos dos años *****. Puede verificar el estado actual de esta función en la tabla de compatibilidad de Kangax . Babel puede compilar literales RegExp con referencias de propiedad a patrones equivalentes sin ellos, pero tenga en cuenta que el código resultante puede ser enorme.

Con toda probabilidad, las personas que hagan esta pregunta no se preocuparán por la capitalización o la internacionalización de Deseret. Pero es bueno estar al tanto de estos problemas porque hay una buena posibilidad de que los encuentres eventualmente, incluso si no son preocupaciones actualmente. No son casos "límite", o mejor dicho, no son casos límite por definición : hay un país entero donde la mayoría de la gente habla turco, de todos modos, y la combinación de unidades de código con puntos de código es una fuente bastante común de errores (especialmente con respecto a los emoji). ¡Tanto las cadenas como el lenguaje son bastante complicados!

* Las unidades de código de UTF-16 / UCS2 también son puntos de código Unicode en el sentido de que, por ejemplo, U + D800 es técnicamente un punto de código, pero eso no es lo que "significa" aquí ... más o menos ... aunque se pone bastante borroso. Sin embargo, lo que los sustitutos definitivamente no son son los USV (valores escalares Unicode).

** Sin embargo, si una unidad de código sustituto está "huérfana", es decir, no forma parte de un par lógico, también podría obtener sustitutos aquí.

*** tal vez. No lo he probado. A menos que haya determinado que la capitalización es un cuello de botella significativo, probablemente no me preocupe, elija lo que considere más claro y legible.

**** tal función podría desear probar las unidades de código primera y segunda en lugar de solo la primera, ya que es posible que la primera unidad sea un sustituto huérfano. Por ejemplo, la entrada "\ uD800x" capitalizaría la X tal cual, lo que puede esperarse o no.

***** Aquí está el problema de Bugzilla si quieres seguir el progreso más directamente.

Parece ser más fácil en CSS:

<style type="text/css">
    p.capitalize {text-transform:capitalize;}
</style>
<p class="capitalize">This is some text.</p>

Esto es de CSS Text -transform Property (en W3Schools ).

var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);

Siempre es mejor manejar este tipo de cosas usando CSS primero , en general, si puedes resolver algo usando CSS, ve por eso primero, luego prueba JavaScript para resolver tus problemas, así que en este caso intenta usar :first-letterCSS y aplicatext-transform:capitalize;

Intente crear una clase para eso, de modo que pueda usarla globalmente, por ejemplo: .first-letter-uppercasey agregue algo como a continuación en su CSS:

.first-letter-uppercase:first-letter {
    text-transform:capitalize;
}

También la opción alternativa es JavaScript, así que lo mejor será algo como esto:

function capitalizeTxt(txt) {
  return txt.charAt(0).toUpperCase() + txt.slice(1); //or if you want lowercase the rest txt.slice(1).toLowerCase();
}

y lo llaman así:

capitalizeTxt('this is a test'); // return 'This is a test'
capitalizeTxt('the Eiffel Tower'); // return 'The Eiffel Tower'
capitalizeTxt('/index.html');  // return '/index.html'
capitalizeTxt('alireza');  // return 'Alireza'

Si desea reutilizarlo una y otra vez, es mejor adjuntarlo a la cadena nativa de JavaScript, por lo que algo como a continuación:

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

y llámalo como a continuación:

'this is a test'.capitalizeTxt(); // return 'This is a test'
'the Eiffel Tower'.capitalizeTxt(); // return 'The Eiffel Tower'
'/index.html'.capitalizeTxt();  // return '/index.html'
'alireza'.capitalizeTxt();  // return 'Alireza'

Si desea volver a formatear el texto en mayúsculas, puede modificar los otros ejemplos como tales:

function capitalize (text) {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

Esto asegurará que se cambie el siguiente texto:

TEST => Test
This Is A TeST => This is a test

function capitalize(s) {
    // returns the first letter capitalized + the string from index 1 and out aka. the rest of the string
    return s[0].toUpperCase() + s.substr(1);
}


// examples
capitalize('this is a test');
=> 'This is a test'

capitalize('the Eiffel Tower');
=> 'The Eiffel Tower'

capitalize('/index.html');
=> '/index.html'

Aquí hay una función llamada ucfirst () (abreviatura de "primera letra mayúscula"):

function ucfirst(str) {
    var firstLetter = str.substr(0, 1);
    return firstLetter.toUpperCase() + str.substr(1);
}

Puede poner en mayúscula una cadena llamando a ucfirst ("alguna cadena") , por ejemplo,

ucfirst("this is a test") --> "This is a test"

Funciona dividiendo la cuerda en dos pedazos. En la primera línea, saca firstLetter y luego, en la segunda línea, capitaliza firstLetter llamando a firstLetter.toUpperCase () y lo une con el resto de la cadena, que se encuentra llamando a str.substr (1) .

Puede pensar que esto fallaría para una cadena vacía, y de hecho en un lenguaje como C, tendría que atender esto. Sin embargo, en JavaScript, cuando toma una subcadena de una cadena vacía, solo recupera una cadena vacía.

String.prototype.capitalize = function(){
    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
    } );
};

Uso:

capitalizedString = someString.capitalize();

Esta es una cadena de texto => Esta es una cadena de texto

var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);

Verifique esta solución:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 

yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

(Puede encapsularlo en una función o incluso agregarlo al prototipo String si lo usa con frecuencia).

La ucfirstfunción funciona si lo haces así.

function ucfirst(str) {
    var firstLetter = str.slice(0,1);
    return firstLetter.toUpperCase() + str.substring(1);
}

Gracias JP por la aclaración.

Puedes hacerlo en una línea como esta

string[0].toUpperCase() + string.substring(1)

yourString.replace(/\w/, c => c.toUpperCase())

Encontré esta función de flecha más fácil. Reemplazar coincide con el primer carácter de letra ( \w) de su cadena y lo convierte a mayúsculas. Nada más lujoso necesario.