ES6中模板字符串的天才

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 = 'Save';



// this is a syntax error:

var but = "Save";



// this works:

var but = "Save";

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

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

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

用字符串替换表达式？

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

 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没有多行字符串的问题：

// this doesn't work

var list = '


  
Buy Milk

  
Be kind to Pandas

  
Forget about Dre

';

 

// This does, but urgh… 

var list = '
\

  
Buy Milk
\

  
Be kind to Pandas
\

  
Forget about Dre
\

';

 

// This is the most common way, and urgh, too…

var list = '
' +

'  
Buy Milk
' +

'  
Be kind to Pandas
' +

'  
Forget about Dre
' +

'
';

客户端模板解决方案

为了解决JavaScript中字符串处理和连接混乱的问题，我们做了我们一直做的工作-我们编写了一个库。 HTML模板库很多，其中Mustache.js可能是开创性的。 所有这些都遵循自己的，非标准化的语法，并且在这种思想框架中起作用。 这有点像说您在Markdown中编写内容，然后意识到“ Markdown”的含义有很多不同的想法。

输入模板字符串

随着ES6的出现及其标准化，我们可以为JavaScript感到高兴，因为JavaScript现在在处理字符串方面有了一个新的障碍： Template Strings 。 当前浏览器中对模板字符串的支持令人鼓舞：Chrome 44 +，Firefox 38 +， Microsoft Edge和WebKit都已内置。 令人遗憾的是，Safari浏览器还没有，但它将到达那里。

模板字符串的天才之处在于它使用了新的字符串分隔符，既不在HTML中也不在常规文本中使用：反引号（ ` ）。

现在，使用此代码，我们可以在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"

${}构造可以接受任何返回值JavaScript表达式。 例如，您可以进行计算或访问对象的属性：

var out = `ten times two totally is ${ 10 * 2 }`;

// => "ten times two totally is 20"

 

var animal = {

  name: 'cow',

  ilk: 'bovine',

  front: 'moo',

  back: 'milk',

}

alert(`

  The ${animal.name} is of the 

  ${animal.ilk} ilk, 

  one end is for the ${animal.front}, 

  the other for the ${animal.back}

`);

// => 

/*

  The cow is of the 

  bovine ilk, 

  one end is for the moo, 

  the other for the milk

*/

最后一个示例还向您显示多行字符串不再是问题。

标记模板

使用模板字符串可以做的另一件事是在它们之前添加一个标签，该标签是被调用并以字符串作为参数的函数的名称。 例如，您可以对生成的URL字符串进行编码，而不必始终使用可怕的名为encodeURIComponent的名称。

function urlify (str) {

  return encodeURIComponent(str);

}

 

urlify `http://beedogs.com`;

// => "http%3A%2F%2Fbeedogs.com"

urlify `woah$£$%£^$"`;

// => "woah%24%C2%A3%24%25%C2%A3%5E%24%22"

 

// nesting also works:

 

var str = `foo ${urlify `&&`} bar`;

// => "foo %26%26 bar"

这可行，但依赖于隐式数组到字符串强制。 发送给函数的参数不是字符串，而是字符串和值的数组。 如果使用我在此显示的方式，为了方便起见，它将转换为字符串，但是正确的方法是直接访问数组成员。

从模板字符串中检索字符串和值

在标记函数中，您不仅可以获取完整的字符串，还可以获取其部分。

function tag (strings, values) {

  console.log(strings);

  console.log(values);

  console.log(strings[1]);

}

tag `you ${3+4} it`;

/* =>

 

Array [ "you ", " it" ]

7

it

 

*/

还提供了一组原始字符串，这意味着您将获得字符串中的所有字符，包括控制字符。 例如，假设您使用\n添加换行符。 您将在字符串中获得双精度空格，但在原始字符串中获得\n字符：

function tag (strings, values) {

  console.log(strings);

  console.log(values);

  console.log(strings[1]);

  console.log(string.raw[1]);

}

 

tag `you ${3+4} \nit`;

/* =>

 

Array [ "you ", "  it" ]

7

 

it

 \nit

*/

结论

模板字符串是ES6中可以立即使用的一些小优点之一。 如果必须支持较旧的浏览器，则当然可以将ES6转换为ES5。 您可以使用诸如featuretests.io之类的库或以下代码对模板字符串支持进行功能测试：

var templatestrings = false;

try {

  new Function( "`{2+2}`" );

  templatestrings = true;

} catch (err) {

  templatestrings = false;

} 

 

if (templatestrings) {

    // …

}

以下是有关模板字符串的更多文章：

• ECMAScript 6 Power教程：模板字符串
• 使用ES6模板字符串获取文字
• 深入了解ES6：模板字符串
• ECMAScript 6中的新字符串功能
• 了解ES6：模板字符串
• 使用ES6模板字符串HTML模板

使用JavaScript进行更多操作

本文是Microsoft技术传播者开发的Web开发系列文章的一部分，内容涉及实用JavaScript学习，开源项目以及互操作性最佳实践，包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎 。

我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试，包括Microsoft Edge（Windows 10的默认浏览器）：

• 扫描您的站点以查找过时的库，布局问题和可访问性
• 在Mac，Linux和Windows上使用虚拟机
• 在自己的设备上远程测试Microsoft Edge
• GitHub上的编码实验室：跨浏览器测试和最佳实践

我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习：

• Microsoft Edge Web Summit 2015 （新浏览器，新支持的网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么）
• 哇，我可以在Mac和Linux上测试Edge和IE！ （来自Rey Bango）
• 在不中断网络的情况下推进JavaScript （摘自Christian Heilmann）
• 使网络正常工作的边缘渲染引擎 （来自Jacob Rossi）
• 使用WebGL释放3D渲染 （来自David Catuhe，包括Vorlon.js和Babylon.js项目）
• 托管的Web应用程序和Web平台创新 （来自Kevin Hill和Kiril Seksenov，包括歧管项目）

Web平台的更多免费跨平台工具和资源：

• 适用于Linux，Mac OS和Windows的Visual Studio代码
• 使用Node.js进行编码并在Azure上免费试用

翻译自: https://code.tutsplus.com/tutorials/the-genius-of-template-strings-in-es6--cms-24915