我们能用ES6模板取代现有的JS模板解决方案吗？

Question

ES6的一个非常吸引人的特性是它内置在模板字符串中。此时，由于转换到ES5是跨浏览器兼容性的必要条件，我很好奇ES6模板与现有解决方案(如胡子、把手、Jade等)之间的性能差异。显然，如果您需要模板语言的高级特性，ES6模板可能无法满足您的所有需求，但是如果您正在执行基本模板，那么是否可以说ES6模板字符串可以取代当前的模板引擎呢？

Answer 1

ES6中的模板字符串实际上与在JavaScript中实现的各种模板引擎无关。

大多数模板引擎(下划线，Lodash，胡子，把手，玉石等)都有特殊的语法和特殊的形式。有些可能使您能够定义块，为各种事情使用特殊标记，或者为逻辑/循环结构提供唯一的标记。

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，几乎任何东西都可以在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

如果您使用transpile，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;