Können wir bestehende JS-Vorlagenlösungen durch ES6-Vorlagen ersetzen?

Question

Ein sehr attraktives Feature von ES6 sind die eingebauten Template-Strings. Zu diesem Zeitpunkt, seit der Übertragung auf ES5 ein Muss für Cross-Browser-Kompatibilität ist, bin ich gespannt, was die Leistungsunterschiede zwischen transpilierten ES6-Vorlagen und bestehenden Lösungen wie Schnurrbart, Lenker, Jade etc. sind. Offensichtlich, wenn Sie erweiterte Funktionen von a Templating-Sprache, ES6-Vorlagen erfüllen möglicherweise nicht alle Ihre Anforderungen, aber wenn Sie grundlegende Vorlagen erstellen, ist es fair zu sagen, dass ES6-Vorlagen-Strings Ihre aktuelle Vorlagen-Engine ersetzen könnten?

Answer 1

Wenn Sie transpilieren, wird ES6 in natives ES5 transpiliert, so dass es die Leistung eines Framework/einer Bibliothek übertrifft.

ES6

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

Transpiled

"use strict"; 

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

Answer 2

Template Strings in ES6 sind nicht wirklich im Zusammenhang mit den verschiedenen Template Motoren, die in JavaScript implementiert sind.

Die meisten Template-Engines (Underscore, Lodash, Moustache, Lenker, Jade, etc.) haben alle spezielle Syntaxen und spezielle Formen. Einige bieten Ihnen die Möglichkeit, Blöcke zu definieren, spezielle Markierungen für verschiedene Dinge zu verwenden oder Ihnen einzigartige Tags für Logik-/Schleifenstrukturen zu geben.

ES6 Template Strings geben Sie die volle Leistung von JavaScript, ohne Sie zu fragen, eine spezialisierte/opportuned Vorlagen-Engine zu lernen.

// underscore 
var compiled = _.template("hello: <%= name %>"); 
compiled({name: 'moe'}); 
// => "hello: moe" 

// ES6 Template String 
let name = 'moe'; 
`hello: ${name}`; 
// => "hello: moe" 

Beachten Sie die hässlichen <%= %>-Tags in der Unterstrich-Vorlage? Das ist nur etwas Unterstreichung erfunden, um ein "Problem" zu lösen; Das "Problem" ist, dass JavaScript vor ES6 keine Art von string interpolation hatte. Die Leute dachten, es mühsam war, die Dinge zu schreiben, wie

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." 

Mit ES6, wird JavaScript nativen String Interpolation über ${...}. So ziemlich alles kann in ${} gehen, solange es JavaScript gültig ist.

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