14. JS, Objeto String - BúsquedasPropiedades y métodos de búsqueda del objeto String en JavaScript

Los Strings o cadenas de texto guardan conjuntos de caracteres, por lo que una cadena de texto es cualquier conjunto de texto que se encuentre entre comillas, ya sean simples o dobles.

Plantillas de cadena de texto

Una de las mejoras de ES6 respecto a ES5 son las plantillas de cadena de texto. Estas plantillas son literales de texto que pueden tener una o más líneas, además de poder incluir variables dentro de las mismas.

Vamos a poner un ejemplo, antes para concatenar variables con texto tenías que implementarlo de la siguiente forma:

var iva = "21%";
var base = "453€";
var texto = "El precio del producto es de "
            + iva + ", más el " + iva + " de IVA.";
alert(texto);
// Salida: El precio del producto es de 453€, más el 21% de IVA.

Esta construcción es relativamente sencilla, pero hay casos que se complica mucho para el programador. En cambio, ahora se puede implementar más fácilmente con las plantilla de cadena de texto de la siguiente manera:

var iva = "21%";
var base = "453€";
var texto =`El precio del producto es de ${base}, más el ${iva} de IVA.`;
alert(texto);
// Salida: El precio del producto es de 453€, más el 21% de IVA.

Como puedes ver es mucho más intuitiva, rápida y sencilla que la anterior. Con el carácter tilde abierto se encierra toda la cadena, y las variables que puedan haber se encierran en ${variable}. Para escribir la tilde, tienes que pulsar dos veces las tecla correspondiente, se escribirán las dos tildes y escribes la cadena dentro de ellas.

También se pueden hacer plantillas de string de este estilo:

var plantillaHTML = `
<div>
  <h1>Título</h1>
    <h2>Subtítulo</h2>
      <p>Texto del documento</p>
</div>
`; 

Como puedes ver, imaginación al poder. Puedes hacer tus plantillas HTML para incrustarlas con JavaScript de forma dinámica.

Propiedades objeto String

Los objetos String sólo tienen una propiedad llamada length, la cual contiene el número de caracteres que contiene la cadena.

Esta propiedad es muy valiosa, ya que te permite saber el número de celdas que tiene ocupadas a la hora de recorrer su contenido, para mostrarlo, por ejemplo.

var cadena = "Soy una cadena de texto ";
alert(cadena.length);
// Salida: 24

Nota: Recuerda que los espacios en blanco también son caracteres.

Métodos de búsqueda del objeto String

Los métodos te proporcionan acciones que puedes hacer con los objetos String. Los más importantes y más utilizados son los siguientes:

startsWith()

Sintaxis: startsWith();

Método que devuelve true si el texto especificado por el parámetro valor se encuentra al principio de la cadena.

var texto = "Texto en Crudo";
var comprobar = texto.startsWith("Texto");
alert(comprobar);
// Salida: true

La cadena sí empieza por «Texto«

endsWith()

Igual que el anterior, pero comprueba si el texto o carácter pasado como parámetro se encuentra al final.

Sintaxis: endsWith();

var texto = "Texto en Crudo";
var comprobar = texto.endsWith("Texto");
alert(comprobar);
// Salida: false

La cadena no termina con «Texto«

includes()

Este método busca un valor incluido en el parámetro buscar y devuelve true si está en la cadena. El segundo parámetro es opcional y determina la posición de inicio de la búsqueda.

Sintaxis: includes(buscar, indice);

var texto = "Texto en Crudo";
var comprobar = texto.includes("C");
alert(comprobar);
// Salida: true

var texto = "Texto en Crudo";
var comprobar = texto.includes("C", 10);
alert(comprobar);
// Salida: false

En el primer ejemplo devolverá true porque busca en toda la cadena. En el segundo da false, porque empieza a buscar a partir del índice 10, es decir, desde el carácter r

Nota: Recuerda que el primer índice de un array es siempre 0. Una cadena string internamente se guarda como un array.

indexOf()

Sintaxis: indexOf(valor, indice);

Método que busca el valor pasado en el parámetro valor empezando desde la izquierda de la cadena o principio. Si encuentra conciencia devuelve el número del índice, si no la encuentra devuelve -1.

var texto = "Texto en Crudo";
var comprobar = texto.indexOf("en");
alert(comprobar);
// Salida: 6

lastIndexOf()

Sintaxis: lastIndexOf(valor, indice);

Este método se comporta igual que indexOf(), pero comienza a buscar por detrás o por la derecha de la cadena.

var texto = "Texto en Crudo";
var comprobar = texto.lastIndexOf("en");
alert(comprobar);
// Salida: 6

El resultado es el mismo, pero según como sea la cadena te puede interesar más empezar por el final o el principio de la cadena.

Nota: Tanto indexOf() como lastIndexOf() son sensibles a las mayúsculas, por lo que si el texto buscado no es exacto en mayúsculos o minúsculas no lo localizará.

search()

Sintaxis: search("busqueda");

Esté método se comporta igual que indexOf, es decir, busca el valor indicado entre los paréntesis y devuelve su posición inicial, si no lo encuentra devuelve -1, pero se diferencia en que acepta más parámetros de configuración y expresiones regulares.

var cadena = "La casa tiene un jardín grande";
var posicion = cadena.search("grande"); // posicion será 24  

function testinput(re, str) {
  var cadena;
  if (str.search(re) != -1) { // Si str contiene re
     cadena = " contiene ";
  } else {
     cadena = " no contiene ";
  }
  alert (str + cadena + re);
} 

localeCompare()

Este método te ayuda a comparar si dos valores son iguales.

• Idénticas; devuelve 0
• Menor que; devuelve -1
• Mayor que; devuelve 1

Sintaxis: cadena1.locateCompare(cadena2);

var str1 = "c";
var str2 = "f";
var resultado = str1.localeCompare(str2);
// Salida: -1 (c es menor que f)

Este método hace diferenciación entre mayúsculas y minúsculas, por lo que la comparación entre a y A, a siempre será menor.

match()

Este método comprueba si un patrón o cadena de texto está en una cadena y devuelve el texto si está.

Sintaxis: match(patron/banderas);

var str = "Azul, Verde, Rojo, Negro";
var comprobar = str.match(/e/gi);
// comprobar = Array(e, e, e)

match(/e/gi) /e es el patrón que debe buscar (letra e) y /gi son las banderas. El método lo almacena en un array.

• g: todas las coincidencias
• i: sin distinción entre mayúsculas y minúsculas

Métodos representativos del objeto String

String()

Este método se utiliza para convertir una variable a objeto string.

Sintaxis: String(variable);

var year = 1980;
var decada = String(year); // El año se ha convertido en una cadena

toString()

Este método convierte un objeto en cadena de texto que puede ser guardado en una variable primitiva.

Sintaxis: str.toString();

También se pueden pasar otros tipos de datos como números, arrays, entre otros.

var frutas = ["naranjas", "peras", "mandarinas", "platanos"];
var strFrutas = frutas.toString();
// Salida: cadena de texto "naranajas,peras,mandarinas,platanos"

Si te ha gustado este artículo y quieres saber más, visita Métodos para extraer, sustituir y transformar del objeto String en JavaScript

Si te ha gustado o te ha aclarado conceptos el contenido de este artículo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!