es6字符串转模板字符串_现在的ES6：模板字符串

es6字符串转模板字符串

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

ES6是JavaScript的未来，而且已经存在。 它是一个最终的规范，它带来了语言必须具备的许多功能，以与当今的网络需求保持竞争力。 ES6中并非所有内容都适合您，在本系列文章中，我将展示非常方便且已经可用的功能。

如果看一下我编写JavaScript代码，您会发现我总是使用单引号而不是双引号来定义字符串。 使用JavaScript都可以，以下两个示例完全相同：

var animal = "cow";
var animal = 'cow';

我之所以喜欢单引号，是因为，首先，它使以适当的引号属性组合HTML字符串变得更容易：

// with single quotes, there's no need to
// escape the quotes around the class value
var but = '<button class="big">Save</button>';

// this is a syntax error:
var but = "<button class="big">Save</button>";

// this works:
var but = "<button class=\"big\">Save</button>";

现在唯一需要转义的时间是在HTML中使用单引号时，这种情况很少见。 我唯一能想到的就是内联JavaScript或CSS，这意味着您很可能会对标记做一些可疑或绝望的事情。 即使在您的文本中，最好不要使用单引号，但在印刷上更令人愉悦。

旁白：当然，HTML足够宽容，可以省略引号或在属性周围使用单引号，但是我更喜欢为人类创建可读的标记，而不是依靠解析器的原谅。 我们之所以宽容HTML5解析器，是因为人们过去曾写过糟糕的标记，而不是以此作为借口。

在document.write的DHTML日子里，我已经受够了在新的弹出窗口中的框架集中创建文档以及其他可憎的事情，不想再使用转义字符了。 有时，我们需要三元组，这甚至在我们的编辑器中进行颜色编码之前。 一团糟。

用字符串替换表达式？

我更喜欢单引号的另一个原因是，我花了很多时间在非常重要的大型网站上写了很多PHP。 在PHP中，单引号和双引号之间是有区别的。 单引号的字符串中没有任何替代，双引号的字符串中没有任何替代。 这意味着在PHP 3和4的年代，使用单引号的速度要快得多，因为解析器不必遍历字符串来替换值。 这是一个示例，意味着：

<?php
  $animal = 'cow';
  $sound = 'moo';
 
  echo 'The animal is $animal and its sound is $sound';
  // => The animal is $animal and its sound is $sound
 
  echo "The animal is $animal and its sound is $sound";
  // => The animal is cow and its sound is moo
?>

JavaScript没有这种替代，这就是为什么我们必须串联字符串才能获得相同的结果。 这非常麻烦，因为您需要始终跳入或跳出引号。

var animal = 'cow';
var sound = 'moo';

alert('The animal is ' + animal + ' and its sound is ' + sound);
// => "The animal is cow and its sound is moo"

多行混乱

更长，更复杂的字符串会变得非常混乱，尤其是在我们组装大量HTML时。 而且，很可能您迟早会导致整理工具抱怨在行尾加+后尾随空格。 这基于JavaScript没有多行字符串的问题：