Question

ES6的一个非常吸引人的功能是它内置的模板字符串。在这个时间点，由于转换到ES5是跨浏览器兼容性的必要条件，我很好奇在转换的ES6模板和现有解决方案（如Mustache，Handlebars，Jade等）之间的性能差异。显然，如果您需要来自模板语言，ES6模板可能无法满足您的所有需求，但如果您正在执行基本模板，那么说ES6模板字符串可以替换您当前的模板引擎是否公平？

Answer 1

ES6中的

模板字符串与用JavaScript实现的各种模板引擎无关。

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

ES6 Template Strings为您提供JavaScript的全部功能，而无需您学习专业/自以为是的模板引擎。

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

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

请注意下划线模板中的丑陋<%= %>标记？这只是为解决一个问题而发明的下划线＆＃34 ;; ＆＃34;问题＆＃34;在ES6之前，JavaScript并没有任何string interpolation。人们认为编写像

这样的东西是很乏味的

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 = "naomik";
let emotion = "happy";
`${greeting || "hi"}, my name is ${name}. I feel ${emotion}.`
// => "hi, my name is naomik. I feel happy."

Answer 2

如果你转换，ES6会被转换为本机ES5，所以它应该明智地击败任何框架/库。

<强> ES6

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

<强> Transpiled

"use strict";

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

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

2 个答案: