javascript - strings - ¿Podemos salirnos con la sustitución de las soluciones de plantillas JS existentes con plantillas ES6?

template string typescript

Question

Una característica muy atractiva de ES6 es su estructura de cadenas de plantillas. En este momento, dado que transpiling a ES5 es imprescindible para la compatibilidad con navegadores cruzados, tengo curiosidad por conocer las diferencias de rendimiento entre las plantillas ES6 transpiladas y las soluciones existentes, como Mustache, Handlebars, Jade, etc. Obviamente, si necesita funciones avanzadas de una el lenguaje de plantillas, las plantillas de ES6 pueden no satisfacer todas sus necesidades, pero si está realizando plantillas básicas, ¿es justo decir que las cadenas de plantillas de ES6 podrían reemplazar su motor de plantillas actual?

Answer 1

Las cadenas de plantillas en ES6 no están realmente relacionadas con los diversos motores de plantillas que se implementan en JavaScript.

La mayoría de los motores de plantilla (subrayado, Lodash, bigote, manillar, jade, etc.) tienen sintaxis especiales y formas especiales. Algunos pueden darle la capacidad de definir bloques, usar marcas especiales para varias cosas, o darle etiquetas únicas para estructuras de lógica / bucle.

Las cadenas de plantillas de ES6 le brindan todo el poder de JavaScript sin pedirle que aprenda un motor de plantillas especializadas / obstinadas.

// underscore
var compiled = _.template("hello: <%= name %>");
compiled({name: ''moe''});
// => "hello: moe"
// ES6 Template String
let name = ''moe'';
`hello: ${name}`;
// => "hello: moe"

¿Observe las feas etiquetas <%= %> en la plantilla de subrayado? Es solo un subrayado inventado para resolver un "problema"; el "problema" es que antes de ES6, JavaScript no tenía ningún tipo de interpolación de cadenas . La gente pensó que era tedioso escribir cosas como

var greeting = "hello";
var name = "moe";
var emotion = "depressed";
greeting + ", my name is " + name + ". I feel " + emotion + ".";
// => "hello, my name is moe. I feel depressed."

Con ES6, JavaScript obtiene la interpolación de cadena nativa a través de ${...} . Casi todo puede ir dentro de ${} siempre que sea JavaScript válido.

let name = "naomik";
let emotion = "happy";
`${greeting || "hi"}, my name is ${name}. I feel ${emotion}.`
// => "hi, my name is naomik. I feel happy."

Answer 2

Si transporta, ES6 se transporta a ES5 nativo, por lo que debe superar cualquier rendimiento de framework / library.

ES6

var foo = "foo";
var bar = "bar";
var foobar = `${foo} ${bar}`;

Transpiled

"use strict";
var foo = "foo";
var bar = "bar";
var foobar = foo + " " + bar;