Escriba en mayúscula la primera letra de cada palabra en una cadena [JavaScript]

Este breve artículo le muestra cómo capitalizar la primera letra de una cadena o todas las palabras de una cadena (título ) en el lenguaje de programación javascript.

Escribir en mayúscula la primera letra de una cadena es útil si está escribiendo en mayúscula una sola palabra o una oración completa que desea mostrar de una manera gramaticalmente correcta.

Convertir una cadena a título de caso – ahí es donde cada palabra está en mayúscula en una cadena con varias palabras – es útil para formatear texto para usar en un artículo o título de página.

Escribir en mayúscula la primera letra de una cadena

Primero, aquí se explica cómo poner en mayúscula solo la primera letra de una cadena.

Este ejemplo se proporciona como una función reutilizable para copiarlo y pegarlo en su código y ponerlo a trabajar.

// Reusable function to capitalize first letter in a string
function capitalizeFirst(str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

// Testing the above function
console.log(capitalizeFirstLetter('foo')); // Will print 'Foo'

Entonces, ¿qué está pasando arriba? En primer lugar, el primer carácter (en el índice 0 ) se recupera de la cadena mediante charAt() y en mayúsculas usando toUpperCase() método.

Luego, se une con el resto de la cuerda, rebanada en el índice 1 para eliminar el primer carácter (para que no se duplique porque ya tenemos el primer carácter en mayúsculas). Finalmente, por si acaso, el resto de la cadena se convierte toLowerCase() en caso de que no lo fuera ya.

¡Fácil!

Escriba en mayúscula la primera letra de cada palabra en una cadena (Titlecase)

Aquí se explica cómo capitalizar cada palabra en una cadena – esa es la primera letra de cada serie de caracteres separados por un espacio.

Hay algo más en esta función, así que dejaré un comentario en el código en lugar de explicarlo al final.

// Reusable function to capitalize first letter of every word in a string
function titlecase(str) {

    // Split the string at each space.  This will create an array containing each word in the string.
    var splitStr = str.toLowerCase().split(' '); 

    // Loop through the words in the string 
    for (var i = 0; i < splitStr.length; i++) {
        // Capitalize the first word in each using the same method as in the previous example
        // The result replaces the original word in the splitStr array
        splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
    }

    // Join the now-capitalized words in the array back into a single string, separated by spaces, and return it
    return splitStr.join(' '); 
}

// Testing the above function
console.log(titlecase('foo bar')); // Will print 'Foo Bar'

Uso de CSS para Titlecase

Si solo está buscando formatear el texto para mostrarlo, puede usar CSS para mostrar una cadena en mayúsculas y minúsculas sin tener que procesarlo usando JavaScript:

<style>
    .titlecase {
        text-transform: capitalize;
    }
</style>

<p class="titlecase">capitalize me!</p>

Cuando se representa en un navegador web, el texto se escribirá en mayúsculas mediante la transformación de texto de CSS propiedad.