strings, literals, templates

Strings

'string text'
"string text"
"中文 español deutsch English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"
String(thing)

https://jsbin.com/nibako/edit?js,console

Viejas y queridas strings

Literals

Literals (ya no da para decirles nuevas)

`
Se utilizan las comillas invertidas, o acentro grave, (`) para delimitar las cadenas.

Para añadir marcadores de posición (o placeholders) utilizamos el signo de dolar ($) seguido de llaves.

El uso de las comillas invertidas tiene como objetivo salvaguardar la retrocompatibilidad en códigos anteriores que ya usan las comillas tradicionales.

Es importante recalcar que las plantillas mantienen el formato introducido, incluyéndose los saltos de línea y las tabulaciones.
console.log("línea 1 de cadena de texto\n\
línea 2 de cadena de texto");


console.log(`línea 1 de la cadena de texto 
línea 2 de la cadena de texto`);


console.log(`línea 1 de la cadena de texto 
    línea 2 de la cadena de texto`);

var a = 5;
var b = 10;

Interpolacion

console.log("Quince es " + (a + b) + " y\nno " + (2 * a + b) + ".");

var a = 5;
var b = 10;

console.log(`Quince es ${a + b} y
no ${2 * a + b}.`);
var collection = [
    {
        id: 1,
        title: 'The Neverending Story'
    }, {
        id: 2,
        title: 'Momo'
    }
];
 
var myID = 2;
 
console.info( `Book title: ${ collection.find( item => item.id === myID ).title }` );
La interpolación permite sustituir marcadores de posición (placeholders) en tiempo de ejecución por sus correspondientes valores a través de expresiones. Cualquier expresión válida en el lenguaje lo es en la plantilla.
var val1 = 100,
    val2 = '200';
 
console.info( `The sum: ${ val1 + val2 }` ); // 100200
 
var val3 = 100,
    val4 = undefined;
 
console.info( `The sum: ${ val3 + val4 }` ); // NaN
En caso de que un valor no esté definido, o no se correspondan sus tipos, las expresiones se evalúan de la forma habitual a como el motor Javascript lo haría fuera de la plantilla.

Indefiniciones y cohersion

Templates

En un sistema tradicional de plantillas de texto, una expresión cuasi-literal (o cuasi-expresión) consiste en una función opcional auxiliar de postproceso (quasi-parser), un cuasi-entrecomillado (quasi-quotation o como comilla invertida “`”) y una cadena válida para la función de postprocesado.

const tag = strings => console.log(strings);

tag('menem es un palindromo')

https://jsbin.com/setocu/1/edit

tag`menem es un palindromo`
Una forma más avanzada de plantillas de cadenas de texto son aquellas que contienen una función de postprocesado . Con ellas es posible modificar la salida de las plantillas, usando una función. 

El primer argumento contiene un array con las cadenas de texto de la plantilla. El segundo y subsiguientes argumentos con los valores procesados ( ya cocinados ) de las expresiones de la plantilla. 

Finalmente, la función devuelve la cadena de texto manipulada. 
const a = 5;
const b = 10;

const tag = (strings, ...values) => {
  console.log('Este es un array con los strings', strings);
  console.log('Este es un array con el resultado de las interpolaciones',
    values);
  return "Bazinga!";
}

const result = tag`Hola ${ a + b } mundo ${ a * b}`;
console.log(result);
const templater  = ( strings, ...keys )  => data => {
    let temp = strings.slice();

    keys.forEach( ( key, i ) => {
        temp[ i ] = temp[ i ] + data[ key ];
    } );

    return temp.join( '' );
};

const img1 = {
    name: 'Hidetaka Miyazaki',
    src: 'Hidetaka_miyazaki.jpg',
    caption: 'Japanese God'
};

const imgTemplate = templater`<figure>
    <img alt="${ 'name' }" src="${ 'src' }">
    <figcaption>${ 'caption' }</figcaption>
</figure>`;

const myTemplate = imgTemplate( img1 );
console.info( myTemplate );

En un sistema tradicional de plantillas de texto, una expresión cuasi-literal (o cuasi-expresión) consiste en una función opcional auxiliar de postproceso (quasi-parser), un cuasi-entrecomillado (quasi-quotation o como comilla invertida “`”) y una cadena válida para la función de postprocesado.

quasi-literal

quasi-quotation

Valid String

funcion auxiliar  de postproceso

const img1 = {
    name: 'Hidetaka Miyazaki',
    src: 'Hidetaka_miyazaki.jpg',
    caption: 'Japanese God'
};

const imgTemplate = data => `<figure>
    <img alt="${ data.name }" src="${ data.src }">
    <figcaption>${ data.caption }</figcaption>
</figure>`;

const myTemplate = imgTemplate( img1 );
console.info( myTemplate );

https://jsbin.com/yinuhih/edit?js,console

raw

La propiedad especial raw, disponible en el primer argumento de las plantillas de cadenas de texto postprocesadas, nos permite acceder a las cadenas de texto tal como fueron ingresadas.
const tag = (strings, ...values) =>
    console.log(strings.raw[0]);

tag`línea 1 de cadena de texto \n línea 2 de cadena de texto`;


String.raw`Hola\n${2+3}!`;

Benchmarks

concatStrings: 103.5341796875ms
literals: 102.19091796875ms
handlebars: 256.781005859375ms

https://jsperf.com/es6-string-literals-vs-string-concatenation

Chiche

https://code.facebook.com/posts/1362748677097871/relay-modern-simpler-faster-more-extensible/

Strings, Literals y Template

By Pablo Hiyano

Made with Slides.com

Strings, Literals y Template

  • 565

More from Pablo Hiyano