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

poner en mayuscula la primera letra de cada palabra en javascript

Question

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

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

Echa un vistazo a esta solución:

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

Answer 6

En CSS:

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

Answer 7

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.

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

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

Esto asegurará que el siguiente texto sea cambiado:

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

Answer 13

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"

Answer 14

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

Answer 15

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"

Answer 16

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

Answer 17

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

Answer 18

Puedes hacerlo en una línea como esta

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

Answer 19

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"

Answer 20

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

Answer 21

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.

Answer 22

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

Answer 23

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

Answer 24

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

Answer 25

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

Answer 26

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

Answer 27

var str = "ruby java";
alert(str.charAt(0).toUpperCase() + str.substring(1));

volverá "Ruby java"

http://jsfiddle.net/amitpandya/908c8e2v/

enlace de resultado en jsfiddle

Answer 28

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

Answer 29

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

Answer 30

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