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

¿Cómo hago mayúscula la primera letra de una cadena, 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"

preguntado el 22 de junio de 09 a las 05:06

Subrayar tiene un complemento llamado subrayado.string que incluye esto y un montón de otras herramientas geniales. -

Más simple: string[0].toUpperCase() + string.substring(1) -

`${s[0].toUpperCase()}${s.slice(1)}` -

([initial, ...rest]) => [initial.toUpperCase(), ...rest].join("") -

Escriba con mayúscula cada palabra: str.replace(/(^\w|\s\w)/g, m => m.toUpperCase()) -

30 Respuestas

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 modifican String.prototype (esta respuesta también solía hacerlo), pero desaconsejaría esto ahora debido a la facilidad de mantenimiento (es difícil saber dónde se está agregando la función a la prototype y 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 esta respuesta asombrosamente buena (enterrado abajo) muestra.

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 puedes usar toLocaleUpperCase para obtener mayúsculas correctas para la configuración regional:

const capitalizeFirstLetter = ([ first, ...rest ], locale = navigator.language) =>
  first.toLocaleUpperCase(locale) + rest.join('')

console.log(
  capitalizeFirstLetter('foo'), // Foo
  capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"), // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
  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.

Respondido el 19 de diciembre de 20 a las 09:12

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

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

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

"hello, world!".capitalize();

Con el resultado esperado siendo:

"Hello, World!"

Respondido el 06 de enero de 21 a las 23:01

En CSS:

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

Respondido 12 ago 16, 23:08

$ ('# mystring_id'). text (cadena) .css ('text-transform', 'capitalize'); - DonMB

Además, esto solo afecta la visualización de la cadena, no el valor real. Si está en un formulario, por ejemplo, el valor aún se enviará como está. - Dmansfield

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

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

Actualizar:

Según los comentarios a continuación, esto no funciona en IE 7 o inferior.

Update 2:

Para evitar undefined para cadenas vacías (ver Comentario de @ njzk2 a continuación), puede buscar una cadena vacía:

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

contestado el 23 de mayo de 17 a las 13:05

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 (ordenado 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 alterar el String.prototype es, con mucho, el más lento 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);
}

enter image description here

Respondido el 20 de junio de 20 a las 10:06

Para otro caso, lo necesito para poner en mayúscula la primera letra y en minúsculas 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();

Respondido el 05 de junio de 18 a las 22:06

No vi ninguna mención en las respuestas existentes de problemas relacionados con puntos de código del plano astral o internacionalización. "Mayúsculas" no significa lo mismo en todos los idiomas que utilizan una escritura determinada.

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


La mayoría de las funciones propuestas tienen este aspecto:

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

Sin embargo, algunos caracteres en mayúsculas 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 se escribe en mayúsculas porque las propiedades indexadas por matrices de cadenas no acceden a "caracteres" o puntos de código *. Acceden a unidades de código UTF-16. Esto también es cierto al cortar: los valores de índice apuntan a unidades de código.

Sucede 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 entran 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 iterar el resto. Podríamos usar String.prototype.codePointAt para llegar a esa primera (posible) letra, pero aún tendríamos que determinar dónde debe comenzar el segmento. Una forma de evitar la iteración del resto sería probar si el primer punto de código está fuera del BMP; si no es así, el segmento comienza en 1, y si lo es, el segmento 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áticas bit a bit en lugar de > 0xFFFF allí, pero probablemente sea más fácil de entender de esta manera y cualquiera de los dos lograría lo mismo.

También podemos hacer que esto funcione en ES5 y versiones posteriores llevando esa lógica un poco más allá si es necesario. No hay métodos intrínsecos en ES5 para trabajar con puntos de código, por lo que tenemos que 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 conocimientos no solo de qué se está utilizando el idioma, pero también puede requerir un conocimiento específico de las palabras del idioma. Por ejemplo, el dígrafo irlandés "mb" se escribe en mayúsculas 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. El eszett ("ß") en minúscula se escribe en mayúscula en "SS", pero "SS" puede cambiar en minúscula a "ß" o "ss". ¡Necesita un conocimiento fuera de banda del idioma alemán para saber cuál es el correcto!

El ejemplo más famoso de este tipo de problemas es probablemente el turco. En el 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 preferido del usuario se indica mediante navigator.language, una lista en orden de preferencia se encuentra en navigator.languages, y el lenguaje de un elemento DOM dado se puede obtener (generalmente) con Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HERE en documentos en varios idiomas.

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

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 el uso de mayúsculas en varias palabras en una cadena con bastante precisión. La CWU or Cambios_cuando_mayúsculas La propiedad de carácter coincide con todos los puntos de código que, bueno, cambian cuando se escriben en mayúsculas. Podemos probar esto con un dígrafo con caracteres como el holandés ij por ejemplo:

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

A partir de enero de 2021, todos los motores principales han implementado la característica de clase de carácter de propiedad Unicode, pero dependiendo de su rango de soporte objetivo, es posible que aún no pueda usarlo de manera segura. El último navegador en introducir soporte fue Firefox (78; 30 de junio de 2020). Puede comprobar la compatibilidad con esta función con el Tabla de compatibilidad Kangax. Babel se puede utilizar para compilar literales RegExp con referencias de propiedad a patrones equivalentes sin ellos, pero tenga en cuenta que el código resultante a veces puede ser enorme. Probablemente no desee hacer esto a menos que esté seguro de que la compensación está justificada para su caso de uso.


Con toda probabilidad, las personas que hagan esta pregunta no estarán preocupadas por la capitalización o la internacionalización de Deseret. Pero es bueno estar al tanto de estos problemas porque es muy probable que los encuentre eventualmente, incluso si no son preocupaciones en este momento. No son casos "extremos", o mejor dicho, no son por definición casos extremos: hay todo un país 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í ... algo así como ... aunque se pone bastante difuso. Sin embargo, lo que definitivamente no son los sustitutos son los USV (valores escalares Unicode).

** Aunque si una unidad de código sustituta está "huérfana", es decir, no forma parte de un par lógico, también puede obtener sustitutas aquí.

*** quizás. No lo he probado. A menos que haya determinado que las mayúsculas son un cuello de botella significativo, probablemente no me preocuparía: elija lo que crea que es más claro y legible.

**** Es posible que tal función desee probar tanto la primera como la segunda unidad de código en lugar de solo la primera, ya que es posible que la primera unidad sea un sustituto huérfano. Por ejemplo, la entrada "\ uD800x" pondría en mayúscula la X tal cual, lo que puede esperarse o no.

Respondido el 05 de enero de 21 a las 19:01

Esta respuesta debe trasladarse al frente. - Rúnar Berg

Gracias @ RúnarBerg - ya que su comentario me recordó esto, lo volví a leer y me di cuenta de que había dejado un caso final y una solución que vale la pena mencionar. También traté de aclarar mejor parte de la terminología. - Punto y coma

¡Subestimado! Debería haber más respuestas como esta, aprendí algo nuevo hoy. Gracias por eso. - megajin

Esta es la solución ECMAScript 2018+ 6:

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

Respondido el 14 de junio de 19 a las 00:06

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

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

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

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

Ver su documentación: 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'

JavaScript vainilla para la primera mayúscula:

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

Respondido el 06 de enero de 21 a las 23:01

Creo que la preferencia debería ser para Vanilla J, ya que la mayoría de las personas no descargarán un marco completo solo para escribir una cadena en mayúscula. - GGG

En todos mis proyectos hasta ahora nunca he usado lodash. Tampoco olvide que la mayoría de las personas en Google terminarán en esta página, y enumerar un marco como alternativa está bien, pero no como una respuesta principal. - GGG

Escriba en mayúscula la primera letra de todas las palabras de 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(" ");
}

