string convertir - ¿Cómo puedo hacer la primera letra de una cadena en mayúsculas en JavaScript?



poner jquery (25)

Aquí hay una función llamada ucfirst () (abreviatura de "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 partes. En la primera línea saca FirstLetter y luego en la segunda línea, escribe en mayúscula FirstLetter llamando a firstLetter.toUpperCase () y lo une con el resto de la cadena, que se encuentra al llamar a 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 de nuevo.

¿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"

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 aplicartext-transform:capitalize;

Así que intenta crear una clase para eso, así puedes usarlo globalmente, por ejemplo: .first-letter-uppercasey agrega algo como abajo en tu 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 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'

Si quieres reutilizarlo una y otra vez, es mejor que lo adjuntes 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 como sigue:

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

Puedes hacerlo en una línea como esta

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

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

luego capitalize("hello") // Hello


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

Algunas otras respuestas modifican String.prototype (esta respuesta también solía serlo), pero desaconsejaría esto ahora debido a la capacidad de mantenimiento (es difícil saber dónde se está agregando la función al 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).


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

var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);

Poner 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(" ");
}

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 cadenas no undefined (consulte el comentario de @ njzk2 a continuación ), puede verificar una cadena vacía:

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

La función ucfirst 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.


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

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


Aquí están las mejores soluciones:

Primera solución en CSS:

p {
  text-transform: capitalize;
}

Segunda solución :

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

También puede agregarlo al String.prototype para String.prototype encadenar con otros métodos:

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

y úsalo así:

'string'.capitalizeFirstLetter() // String

Tercera Solución :

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).toLowerCase();
    }
    return pieces.join(" ");
}

Un enfoque más orientado a objetos:

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

Y entonces:

"hello world".capitalize();  =>  "Hello world" 

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

Esta es la solución 2018 ES6 + :

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


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


En CoffeeScript , agregue al prototipo para una cadena:

String::capitalize = ->
  @substr(0, 1).toUpperCase() + @substr(1)

El uso sería:

"woobie".capitalize()

Cuyos rendimientos:

"Woobie"

Echa un vistazo a esta solución:

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

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 mayúsculas:

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

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

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


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

Solo CSS

p::first-letter {
  text-transform: uppercase;
}
  • A pesar de que se llama ::first-letter , se aplica al primer carácter , es decir, en el caso de la cadena %a , este selector se aplicaría a % y, como tal, no se capitalizaría.
  • En IE9 + o IE5.5 + se admite en notación heredada con solo una coma ( :first-letter ).

ES2015 de una sola línea

Dado que existen 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 => function se llama función de flecha .
  • Fui con el nombre capitalizeFirstChar lugar de capitalizeFirstLetter , porque OP no solicitó un código que capitalice la primera letra de la cadena completa, sino el primer carácter (si es una letra, por supuesto).
  • const nos da la posibilidad de declarar capitalizeFirstChar como constante, lo que se desea, 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, tenga en cuenta que la string[0] no estará undefined para la cadena vacía, por lo que debe reescribirse en la string && string[0] , que es demasiado detallada, 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.



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

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();
  });
};

En ES6 , tenemos algo que incluye las llamadas que hacen exactamente lo que usted quiere: así que simplemente puede hacer esto:

'str1'.includes('str2');

También en ES5 , si lo usas ampliamente, simplemente puedes agregarlo así:

String.prototype.includes = String.prototype.includes || function(str) {
  return this.indexOf(str) > -1;
}




javascript string capitalize letter