我们可以用ES6模板替换现有的JS模板解决方案吗？ [英] Can we get away with replacing existing JS templating solutions with ES6 templates?

问题描述

ES6的一个非常有吸引力的特性就是内建模板字符串。在这个时候，由于向ES5传播是跨浏览器兼容性的必需条件，我很好奇，在传播的ES6模板和现有的解决方案（如胡子，手柄，玉等）之间的性能差异是显而易见的。显然，如果您需要模板语言，ES6模板可能无法满足您的所有需求，但如果您正在执行基本模板，可以说ES6模板字符串可以替代您当前的模板引擎吗？

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

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

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

  //下划线
 var compiled = _.template（hello：<％= name％> ）; 
 compile（{name：'moe'}）; 
 // => hello：moe
 
 // ES6 Template String 
 let name ='moe'; 
`hello：$ {name}`; 
 // => 你好：moe
  

注意丑的<％=％> 下划线模板中的标签？这仅仅是为了解决一个问题而发明的东西。 问题是ES6之前的JavaScript没有任何类型的字符串插入。人们以为写这样的东西是件麻烦的事情，如

  var greeting =hello; 
 var name =moe; 
 var emotion =沮丧; 
 
问候+，我的名字是+ name +，感觉+情感+。 
 // => 你好，我的名字是moe，我感到郁闷。 
  

使用ES6，JavaScript通过 $ {...}获得本机字符串插值， 。只要有效的JavaScript就可以在 $ {} 内进行任何操作。

  let name =naomik; 
 let emotion =happy; 
`$ {greeting || 嗨}，我的名字是$ {name}。我觉得$ {情感}。
 // => 我的名字是naomik，我感到开心。 
  

One very attractive feature of ES6 is its built in template strings. At this point in time, since transpiling to ES5 is a must for cross browser compatibility, I am curious what the performance differences are between transpiled ES6 templates and existing solutions such as Mustache, Handlebars, Jade etc. Obviously if you need advanced features from a templating language, ES6 templates may not fulfill all of your needs, but if you are performing basic templating, is it fair to say that ES6 template strings could replace your current templating engine?

解决方案

Template strings in ES6 aren't really related to the various template engines that are implemented in JavaScript.

Most template engines (Underscore, Lodash, Mustache, Handlebars, Jade, etc) all have special syntaxes and special forms. Some might give you the ability to define blocks, use special mark up for various things, or giving you unique tags for logic/looping structures.

ES6 Template Strings give you the full power of JavaScript without asking you to learn a specialized/opinionated template engine.

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

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

Notice the ugly <%= %> tags in the underscore template? That's just something underscore invented to solve a "problem"; the "problem" being that before ES6, JavaScript didn't have any sort of string interpolation. People thought it was tedious to write things like

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

With ES6, JavaScript gets native string interpolation via ${...}. Pretty much anything can go inside ${} as long as it's valid JavaScript.

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

这篇关于我们可以用ES6模板替换现有的JS模板解决方案吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！