Modificar cadenas de texto

Si tenemos un y nos interesa modificar su contenido realizando algún tipo de transformación, este artículo te resultará interesante. En él explicaremos algunos métodos interesantes para realizar operaciones habituales o frecuentes a la hora de modificar el original.

Modificar strings

Los siguientes métodos realizan algún tipo de operación de modificación sobre un :

Método	Descripción
.toLowerCase()	Devuelve el transformado a minúsculas.
.toUpperCase()	Devuelve el transformado a mayúsculas.
.padStart(size, text)	Devuelve el rellenando el inicio con text hasta llegar al tamaño size.
.padEnd(size, text)	Devuelve el rellenando el final con text hasta llegar al tamaño size.
.trimStart()	Devuelve el eliminando espacios a la izquierda del texto.
.trimEnd()	Devuelve el eliminando espacios a la derecha del texto.
.trim()	Devuelve el eliminando espacios a la izquierda y derecha del texto.

Observa que en todos los casos, se devuelve un nuevo , en lugar de mutar el original.

Mayúsculas y minúsculas

Los métodos .toLowerCase() y .toUpperCase() devuelven el original, transformando todo el texto a minúsculas o a mayúsculas respectivamente:

const text = "Los gatos dominarán el mundo.";

text.toLowerCase();   // "los gatos dominarán el mundo."
text.toUpperCase();   // "LOS GATOS DOMINARÁN EL MUNDO."

Capitalizar texto

La palabra capitalizar se refiere a transformar a mayúsculas su primer carácter, y en minúsculas el resto del texto. En Javascript, no existe una función .toCapitalize(), pero de necesitarla se podría realizar la siguiente función de ayuda:

const text = "quiero capitalizar este texto.";

const toCapitalize = (text) => text[0].toUpperCase() + text.substring(1);
const toCapitalizeEveryWord = (text) => {
  return text.split(" ")                      // Separamos en un array cada palabra
    .map(word => toCapitalize(word))          // Aplicamos el capitalizar a cada elemento
    .join(" ");                               // Lo volvemos a unir en un string
}

toCapitalize(text);            // "Los gatos dominarán el mundo."
toCapitalizeEveryWord(text);   // "Los Gatos Dominarán El Mundo."

Observa que toCapitalize() capitaliza la frase en conjunto, mientras que toCapitalizeEveryWord() capitaliza cada una de las palabras de la frase.

Relleno de cadenas

Una transformación interesante que se añade en Javascript es la resultante de utilizar métodos como .padStart(size, text) o .padEnd(size, text). Ambos métodos toman dos parámetros: size es la longitud deseada del resultante y text el carácter a utilizar como relleno.

El objetivo de ambas funciones es devolver un nuevo con la información original existente, pero ampliando su tamaño a size y rellenando el resto con text. Esto se realizará al principio del si se usa .padStart() o al final si se usa .padEnd(). Veamos un ejemplo:

const stringNumber = "15";

stringNumber.padStart(5, "0");    // "00015"
stringNumber.padStart(3, "0");    // "015"
stringNumber.padStart(2, "0");    // "15"
stringNumber.padStart(1, "0");    // "15"

El método .padEnd() funcionaría exactamente igual, pero añadiendo el text al final en lugar de al principio del .

Estos métodos resultan especialmente interesantes para formatear horas, como por ejemplo en el caso que queremos que las cifras menores a 10 aparezcan siempre en formato de dos dígitos 00, en lugar de un formato variable, donde se use un dígito 0 para números entre 0 y 9 y dos dígitos para números mayores a 9.

Eliminar espacios sobrantes

El método .trim() y sus métodos derivados, informalmente traducido como «afeitar» o «recortar», se encarga de devolver el original, pero eliminando los espacios sobrantes que puedan existir a la izquierda o a la derecha del texto (y sólo esos, nunca los que hay entre carácteres).

De la misma forma, .trimStart() y .trimEnd() son versiones particulares, que realizan la misma tarea, pero sólo a la izquierda o derecha, respectivamente. Veamos algunos ejemplos:

// Observa los espacios añadidos en los extremos de la frase
const text = "  ¡Saludad a vuestro nuevo rey gato!  ";

text.trim();        // "¡Saludad a vuestro nuevo rey gato!"
text.trimStart();   // "¡Saludad a vuestro nuevo rey gato!  "
text.trimEnd();     // "  ¡Saludad a vuestro nuevo rey gato!"

text.trimStart().trimEnd() === text.trim();     // true

Puede que en algunos lugares te encuentres los métodos .trimLeft() (izquierda) y .trimRight() (derecha) como alternativas a .trimStart() y .trimEnd(). En principio, son una implementación obsoleta que no debería usarse, ya que algunos idiomas, el inicio no es necesariamente la izquierda y podría ser confuso. En su lugar, aunque existan y funcionen, deberían usarse siempre .trimStart() y .trimEnd().

Alternativas para crear strings

Concatenar (unir textos)

Método	Descripción
.concat(text1, text2...)	Devuelve el , unido (concatenado) a las variables text1, text2...

El método .concat(text1, text2...) permite concatenar (unir) los textos pasados por parámetros al propio en cuestión. La misma operación se lleva acabo cuando utilizamos el operador +, mucho más legible y compacto en la mayoría de situaciones.

const name = "Manz";

// Utilizando método concat
name.concat("i", "to");     // "Manzito"
name.concat(4, 5);          // "Manz45"
name.concat((4 + 5));       // "Manz9"

// Utilizando operador +
name + "i" + "to";          // "Manzito"
name + 4 + 5;               // "Manz45"
name + (4 + 5);             // "Manz9"