harmony: 2. cadenas

Novedades relacionadas con el trabajo con cadenas

Christian Schloe

archivado en: JavaScript / 3 noviembre, 2015 / taller:

En la entrada anterior de esta serie dedicada a las novedades de javaScript 6 vimos el nuevo tipo de variables let y las constantes, por seguir con cierto orden, en esta toca tratar las que están relacionadas con los literales. No son muy espectaculares, pero aún así prometen ser útiles.

Nuevos métodos de String

a) Tres métodos para buscar

Sin usar expresiones regulares, en ecmaScript 5 para saber dónde se encuentra una coincidencia en una cadena resulta algo farragoso dadas las limitaciones de indexOf().

"use strict";

var pajar = "Hey, soy una cadena formidable";

var aguja = "Hey";

if ( pajar.indexOf(aguja) === 0 ) {

console.log("Estoy al principio");

} else if ( pajar.indexOf(aguja) === (pajar.length-aguja.length) ) {

console.log("Estoy al final");

} else if ( pajar.indexOf(aguja) !== -1 ) {

console.log("Estoy entremedias");

} else {

console.log("No estoy");

}

Mucho más cómodo con tres nuevos métodos que devuelven true o false si se produce la coincidencia: includes(), startsWith(), endsWith().

"use strict";

let pajar = "Hey, soy una cadena formidable";

let aguja = "Hey";

/* en cualquier lugar */

pajar.includes(aguja); // true

/* al principio de la cadena */

pajar.startsWith(aguja); // true

/* al final */

pajar.endsWith(aguja); // false

b) Y otro de utilidad incierta

Harmony trae otro cuatro método nuevo relacionado con String, pero la verdad es que no sé yo si vale para algo en la vida real. Se denomina repeat() y sirve para repetir una cadena las veces indicadas en el único parámetro que recibe.

let foo = "bar";

foo.repeat(2); // barbar

Template strings

Las template strings, que se puede traducir como «plantillas de cadenas texto», prometen ser muy potentes. Funcionan de forma similar a las cadenas, pero se definen entre comillas simples invertidas (el acento grave).

let miCadena = `Soy una template string de lo más coqueta`;

Además, tienen tres características que las diferencian de las cadenas normales. A saber:

a) Son multilínea

En una cadena normal, hay que escribir una n entre barras invertidas para incluir saltos de línea.

var cadena = "Hola \n\ Mundo!";

console.log(cadena);

/*

Hola
 Mundo!

*/

En cambio, en las template los saltos de línea y los espacios en blanco se consideran tal cual:

let cadena = `Hola

Mundo!`;

/*

Hola
      Mundo!

*/

Parece una tontería, pero como explica ese gran sabio de javaScript que es Nicholas C. Zakas, pueden armarse microplantillas chulas de esta manera:

let microplantilla = `

<div>

<h1>Hola Mundo</h1>

</div>`.trim();

document.getElementById("js-contenedor").innerHTML = microplantilla;

b) Sustituciones

Como ocurre con las cadenas en php y otros lenguajes, en las templates podemos interpolar expresiones, las cuales se caracterizan por ir entre paréntesis y precedidas por el signo $.

Es decir, en vez de tener que ir concatenando cadenas y variables con el signo +:

var mascota = "triceratops";

var cadena = "mi mascota es un " + mascota;

Ahora podremos hacer jugadas como esta:

"use strict";

let mascota = "triceratops";

let cadena = `mi mascota es un ${mascota}`;

Mucho más cómodo, elegante y comprensible.

c) Cadenas preprocesadas

Aún más potentes prometen ser las cadenas preprocesadas. Se pasan a una función que las precompila, la cual recibe como primer parámetro un array con los literales y luego los valores de las sustituciones indicadas entre llaves.

function foo(literales, ...sustituciones) {

// devuelve una cadena

}

Por ejemplo:

"use strict";

var foo = 2;

var bar = 4;

function procesaCadenas(cadenas, valor1, valor2, valor3) {

console.log(cadenas[0]); // El resultado de sumar

console.log(cadenas[1]); // y

console.log(cadenas[2]); // es

console.log(valor1); // 2

console.log(valor2); // 4

console.log(valor3); // 6

return "<b>" + cadenas[0].toUpperCase() + "</b>:" + valor3;

}

var cadenaProcesada = procesaCadenas`El resultado de sumar ${foo} y ${bar} es ${foo + bar}`;

document.getElementById("js-contenedor").innerHTML = cadenaProcesada;

El ejemplo anterior es muy simple y uno puede preguntarse si realmente van a valer para algo, por lo que os recomiendo este artículo de Jack Hsu, i18n with tagged template strings in ECMAScript 6, para que os terminéis de hacer una idea de su potencial.

Bueno, quedarían por ver las novedades relacionadas con los juegos de caracteres, pero son ya temas especializados que no tiene mucho sentido tratar en esta introducción, así que por hoy lo dejo aquí.

|| Tags: , ,

valoración de los lectores sobre harmony: 2. cadenas

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

3 respuestas a “harmony: 2. cadenas

  1. Pingback: vue js (3): componentes básicos | The Bit Jazz Band