javascript - texto - primera letra mayuscula angularjs




¿Cómo puedo hacer la primera letra de una cadena en mayúsculas en JavaScript? (20)

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.

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

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


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

Echa un vistazo a esta solución:

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

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.


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

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

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

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

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

Ejemplo:

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

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

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

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


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"

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'

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


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


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

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

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






letter