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

4298

¿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"
9
  • 17
    Underscore tiene un complemento llamado underscore.string que incluye esto y muchas otras herramientas excelentes.
    Aaron
    15/04/13 a las 19:16
  • 187
    Más simple: string[0].toUpperCase() + string.substring(1) 25 nov 2015 a las 4:00
  • 37
    `${s[0].toUpperCase()}${s.slice(1)}`
    eaorak
    2/11/19 a las 20:20
  • 7
    ([initial, ...rest]) => [initial.toUpperCase(), ...rest].join("") 6 de enero de 2020 a las 6:49
  • 7
    Escriba con mayúscula cada palabra: str.replace(/(^\w|\s\w)/g, m => m.toUpperCase()) 12 mar.20 a las 13:14
6552
+50

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 desaconsejaría esto ahora debido a la facilidad de mantenimiento (es difícil saber 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 el mismo nombre en el futuro).

... y luego, hay mucho más en esta pregunta cuando se considera la internacionalización, como 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 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 .

0
1496

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!"
4
  • 27
    Los prototipos contaminantes no es una buena idea. 25 de junio a las 8:23
  • @ aggregate1166877 ¿puedes explicar por qué? casi 1500 votos a favor para esta respuesta. Entonces, sin una explicación, la gente simplemente te ignorará. Como yo, porque voy a hacer esto. 30 de junio a las 14:36
  • 6
    @NielsLucas Bastante justo. Tiene el potencial de romper futuras adiciones a JS. Si es un código que solo usted usará, entonces no es tan malo, simplemente actualice su código y continúe. El problema real aquí es cuando comienzas a publicar bibliotecas con un código como este: tu código modifica el comportamiento integrado de cada biblioteca que usa tu código. La consecuencia es que si usted y otro autor de la biblioteca anulan los mismos componentes incorporados con sus propias implementaciones, crea errores en el código de la otra biblioteca (o el que se cargue en último lugar) dejando al usuario con la depuración de informes de errores irreproducibles. 1 de julio a las 3:52
  • 1
    @ aggregate1166877 Gracias por la explicación. Estoy totalmente de acuerdo contigo en que esta forma NO será una buena práctica para crear una biblioteca y también estoy de acuerdo en que esta forma está bien para un proyecto. Espero que la gente lea esto, porque creo que es una buena atención a la respuesta original. 1 de julio a las 13:59
724

En CSS:

p:first-letter {
    text-transform:capitalize;
}
2
  • 158
    $ ('# mystring_id'). text (cadena) .css ('text-transform', 'capitalize');
    DonMB
    24 de septiembre de 2015 a las 17:34
  • 33
    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á. 7 de junio de 2016 a las 13:26
375

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.

Actualización 2:

Para evitar undefinedcadenas vacías (vea el comentario de @ njzk2 a continuación ), puede buscar una cadena vacía:

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

Versión ES

const capitalize = s => s && s[0].toUpperCase() + s.slice(1)

// to always return type string event when s may be falsy other than empty-string
const capitalize = s => (s && s[0].toUpperCase() + s.slice(1)) || ""
0
233

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 alterarlos String.prototypees, 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);
}

ingrese la descripción de la imagen aquí

0
157

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();
0
136

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 una escritura determinada.

Inicialmente, no vi ninguna respuesta que abordara 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ú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 las 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.codePointAtpara llegar a esa primera (posible) letra, pero aún necesitaríamos determinar dónde debe comenzar la porción. 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 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ía usar matemáticas bit a bit en lugar de > 0xFFFFallí, 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, ya que requieren el conocimiento no sólo de lo que se está utilizando el lenguaje, sino que también pueden requerir un conocimiento específico de las palabras en la lengua. 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. La 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 la correcta!

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, se encuentra una lista en orden de preferencia navigator.languagesy el idioma de un elemento DOM determinado se puede obtener (generalmente) Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREen documentos multilingües.

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 propiedad de carácter CWUor Changes_When_Uppercased coincide con todos los puntos de código que, bueno, cambian cuando están en mayúsculas. Podemos probar esto con caracteres de dígrafo con título 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 la tabla de compatibilidad de 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 más bien, no son casos extremos 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í ... 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 una función de este tipo 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.

3
  • Me había estado preguntando por un tiempo por qué toUpperCaseno hacía mucho por algunos idiomas ... pero no me importaba lo suficiente como para averiguarlo. Me alegro de haberlo hecho finalmente, ¡esta fue una lectura muy interesante! 19 jul a las 22:09
  • Esto no parece funcionar con dígrafos como "IJ" en holandés. Usando la última versión, el ejemplo aquí se escribe incorrectamente en mayúscula en "Ijsselmeer" (la versión de expresiones regulares). El código que utilicé fue: capitalizeFirstLetter('ijssel', 'nl-NL')- Esa es una cadena de localización correcta, ¿verdad?
    paul23
    24 de agosto a las 11:38
  • "ij" como U + 69, U + 6A se capitalizaría como "Ij", sí - "ij" (U + 133, un solo punto de código) es lo que se capitaliza como "IJ" (U + 132). El conocimiento de la configuración regional aquí solo se extiende hasta donde las reglas de mapeo de casos definidas por Unicode, que a veces varían según el idioma, como en el turco; saber si "ij" (U + 69, U + 6A) debe interpretarse como ij (U + 133) está fuera de su alcance y requiere como mínimo un diccionario para ese idioma. 25 de agosto a las 12:09