Respondido 21 Abr '16, 07:04

Volver a leer la pregunta: quiero poner en mayúscula el primer carácter de una cadena, pero no cambiar el caso de ninguna de las otras letras. - Jimmy Peña

Sé que lo hice. Agregaría una cosa, en caso de que toda la cadena comience en mayúscula: piezas [i] = j + piezas [i] .substr (1) .toLowerCase (); - Malovich

Otra solución a este caso: function capitaliseFirstLetters (s) {return s.split ("") .map (function (w) {return w.charAt (0) .toUpperCase () + w.substr (1)}). Join ("")} Puede ser una buena frase de una sola línea si no se incluye en una función. - Lucas Channings

Sería mejor primero poner en minúscula toda la cadena - Magico

Aparte de que esta función no responde a la pregunta, en realidad también es demasiado complicada. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ') - Sobrecodificador

String.prototype.capitalize = function(allWords) {
   return (allWords) ? // If all words
      this.split(' ').map(word => word.capitalize()).join(' ') : // Break down the phrase to words and then recursive
                                                                 // calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // If allWords is undefined, capitalize only the first word,
                                                    // meaning the first character 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 para 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 character which is capitalized by
                                                        // the `toUpperCase()` method
 ).join('')                                             // Return back to string

luego capitalize("hello") // Hello

