我们可以用ES6模板替换现有的JS模板解决方案吗

Question

ES6的一个非常吸引人的特性是它的内置模板字符串。目前，由于转换到ES5是跨浏览器兼容性的必要条件，我很好奇转换后的ES6模板与Mustache、Handlebars、Jade等现有解决方案之间的性能差异。显然，如果你需要模板语言的高级功能，ES6模板可能无法满足你的所有需求，但如果你正在执行基本模板，可以公平地说，ES6模板字符串可以取代您当前的模板引擎吗？

Answer 1

Template字符串与JavaScript中实现的各种模板引擎并不真正相关。

大多数模板引擎（Undercore、Lodash、Mustache、Handlebars、Jade等）都有特殊的语法和形式。有些可能使您能够定义块，对各种事物使用特殊标记，或者为逻辑/循环结构提供唯一标记。

ES6模板字符串为您提供了JavaScript的全部功能，而无需学习专门的/固执己见的模板引擎。

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

注意到下划线模板中丑陋的<%= %>标记了吗？这只是下划线发明的东西，用来解决"；"问题"；；"；"问题"；在ES6之前，JavaScript没有任何字符串插值。人们认为写这样的东西很乏味

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

使用ES6，JavaScript通过${...}获得原生字符串插值。只要是有效的JavaScript，几乎任何东西都可以进入${}。

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

Answer 2

如果您进行了转换，ES6将被转换为本机ES5，因此它应该在性能方面胜过任何框架/库。

ES6

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

转运

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