现在的ES6：模板字符串

最新推荐文章于 2024-04-06 21:42:48 发布

dingshi7798

最新推荐文章于 2024-04-06 21:42:48 发布

阅读量221

点赞数

文章标签： javascript php markdown ViewUI

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


// this doesn't work
var list = '<ul> 
<li>Buy Milk</li> 
<li>Be kind to Pandas</li> 
<li>Forget about Dre</li> 
</ul>'; 

// This does, but urgh… 
var list = '<ul>\
<li>Buy Milk</li>\ 
<li>Be kind to Pandas</li>\ 
<li>Forget about Dre</li>\ 
</ul>';

// This is the most common way, and urgh, too… 
var list = '<ul>' +
 ' <li>Buy Milk</li>' +
 ' <li>Be kind to Pandas</li>' +
 ' <li>Forget about Dre</li>' + 
 '</ul>';

客户端模板解决方案

为了解决JavaScript中字符串处理和连接混乱的问题，我们做了我们经常做的事情–我们编写了一个库。有许多HTML模板库，其中Mustache.js可能是开创性的。所有这些都遵循自己的（非标准化的）语法，并在这种思路下发挥作用。这有点像说您用markdown编写内容，然后意识到“ markdown”的含义有很多不同的想法。

输入模板字符串

随着ES6的出现及其标准化，我们现在可以欢欣鼓舞，因为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(strings.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) {
	// …
}

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

使用JavaScript进行更多操作

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

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

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

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

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

From: https://www.sitepoint.com/es6-now-template-strings/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
现在的ES6：模板字符串

这篇文章是从微软的Web开发系列的一部分。感谢您支持谁使SitePoint可能的合作伙伴。 ES6是JavaScript的未来，这是已经在这里。这是一个最终的规范，它带来了很多的功能，语言要求留在现在的网络的需求，有竞争力的。在ES6并非一切都是为了你和这个小系列文章中，我将证明是非常方便的和已经使用的功能。如果你看一下JavaScript代码我已经写了你会发现，我总是用单引号来定义...
复制链接

扫一扫