Respondido el 06 de enero de 21 a las 23:01

Creo que esta es una mala solución por 2 razones: Modificar el prototipo de un primitivo es una mala idea. Si la especificación cambia y deciden elegir 'capitalizar' como un nuevo nombre de propiedad proto, está rompiendo la funcionalidad del lenguaje principal. Además, el nombre del método elegido es deficiente. A primera vista, creo que esto capitalizará toda la cadena. Usar un nombre más descriptivo como ucFirst de PHP o algo similar podría ser una mejor idea. - amigo

La otra respuesta de ES6 es más simple: const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();. - Dan Dascalescu

@dudewad en css, poner en mayúscula la primera letra de una palabra es llamar 'capitalizar', y si desea poner en mayúscula todos los caracteres, use 'mayúsculas', por lo tanto, no es una mala elección. - Alguien especial

Podríamos conseguir el primer personaje con uno de mis favoritos. RegExp, parece una linda carita sonriente: /^./

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 hacer esto, sin extender los prototipos nativos:

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

Respondido el 13 de junio de 15 a las 00:06

Hay una mejor manera de hacer esto sin modificar el prototipo String. - Gran McLargeEnorme

@ davidkennedy85 ¡Seguro! Pero esta es la forma sencilla, no la el albergue mejor calificado camino... ;-) - yckart

Querido señor, ¡hay un millón de respuestas a esta pregunta! Su solución se ve aún mejor en es6. 'Answer'.replace(/^./, v => v.toLowerCase()) - stwilz

¿A qué te refieres con "café"? "CoffeeScript"? - Pedro Mortensen

Hay una forma muy sencilla de implementarlo reemplazar. Para ECMAScript 6:

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

Resultado:

'Foo'

Respondido el 14 de junio de 19 a las 00:06

La mejor respuesta con diferencia, y puntos extra por mostrar la sintaxis lambda de expresiones regulares. Me gusta especialmente este, ya que se puede cortar y pegar con fluidez en cualquier lugar. - Wade Hatler

Usar /^[a-z]/i será mejor que usar . ya que el anterior no intentará reemplazar ningún carácter que no sean alfabetos - código maníaco

¡Muy inteligente en verdad! - código mono

SHORTEST 3 soluciones, 1 y 2 maletines cuando s cadena es "", null y 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()) );

Respondido el 17 de junio de 19 a las 12:06

Uso:

var str = "ruby java";

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

Saldrá "Ruby java" a la consola

Respondido el 14 de junio de 19 a las 00:06

Solución de una línea. - Ahmad Sharif

Solo CSS

Si la transformación es necesaria solo para mostrarla en una página web:

p::first-letter {
  text-transform: uppercase;
}
  • A pesar de ser llamado "::first-letter", se aplica a la primera personaje, es decir, en caso de cadena %a, este selector se aplicaría a % y como tal a no estaría en mayúscula.
  • En IE9 + o IE5.5 +, se admite en notación heredada con solo dos puntos (:first-letter).

ES2015 de una sola línea

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

observaciones

  • En el punto de referencia que realicé, no hubo diferencia significativa entre string.charAt(0) y string[0]. Sin embargo, tenga en cuenta que string[0] sería undefined para una cadena vacía, por lo que la función tendría que ser reescrita para usar "string && string[0]", 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 entre substring() y slice()

La diferencia es bastante minúscula hoy en día (haz la prueba tú mismo):

  • 21,580,613.15 operaciones / s ± 1.6% para substring(),
  • 21,096,394.34 operaciones / s ± 1.8% (2.24% más lento) para slice().

Comparación de soluciones

Respondido 21 Feb 21, 17:02