90

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
0
79

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

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

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

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

Consulte 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);
}
4
  • 13
    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
    6 de diciembre de 2015 a las 23:49
  • 8
    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
    8 dic 2015 a las 14:44
  • @GGG En todos mis proyectos hasta ahora he usado lodash 24 de junio a las 13:31
  • Vanilla js es mejor que lodash. Ya nadie lo usa.
    chovy
    26 de junio a las 6:59
66

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(" ");
}
5
  • dieciséis
    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. 30/11/11 a las 19:13
  • 2
    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 (); 20/12/12 a las 21:16
  • 4
    Otra solución para 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. 10/0313 a las 21:36
  • Sería mejor primero poner en minúscula toda la cadena
    Magico
    6 de julio de 2016 a las 10:36
  • 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(' ') 28/07/2017 a las 18:10
64

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 llamarse " ::first-letter", se aplica al primer carácter , es decir, en el caso de una cadena %a, este selector se aplicaría ay %como tal ano 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 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 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).

Benchmark entre substring()yslice()

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

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

Comparación de soluciones

1
56
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 luego:

 "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 character which is capitalized by
                                                        // the `toUpperCase()` method
 ).join('')                                             // Return back to string

luego capitalize("hello") // Hello

3
  • 5
    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 de 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.
    dudewad
    22 de febrero de 2017 a las 1:08
  • La otra respuesta es más simple ES6: const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();. 22/06/19 a las 5:50
  • 1
    @dudewad en css, usar mayúsculas en la primera letra de una palabra es llamar 'capitalizar', y si desea usar mayúsculas en todos los caracteres, use 'mayúsculas', por lo que no es una mala elección. 25 de enero a las 10:56
55

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

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

Resultado:

'Foo'
3
  • 1
    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. 11/01/19 a las 0:14
  • Usar /^[a-z]/iserá mejor que usar, .ya que el anterior no intentará reemplazar ningún carácter que no sean alfabetos 6 de julio de 2019 a las 5:56
  • ¡Muy inteligente en verdad! 2 de agosto de 2020 a las 4:19
53

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

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();
  });
};
4
  • 2
    Hay una mejor manera de hacer esto sin modificar el prototipo String. 9/07/2013 a las 20:42
  • 2
    @ davidkennedy85 ¡Seguro! Pero esta es la forma sencilla, no la mejor forma ... ;-)
    yckart
    9 de julio de 2013 a las 22:01
  • 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
    29/07/19 a las 0:40
  • ¿A qué te refieres con "café"? " CoffeeScript "? 6 de enero a las 23:38
52

MÁS CORTO 3 soluciones, 1 y 2 casos de manejo cuando la scuerda 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()) );
0
51

Usar:

var str = "ruby java";

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

Saldrá "Ruby java"a la consola.

1
  • Solución de una línea. 18/03/20 a las 15:33
50

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 extrae firstLettery luego en la segunda línea se capitaliza firstLetterllamando firstLetter.toUpperCase()y se 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.

4
  • 5
    Use String.substring () o String.slice () ... No use substr (), está en desuso.
    James
    22/06/09 a las 11:11
  • 8
    @ 999: ¿dónde dice que substr()está en desuso? Ni siquiera ahora, tres años después, y mucho menos en 2009, hizo este comentario. 7/11/12 a las 6:12
  • 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". 21/11/12 a las 22:05
  • 3
    Tener 3 métodos que hacen lo mismo ( substring, substry slice) es demasiado, en mi opinión. Siempre lo uso sliceporque admite índices negativos, no tiene el comportamiento confuso de intercambio de argumentos y su API es similar a la slicede otros idiomas. 21/11/12 a las 22:12
48

Si usa Underscore.js o Lodash , la biblioteca underscore.string proporciona extensiones de cadena, incluidas las mayúsculas:

_.capitalize(string) Converts first letter of the string to uppercase.

Ejemplo:

_.capitalize("foo bar") == "Foo bar"
3
  • 3
    Desde la versión 3.0.0 , Lo-Dash tiene este método de cadena disponible por defecto. Al igual que se describe en esta respuesta: _.capitalize("foo") === "Foo". 9/04/2015 a las 19:09
  • 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'. 7 de mayo de 2015 a las 14:11
  • 2
    A partir de la versión 4 *, Lodash también pone en minúsculas () cada dos letras, ¡ten cuidado! 13 de febrero de 2016 a las 8:33
43

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-letterCSS y apliquetext-transform:capitalize;

