Javascript es un lenguaje muy potente y versátil, nos permite expandir las posibilidades de uso al máximo de nuestras necesidades y creatividad. Muchas veces las funciones de Lowercase o Uppercase no son suficientes a la hora de formatear contenido, cuando todo está en mayúsculas y necesito que tenga formato de título, es decir, la primera letra en mayúscula.

Todos los objetos en JavaScript tienen una propiedad especial llamada prototype que es una referencia a otro objeto simulando una herencia (recordemos que en JavaScript no existe la herencia basada en clases), si queremos agregar métodos o propiedades a un objeto podemos hacerlo mediante el prototype, esto es muy útil para encapsular y reutilizar el código, dando la posibilidad de adaptar tus códigos al diseño orientada a objetos.

Ahora volviendo un poco al propósito de este Post, cuando necesitamos usar un Title Case para que cada palabra comience con mayúscula, este método fue creado precisamente para solucionar este problema.

A continuación les dejo una solucion para javascript de Title Case.

function toTitleCase(str) {
    return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

Si quieres que sea una función nativa de String podríamos agregarlo en prototype:

String.prototype.toTitleCase = function() {
  return this.replace(/\w\S*/g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });
}

Si probamos la función anterior tendremos:

console.log('hola mundo'.toTitleCase());
> Hola Mundo

¿Donde más podemos usarlo?

Esta solución puede ser nuestro mejor aliado si tenemos un poco de ingenio. Podríamos aplicarlo en Handlebars.js, un motor de plantillas muy popular, potente y fácil de utilizar separando el diseño HTML del resto de tu Javascript, para así escribir código mucho más limpio. Este motor de plantillas permite crear o customizar funciones por medio de helpers.

Podemos registrar un helper en Handlebars.js que permita aplicar el método aprendido más arriba:

Handlebars.registerHelper('toTitleCase', function (str) {
    return str.replace(/\w\S*/g, function(txt){ 
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();    
    });
})

Si probamos el helper declarado anteriormente tendremos:

{{toTitleCase 'hola mundo'}}
> Hola Mundo

¿Sabes de algún otro lugar donde las funciones de Lowercase o Uppercase no sean suficientes y necesitas usar un formato de Título?

Espero les sea tan útil como a mi.

¡Hasta un próximo post!