En realidad, no desea utilizar el signo más (+) como método de concatenación en ES6. Querrá usar literales de plantilla: eslint.org/docs/rules/prefer-template - esterlina bourne

Si utiliza Underscore.js or Lodash, la subrayado.string la biblioteca proporciona extensiones de cadena, incluidas las mayúsculas:

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

Ejemplo:

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

Respondido el 06 de enero de 21 a las 23:01

Desde, versión 3.0.0, Lo-Dash tiene este método de cadena disponible por defecto. Como se describe en esta respuesta: _.capitalize("foo") === "Foo". - bardzusny

También hay una función útil de underscore.js llamada humanize. Convierte un hilo subrayado, camelizado o rayado en uno humanizado. También elimina los espacios en blanco al principio y al final, y elimina el sufijo '_id'. - Stepan Zajarov

A partir de la versión 4 *, Lodash también pone en minúsculas () cada dos letras, ¡ten cuidado! - Igor Loskutov

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

Respondido 25 ago 16, 13:08

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 Propiedad de transformación de texto CSS (En W3Schools).

Respondido 21 Abr '16, 07:04

@Simon No se indica que la cadena necesariamente se generará como parte de un documento HTML; CSS solo será útil si lo es. - Adán Hepton

Adam, es cierto, pero supongo que más del 95% del Javascript se usa con HTML y CSS. Desafortunadamente, la declaración "capitalizar" en realidad usa mayúsculas cada palabra, por lo que aún necesitaría que JS escriba en mayúscula solo la primera letra de la cadena. - Simón Este

Incorrecto, Dinesh. Él dijo el primer carácter de la cadena. - Simón Este

Esta respuesta, a pesar de tener una cantidad ridícula de votos a favor, es simplemente incorrecta, ya que pondrá en mayúscula la primera letra de cada palabra. @Ryan, ganarás un Insignia disciplinada si lo borra. Por favor, hazlo. - Dan Dascalescu

De acuerdo con @DanDascalescu: la respuesta de Ryan es completamente incorrecta. - Timo Ernst

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 ucfirst("some string") -- por ejemplo,

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

Funciona dividiendo la cuerda en dos piezas. En la primera línea se saca firstLetter y luego en la segunda línea se escribe con mayúscula firstLetter al firstLetter.toUpperCase() y lo une con el resto de la cadena, que se encuentra llamando str.substr(1).

Podría 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, simplemente obtiene una cadena vacía.

respondido 09 mar '21, 16:03

Use String.substring () o String.slice () ... No use substr (), está en desuso. - James

@ 999: ¿dónde dice eso? substr() ¿es obsoleto? No es, incluso ahora, tres años después, y mucho menos en 2009, cuando hizo este comentario. - Dan Dascalescu

substr() puede no estar marcado como obsoleto por ninguna implementación popular de ECMAScript (dudo que no vaya a desaparecer pronto), pero no es parte de la especificación de ECMAScript. La 3ª edición de la especificación lo menciona en el anexo no normativo para "sugerir una semántica uniforme para tales propiedades sin hacer que las propiedades o su semántica formen parte de este estándar". - pedro óxido

Tener 3 métodos que hacen lo mismo (substring, substr y slice) es demasiado, en mi opinión. Yo siempre uso slice debido a que admite índices negativos, no tiene el comportamiento confuso de intercambio de argumentos y su API es similar a slice en otros idiomas. - pedro óxido

Si desea reformatear el texto en mayúsculas, es posible que desee 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

Respondido 21 Abr '16, 07:04

Probablemente valga la pena señalar que esto también convertirá cosas como acrónimos a minúsculas, por lo que tal vez no sea la mejor idea en la mayoría de los casos: monócromo

Además, GAMITG democracia hacer una edición solo para eliminar un espacio en blanco de una parte sin código de la publicación? O_O - monócromo

por cierto, esto romperá los acrónimos en mayúsculas, así que tengan cuidado, todos <3 - monócromo

Siempre es mejor manejar este tipo de cosas usando CSS primero, en general, si puede resolver algo usando CSS, hágalo primero, luego pruebe JavaScript para resolver sus problemas, así que en este caso intente usar :first-letter en CSS y aplicar text-transform:capitalize;

Así que intente crear una clase para eso, para que pueda usarla globalmente, por ejemplo: .first-letter-uppercase y agregue algo como a continuación en su CSS:

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

