Blog

Strings in ES6 Blog

Strings in ES6
Tags: JavaScript ES6

El uso de Strings en JavaScript siempre ha sido tedioso, sobre todo cuando tenemos que remplazar valores o generar dinámicamente algún texto, ES6 pinta muy bien en cuanto al manejo de strings ya que ahora podemos definir templates y remplazar los valores de una manera muy sencilla.

Los siguientes ejemplos funcionarán correctamente en Chrome 41+, asegúrate de probarlos en esta versión.

Sustitución de Strings

Para sustituir un string dentro de otro podemos hacerlo de la siguiente manera.

var name = 'John Doe';

console.log(`Hola ${name}! ¿Cómo estas?`); //=> Hola John Doe! ¿Cómo estas?
  1. En primer lugar el string que remplaza la variable name está definido mediante back-ticks (`...`)  en lugar de usar comillas simples ('...') o dobles ("...").
  2. Para evaluar variables simplemente usamos ${...}.

Como se puede apreciar esto nos abre muchas posibilidades, de hecho esta técnica la tenemos disponible en lenguajes como Ruby o Python, esta genial que ahora la tendremos disponible en JavaScript.

Evaluación de expresiones

No solamente podemos remplazar variables, también podemos definir expresiones y evaluarlas directamente en el template.

var x = 1,
    y = 2;

console.log(`${x} + ${y} = ${x + y}`); //=> 1 + 2 = 3

 También podemos ejecutar funciones directamente desde el template.

function text(){
    return 'persona agria';
}

console.log(`Eres una ${text()}!`); //=> Eres una persona agria!

Básicamente podemos poner cualquier expresión y será evaluada correctamente! Esto es una característica que personalmente extrañaba tener en JavaScript. 

Soporte

Como ya mencioné al principio, esta nueva característica de ES6 funciona correctamente en Chrome 41+, pero también en IE Tech Preview, Firefox 35+ y io.js. Si quisieras usarla actualmente en producción te recomiendo utilizar los transpilers, los más populares soportan esta característica.

Happy coding!

Se el primero en comentar!

Instructor del curso

Crysfel3

Autor: Crysfel Villa

Soy un geek que disfruta crear y compartir cosas en internet! Sígueme en twitter @crysfel