Strings en JavaScript ¿qué son y cómo manipularlas?

En programación siempre trabajamos con datos de los más variados, independientemente del lenguaje.

Algunos ejemplos de datos: booleanos (verdadero o falso), números (enteros, punto flotante) y algunos tipos más complejos como estructuras y objetos. Uno de los tipos más utilizados en programación son las strings, secuencias (o cadenas) de caracteres que utilizamos para, entre otras cosas, manipular textos.

En el siguiente ejemplo, tenemos una cadena representada como una matriz:

const fruta = "banana"
// ["b", "a", "n", "a", "n", "a"]

Imagina que estamos desarrollando el código de una aplicación en JavaScript. Se solicitó la validación de los campos de login y contraseña y es necesario verificar que la longitud de la contraseña de cada usuario cumpla con la regla de tener una longitud mínima de 8 caracteres y evitar espacios al principio o al final del login registrado.

Por lo tanto, necesitaremos manejar strings.

¿Cómo podemos hacer eso? ¿Qué opciones puede ofrecer JavaScript para estos casos? En el siguiente texto veremos estas posibilidades de trabajar con strings en el lenguaje.

¿Qué es una String?

Por definición, strings son secuencias de caracteres alfanuméricos (letras, números y/o símbolos) muy utilizados en programación. En Javascript, una cadena siempre estará entre comillas.

const frase = "Sumergiéndonos en tecnología con Alura"

o también

console.log('Sumergiéndonos en tecnología con Alura')

Pero... ¿declaro mis strings con comillas simples o dobles?

Podemos encerrar nuestras cadenas entre comillas simples o dobles. Para JavaScript, no hay diferencia, ya que considera válidas ambas formas de declaración. Pero cuidado, es posible que esta regla no se aplique a otros idiomas. En Java o C#, por ejemplo, se utilizan comillas simples para definir un carácter.

A veces, la cadena puede ser texto que contiene comillas dobles. En estos casos, es necesario combinar el uso de comillas simples con comillas dobles y viceversa, porque un texto como: “Ella dijo: “Adiós””, no funciona correctamente.

Vamos al ejemplo:

console.log('Ella dijo: “Adios!”')

o

console.log(“Ella dijo: 'Adios!!' ”)

Es importante tener en cuenta que, después de definir la secuencia de carácteres, la cadena es inmutable, es decir, no se puede cambiar su valor. Entonces, ¿cómo manipular strings?

Cada vez que manipulamos una cadena, se crea una nueva instancia por dentro de javascript, lo que significa que se generará un nuevo espacio de memoria con una copia del valor de la cadena. Así que tenemos que usar una variable para almacenarlo.

Objeto String

El lenguaje JavaScript también presenta un objeto global String que nos permite crear o convertir un tipo en una cadena, vea el ejemplo a continuación:

const numero = 256
const convirtiendoEnString = new String(numero)

El resultado después de mostrar la variable convirtiendoEnString usando el método console.log()es [String: '256']. Al construir el objeto usando un new String(parámetro), el parámetro puede ser cualquier elemento de nuestro código que queramos transformar en una cadena.

También es posible convertir otros tipos primitivos (por ejemplo, números y booleanos) en strings con el método toString():

const num = 500
console.log(num.toString()) //'500'

Usando Strings

Es posible interpolar, concatenar, verificar posiciones de caracteres o incluso reemplazar partes de strings.

¿Veamos algunos de estos usos con JavaScript?

Concatenando strings

Cuando hablamos de concatenar strings, significa que vamos a unir dos o más strings y formar una nueva. Observa el ejemplo de abajo:

let nombre = "André"
let apellido ="Silva"
let nombreCompleto = "Mi nombre completo es : " + nombre + apellido

Para concatenar las strings nombre y apellido con la cadena de texto que es el valor de nombreCompleto, usamos el operador de suma (+). También podemos usar +=, como en el siguiente ejemplo:

let nombre = "André"
let saludo = "Sea bienvenido"
saludo += nombre

Así tenemos la salida Sea bienvenido André

Interpolando strings (template strings)

La interpolación de strings es una característica muy interesante, presente en varios lenguajes. En JavaScript, es una alternativa más práctica para la manipulación de strings sin la necesidad de concatenar, porque para textos más grandes, la concatenación puede ser un poco complicada.

