¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Aprende ES6 - Nuevos métodos en las cadenas

Como ya sabrás, en Función 13 estamos embarcados en que aprendas todos los entresijos de ES6. En artículos anteriores hemos hablado sobre let, const y los ámbitos, las funciones flecha, que son realmente útiles, las Promesas y las Clases, cómo podemos usar la Desestructuración o sobre parámetros y propagación. Además hemos aprendido qué nuevas opciones tienen los objetos literales y las matrices (o arrays). Si esto no te suena de nada y estás intentando ponerle algún sentido a las siglas, ¡no te preocupes! Echa un vistazo a nuestra Introducción a ES6.

El tipo String en ES6 consigue cuatro nuevos métodos que son realmente útiles ya que nos ayudan a llevar a cabo tareas bastante comunes (que antes eran más complejas).

.startsWith() y .endsWith()

Si sabes algo de inglés es probable que adivines el propósito de ambas funciones. Algo muy común a hacer en el código es preguntarse ¿Esta cadena comienza/acaba con esta otra?. En ES5 tendríamos que usar el método indexOf para saberlo:

var cadena = 'Alohomora';

console.log(cadena.indexOf('Alo') === 0); // true  
console.log(cadena.indexOf('Aloha') === 0); // false  

La cosa se complica aun más si quisiéramos saber si acaba con cierta cadena:

var cadena = 'Alohomora';  
var busqueda = 'mora';

console.log(  
    cadena.indexOf(busqueda) === 
    cadena.length - busqueda.length
); // true

Bueno, con las nuevas funciones, es mucho más sencillo:

const cadena = 'Alohomora';

console.log(cadena.startsWith('Alo')); // true  
console.log(cadena.startsWith('Aloha')); // false  
console.log(cadena.endsWith('mora')); // true  
console.log(cadena.endsWith('moro')); // false  

Práctico, ¿no? Ambos métodos permiten un segundo parámetro para indicar el índice desde el que comenzar la búsqueda:

const cadena = 'Alohomora';

console.log(cadena.startsWith('homo', 3)); // true  
console.log(cadena.endsWith('mo', 7)); // true  

El número para endsWith es un poco extraño. Básicamente le dice al método dónde debe terminar la cadena. Por defecto, su valor será la longitud de la cadena actual:

const cadena = 'Alohomora';

// Cuando no hay valor, para el segundo parámetro
// se usa el valor cadena.length (9 en este caso)
console.log(cadena.endsWith('mora'));

// En este caso, la cadena se corta en el caracter
// número 7 siendo "la cadena resultante" 'Alohomo'
console.log(cadena.endsWith('mo', 7');  

.includes()

El siguiente método es includes() el cual busca si una cadena existe dentro de otra. Esto también necesitaba de hacer comparaciones con indexOf mientras que ahora es mucho más explícito:

// ES5
var cadena = 'Never gonna give you up';  
console.log(cadena.indexOf('gonna') > -1); // true

// ES6
const cadena = 'Never gonna let you down';  
console.log(cadena.includes('gonna')); // true  

Este método también acepta un segundo parámetro para indicar desde qué posición empezar a buscar si la cadena incluye o no a otra.

repeat()

Este método nos sirve para repetir una cadena un determinado número de veces. El número que le pasemos a la cadena debe ser positivo o recibiremos un error de rango.

Veamos un sencillo ejemplo:

console.log('na'.repeat(4) + ' Batman!');  
// nananana Batman!

Este método resulta bastante útil a la hora de rellenar una cadena con espacios o ceros. Algo que en ocasiones hacemos con la hora y los minutos:

function rellenaConCeros(cadena, longitud = 2) {  
  // Convertimos cualquier número en cadena
  cadena = `${cadena}`;
  return `${'0'.repeat(longitud - cadena.length)}${cadena}`;
}

rellenaConCeros(2); // "02"  
rellenaConCeros(15); // "15"  

¡Perfecto! Como ves, indicamos que la longitud por defecto es 2 cosa que normalmente (para este caso) no cambiaremos, pero siempre tenemos la opción.

Pues hasta aquí llegamos hoy con las cadenas que, además de estos métodos, reciben otras mejoras con caracteres unicode que no he considerado que merezca la pena mencionar por ser un caso de uso realmente raro. ¡No nos olvidemos de las plantillas!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!