Además, la opción alternativa es JavaScript, por lo 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 llámalo como:

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, así que algo como a continuación:

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

y llámalo de la siguiente manera:

'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'

Respondido el 11 de diciembre de 18 a las 09:12

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'

Respondido 14 Jul 15, 20:07

Hecho @Ram. También se incluyen ejemplos. - Fredrik A.

¿Cómo es esto mejor que la respuesta de 2009?. - Dan Dascalescu

No es @DanDascalescu. Supongo que podrías argumentar que substr/substring es un poco más semántico que slice, pero eso es solo una cuestión de preferencia. Sin embargo, incluí ejemplos con las cadenas proporcionadas en la pregunta, lo cual es un buen toque que no está presente en el ejemplo de 09. Honestamente, creo que se reduce a que yo tenía 15 años y que quería karma en StackOverflow;) - Fredrik 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

Respondido el 06 de enero de 21 a las 23:01

Las expresiones regulares son excesivas para esto. - antonio sotile

+1, esto es lo que realmente estaba buscando. Sin embargo, hay un error menor, debería ser return.this.toLocaleLowerCase().replace( ... - tomdemuyt

+1, encontré esta página buscando una versión javascript de phps ucfirst, que sospecho que es la forma en que la mayoría de la gente la encuentra. - benubird

@DanDascalescu Encontré esto útil, así que +1 utilitarismo y -1 retención anal. Incluyó un ejemplo, por lo que su función es clara. - travis webb

String.prototype.capitalize = function(){ return this.replace( /(^|\s)[a-z]/g , function(m){ return m.toUpperCase(); }); }; Refactorizo ​​un poco tu código, solo necesitas una primera coincidencia. - IGRACH

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

Respondido el 05 de junio de 14 a las 05:06

Solo porque esto es realmente una sola línea, incluiré esta respuesta. Se trata de un ES6de cuerda interpolada basada en una sola línea.

let setStringName = 'the Eiffel Tower';
setStringName = `${setStringName[0].toUpperCase()}${setStringName.substring(1)}`;

Respondido el 06 de enero de 21 a las 22:01

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

Encontré esta función de flecha más fácil. Reemplaza coincide con el carácter de la primera letra (\w) de su cadena y la convierte a mayúsculas. No se necesita nada más elegante.

Respondido el 06 de enero de 21 a las 23:01

Esta debería ser la respuesta aceptada, en cambio, es casi la última ya que SO sigue otorgando preguntas obsoletas. Por cierto, es mejor usar /./ por dos razones: /\w/ omitirá todos los caracteres anteriores que no son letras (por lo que @@ abc se convertirá en @@ Abc), y luego no funciona con caracteres no latinos - Cristian Traina

Todo esto hasta el final. - planchris

Mira esta solución:

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

Respondido el 06 de enero de 21 a las 23:01

Esta debería ser la respuesta aceptada. La solución principal no debería utilizar un marco como el subrayado. - Adán McArthur

Guarde algunas pulsaciones de teclas;) stringVal.replace(/^./, stringVal[0].toUpperCase()); - Alfredo Delgado

Regex no debe usarse donde no sea necesario. Es muy ineficiente y tampoco hace que el código sea más conciso. Es más, stringVal[0] sería undefined por vacio stringVal, y como tal intentar acceder a la propiedad .toUpperCase() arrojaría un error. - przemek

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).

Respondido 12 ago 16, 23:08

A pesar de que tiene bastantes votos, esta es, con mucho, la solución más lenta publicada aquí. He reunido una pequeña prueba de velocidad con las respuestas más populares de esta publicación, aquí: forwebonly.com/… - Robin van Baalen

@RobinvanBaalen Tu enlace ahora está roto. ¿Tienes uno actualizado? - Brad

Regexp es excesivo para esto, prefiera el más simple: str.charAt (0) .toUpperCase () + str.slice (1) - Simon

@Brad lamentablemente no - Robin van Baalen

Muchas veces, si desea resolver su problema con expresiones regulares, termina con dos problemas. - przemek

Puedes hacerlo en una línea como esta

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

Respondido el 22 de enero de 18 a las 18:01

Esta respuesta ya fue dada en 2009. - Dan Dascalescu

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.