Así que intente crear una clase para eso, para 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;
}

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'
capitalizeTxt('dezfoolian');  // return 'Dezfoolian'

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

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 la propiedad de transformación de texto CSS (en W3Schools ).

15
  • 30
    @Simon No se indica que la cadena necesariamente se generará como parte de un documento HTML; CSS solo será útil si lo es. 18/01/12 a las 9:32
  • 9
    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 escribe en mayúscula cada palabra , por lo que aún necesitaría que JS escriba en mayúscula solo la primera letra de la cadena. 21 de enero de 2012 a las 4:24
  • 18
    Incorrecto, Dinesh. Dijo el primer carácter de la cadena . 26/06/12 a las 0:02
  • 82
    Esta respuesta, a pesar de tener una cantidad ridícula de votos a favor, es simplemente incorrecta, ya que escribirá con mayúscula la primera letra de cada palabra. @Ryan, ganarás una insignia disciplinada si la eliminas . Por favor, hazlo. 7/11/12 a las 6:06
  • 6
    Ahora es javascript: $ ('. Capitalize'). Css ('text-transform', 'capitalize') 13 de abril de 2013 a las 8:58
40
var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);
0
38

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
3
  • 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. 25/04/2016 a las 5:08
  • Además, ¿ realmente GAMITG hizo una edición solo para eliminar un espacio en blanco de una parte de la publicación que no es de código? O_O 28 de agosto de 2016 a las 3:25
  • por cierto, esto romperá los acrónimos en mayúsculas, así que ten cuidado, todos <3 15/03/19 a las 21:53
35
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'
3
  • Hecho @Ram. También se incluyen ejemplos. 23/07/2015 a las 13:14
  • ¿Cómo es esto mejor que la respuesta de 2009 ? 27/01/19 a las 22:13
  • 1
    No es @DanDascalescu. Supongo que podría argumentar que substr/ substringes 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 2009. Honestamente, creo que se reduce a que yo tenía 15 años y que quería karma en StackOverflow;) 20/06/19 a las 11:50
34
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

5
  • +1, esto es lo que realmente estaba buscando. Sin embargo, hay un error menor, debería ser return.this.toLocaleLowerCase().replace(... 14 de enero de 2013 a las 21:55
  • +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. 9 abr 13 a las 13:58
  • @DanDascalescu Encontré esto útil, así que +1 utilitarismo y -1 retención anal. Incluyó un ejemplo, por lo que su función es clara. 2 de agosto de 2013 a las 10:24
  • 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
    28/04/2014 a las 16:29
  • En primer lugar, hace algo más de lo que pidió OP, en segundo lugar, la expresión regular es una exageración ineficiente en este caso, por último, no modifique los prototipos de algo que no posee
    Przemek
    23 de septiembre de 2017 a las 19:32
30
var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);
26
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. No se necesita nada más elegante.

1
  • 3
    Esta debería ser la respuesta aceptada, en cambio, es casi la última ya que SO sigue otorgando preguntas obsoletas. Por cierto, es mejor usarlo /./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 29/04/19 a las 18:01
22

Solo porque esto es realmente una sola línea, incluiré esta respuesta. Es una cuerda de una sola línea interpolada basada en ES6 .

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

Mira esta solución:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // Returns Master
2
  • 3
    Guarde algunas pulsaciones de teclas;) stringVal.replace(/^./, stringVal[0].toUpperCase()); 15 oct.15 a las 19:30
  • 2
    Regex no debe usarse donde no sea necesario. Es muy ineficiente y tampoco hace que el código sea más conciso. Además, stringVal[0]estaría undefinedvacío stringValy, como tal, el intento de acceder a la propiedad .toUpperCase()arrojaría un error.
    Przemek
    23 de septiembre de 2017 a las 19:28
20

La ucfirstfunción funciona si lo hace así.

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

Gracias JP por la aclaración.

6
  • 2
    bonito nombre para la función! Su nombre es idéntico al equivalente de PHP. En realidad, existe una biblioteca completa de funciones PHP escritas en JS; se llama PHP.js y se encuentra en http://phpjs.org
    Hussam
    8/12/11 a las 14:29
  • 11
    Un trazador de líneas: string[0].toUpperCase() + string.substring(1) 25/11/15 a las 4:01
  • @TarranJones aquí es un trazador de líneas a prueba de balas: (string[0] || '').toUpperCase() + string.substring(1) 6 de mayo de 2016 a las 18:20
  • @ dr.dimitru: En lugar de idiomático (string[0] || ''), podrías simplemente string.charAt(0).
    Przemek
    24/04/2017 a las 18:24
  • 1
    ¿Qué es "aclaración" ? 6 de enero a las 23:34
20
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).

3
  • 5
    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/… 13 feb 2013 a las 13:17
  • 1
    Regexp es excesivo para esto, prefiera el más simple: str.charAt (0) .toUpperCase () + str.slice (1)
    Simon
    23 de enero de 2017 a las 13:36
  • Muchas veces, si desea resolver su problema con expresiones regulares, termina con dos problemas.
    Przemek
    23 de septiembre de 2017 a las 19:18