Utilizando las denominadas template strings o plantillas literales, el desarrollador puede tener una mayor flexibilidad en el trabajo con strings, además de facilitar la escritura y lectura del código.

Volviendo al ejemplo del mensaje de bienvenida, mira a continuación el uso de template strings:

let nombre = "José"
let saludo =`Sea bienvenido ${nombre}`

Tomemos, por ejemplo, el poema “¿Y ahora, José?” por Carlos Drummond de Andrade:

let nombre = "José"
let poema = `
   Y ahora, ${nombre}?
   La fiesta terminó
   la luz se apagó,
   la gente desapareció,
   la noche se ha enfriado,
   y ahora, ${nombre}?
   ¿y ahora tú?
   tú que no tienes nombre,
   que se burla de los demás,
   tú que haces versos,
   quien ama, protesta?
   y ahora, ${nombre}?
`

Ten en cuenta que, para usar template strings, debe estar encerrada entre comillas graves (y, para realizar la interpolación, el valor o variable debe estar dentro de la estructura ${valor}. Cabe mencionar que usando *template strings* tenemos la opción de usar el salto de línea normalmente, sin caracteres de escape para esto, como \n.

Métodos para strings

Antes de comenzar, es importante señalar que JavaScript diferencia las strings como tipos primitivos (con comillas simples o dobles) de los objetos String (cuando usamos la palabra reservada new). Pero detrás de escena, cada string, incluso las que creamos con la llamada "forma literal", por ejemplo const text = "Alura", termina convertida en un objeto de tipo String. Por tanto, tenemos acceso a una serie de métodos y propiedades de este objeto.

Ahora que entendemos eso, veamos algunas propiedades y métodos útiles y muy prácticos para trabajar con cadenas en nuestras aplicaciones.

.length

La propiedad lengthse utiliza para decirnos la longitud de una string. ¿Y por qué es esto útil?

Si su aplicación tiene como una de las reglas para la creación de contraseñas una longitud de 8 caracteres (que generalmente son alfanuméricas), usar lengthserá una buena opción, ya que le ayudará a contar la cantidad de caracteres de la string.

Para probar la propiedad length, usemos la string alura, que retornará la longitud 5.

const palabra="alura";
console.log(palabra.length) //5

Vea que length es exactamente la misma propiedad a la que accedemos cuando queremos averiguar la longitud (es decir, la cantidad de elementos) en un array.

charAt()

Con el método charAt() podemos acceder a un carácter de una string. Recuerda que, por dentro de javascript, las strings son arrays de caracteres, y en cada posición tenemos el carácter que forma la string.

console.log("alura".charAt(3)) //r

Después de ejecutar el método charAt(), devolverá el carácter r, que es el valor en la posición 3 de la string, recordando que los arrays en JavaScript comienzan en la posición 0 (cero).

Otra alternativa es usar la notación de corchetes para encontrar un carácter de la string, así:

const palabra="Alura"
console.log(palabra[0]) //A

Se mostrará el carácter A, es decir, el que se encuentra en la primera posición de la string. El resultado de ejecutar charAt() es una string.

Pero, ¿y si queremos saber la posición de un carácter dentro de la string?

indexOf()

Respondiendo a la pregunta anterior, existe la función indexOf(), que devuelve la posición de un carácter dentro de la string.

Por ejemplo:

const palabra="Alura"
console.log(palabra.indexOf("a")) //4

El resultado es la posición 4. Sin embargo, cuando utilice indexOf(), ten cuidado si el carácter que se busca en la cadena se encuentra en más de una posición, ya que solo retornará la primera posición. ver el código a continuación:

const palabra="Divertidamente"
console.log(palabra.indexOf("e")) //3

El resultado de ejecutar indexOf() es un valor numérico.

toUpperCase() y toLowerCase()

Estas son dos funciones que se usan mucho cuando estamos trabajando con strings y necesitamos hacer que el texto esté todo en minúsculas (lower case) o todo en mayúsculas (upper case). Veamos el código a continuación:

const palabra="alura";
console.log(palabra.toUpperCase()) //ALURA
console.log(palabra.toLowerCase()) //alura

Después de ejecutar el código, la consola mostrará ALURA y alura respectivamente. El resultado de ejecutar los métodos toUpperCase() y toLowerCase() es una nueva string.

substr()

Otra función muy interesante es substr() (substring), que nos permite extraer parte de una string, como se muestra en el siguiente código:

let frase= "Sumergiendo en técnologia."
console.log(frase.substr(0,11)) // Sumergiendo

La función toma como parámetro el inicio y final de la nueva string a tomar de la cadena principal. En la ejecución del código anterior, tenemos como resultado la palabra Sumergiendo. Bastante útil, ¿verdad?

El resultado de ejecutar el método substr() es una nueva string.

slice()

También podemos usar el método slice(), que usamos con arrays. Es similar a substring() y retornará parte de una string siempre que pasemos el índice inicial y final en los parámetros. Vea abajo:

let frase= "Sumergiendo en tecnologia."
console.log(frase.slice(0,11)) // Sumergiendo

El resultado de ejecutar el método slice() es una nueva string.

replace()

Con la función replace() tenemos la posibilidad de reemplazar parte de una cadena por otra. Esta función toma dos piezas de información como parámetros: la string que deseas reemplazar y la que será reemplazada. Mira el ejemplo a continuación, donde necesitamos reemplazar la string de nombreDeUsuario en el texto de comunicaciónpredeterminado.

let nombre = "André";
let comunicacion = " Hola, sr. nombreDeUsuario, informamos que a partir de la presente fecha tendrá 50% de descuento en nuestra tienda.";
console.log(comunicacion.replace("nombreDeUsuario",nome));

Al ejecutar este ejemplo, la string nombreDeUsuario será reemplazada por el contenido de la variable nombre. Como resultado de ejecutar el método replace() tendremos una nueva string.

concat()

El método concat() es una opción para concatenar string sin usar el operador de suma (+). Concatena dos strings, agregando la nueva cadena al final de la anterior.

Ten en cuenta un uso de concat():

let nuevaString = "Programa en los principales lenguajes y plataformas. Explora lenguajes como ";
console.log(nuevaString.concat("JavaScript,").concat(" Python,").concat(" e C#."))

El resultado será: Programa en los principales lenguajes y plataformas. Explora lenguajes como JavaScript, Python y C#.

Al ejecutar el método replace(), tendremos como resultado una nueva string.

split()

El método split() es muy interesante, ya que con él podemos romper una string con base en los caracteres separadores que informaremos al método como parámetro.

Veamos un ejemplo:

let lenguajes = "JavaScript;Java;C#;PHP;Python;Go;Vb;SQL;C;C++";
let arrayLenguajes = lenguajes.split(";");
console.log(arrayLenguajes)

Al trabajar con split(), debemos tener cuidado, ya que la ejecución generará un array de strings con los elementos que se separaron con base en el separador deseado. Entonces, ejecutar el código da como resultado una matriz como se muestra a continuación:

[ 'JavaScript',
  'Java',
  'C#',
  'PHP',
  'Python',
  'Go',
  'Vb',
  'SQL',
  'C',
  'C++' ]

Recuerda que el resultado de ejecutar el método split() es un array de strings.

trim()

trim() elimina los espacios en blanco al principio o al final de una string. Si en alguna situación necesitamos verificar que el usuario no escribió el inicio de sesión con espacios, lo haremos;

let login = "   [email protected]      ";
let loginSinEspacio = login.trim();
console.log(loginSemEspaco); //[email protected]

La variable loginSinEspaciocontendrá una nueva string, sin espacios en blanco iniciales o finales que se hayan escrito. Entonces, al ejecutar el método trim(), el resultado es una nueva string.

En JavaScript existen algunas variaciones de esta función como: trimEnd(), trimStart(), trimLeft() y trimRight(), también prueba estas variantes y observa el resultado, ¿de acuerdo?

Conclusión

En este artículo, vimos qué son las strings y cómo podemos manipularlas usando métodos de Javascript.

Recuerda que trabajar con texto es una actividad que todas las personas que desarrollan harán en su código en algún momento. Por eso es tan importante conocer las strings y sus particularidades. ¿Entonces te gustó? ¡Vamos a programar!

André Bessa

Dev C# enfocado en backend e instructor en Alura, siempre en busca de nuevos conocimientos.

Este articulo fue adecuado para Alura Latam por: Jose Charris