JavaScript

理解ECMAScript 6:模板字符串

大卫Catuhe
分享

本文是微软网络开发技术系列的一部分。感谢您对合作伙伴的支持，是他们让SitePoint成为可能。必威西盟体育网页登录

欢迎来到我关于ECMAScript 6系列文章的第二部分!我最喜欢的事情之一斯巴达式的项目我们正在微软创建的新浏览器渲染引擎，它为ECMAScript 6提供了广泛的支持。因此，我写了这个系列来引导您了解在为web编写大型应用程序时可以使用ECMAScript 6做的一些很酷的事情。

在第一部分中，我介绍了类和继承．在本文中，我将根据我个人创建嵌入式表达式的经验重点介绍模板字符串。

解决回行问题

在工作时Babylon.js，我必须处理着色器的代码，可以看到，为了理解，像一大堆文本(看起来像C)。

你可以找到一个例子在这里．

在JavaScript中处理长文本时的问题是行返回。这种东西你写过多少次了?

varmyTooLongString＝“很久以前，在一个遥远的星系，”+“远……”+“这是一个内战时期。”+“反叛飞船，出击”+"从一个隐藏的基地，已经赢了"+他们的第一次胜利。+"邪恶的银河帝国。"；

当你必须使用200多行长的着色器时，这很快就变成了一个真正的痛苦。

值得庆幸的是，ECMAScript 6附带了新的模板字符串特性。在其他奇迹中，模板字符串直接支持多行字符串:

varmyTooLongString＝｀很久以前，在一个遥远的星系....那是一个内战时期。反抗军的宇宙飞船，从一个隐蔽的基地发动攻击，赢得了对抗邪恶的银河帝国的第一场胜利｀；

因为在模板字符串中所有字符都是有意义的，所以不能添加前导空白

现在作为JavaScript开发者，我们有3种方法来定义字符串:

那么模板部分呢?

多行支持并不是模板字符串的唯一特性。实际上，您还可以使用模板字符串将占位符替换为变量值，就像您所做的那样printfC/ c++或字符串。格式在c#中:

var项目＝［］；项目．推（“香蕉”）；项目．推（“西红柿”）；项目．推（“光剑”）；var总计＝100.5；结果．innerHTML＝｀你有$ {项目．长度｝在您的篮子里的物品，共计$$ {总计｝｀；

这段代码产生如下输出:

您的篮子里有3件商品，共计100.5美元

很方便，对吧?

记住ECMAScript 5的方法:

结果．innerHTML＝“你有”+项目．长度+"您篮子里的物品共计$"+总计；

标签的进一步发展

模板字符串规范的最后一个阶段是在字符串本身之前添加一个自定义函数来创建一个带标签的模板字符串:

varmyUselessFunction＝函数（字符串，.．.值）{var输出＝＂＂；为（var指数＝0；指数<值．长度；指数++）{输出+ =字符串［指数］+值［指数］；｝输出+ =字符串［指数］返回输出；｝结果．innerHTML＝myUselessFunction｀你有$ {项目．长度｝在您的篮子里的物品，共计$$ {总计｝｀；

这里的函数用于访问常量字符串部分以及被求值的变量值。

在前面的例子中，字符串和值如下:

  • 字符串[0]= "你有"
  • [0] = 3
  • 字符串[1]= "在你的篮子里的物品总计$"
  • 取值[1]= 100.5
  • 字符串[2]= ""

如你所见，每一个值[n]被常量字符串包围(字符串[n]而且字符串[n + 1])。

这允许您控制如何构建最终输出字符串。在我前面的例子中，我只复制了模板字符串的基本行为，但我们可以进一步向字符串添加酷炫的处理。

例如，这里有一段代码用来阻止试图注入自定义DOM元素的字符串:

var项目＝［］；项目．推（“香蕉”）；项目．推（“西红柿”）；项目．推（“光剑”）；var总计＝"试图劫持你的网站
"；varmyTagFunction＝函数（字符串，.．.值）{var输出＝＂＂；为（var指数＝0；指数<值．长度；指数++）{varvalueString＝值［指数］．toString（）；如果（valueString．indexOf（“>”）= = !-1）{//更复杂的测试可以在这里实现:)返回“字符串分析并拒绝!”；｝输出+ =字符串［指数］+值［指数］；｝输出+ =字符串［指数］返回输出；｝结果．innerHTML＝myTagFunction｀你有$ {项目．长度｝在您的篮子里的物品，共计$$ {总计｝｀；

带标记的模板字符串可以用于很多事情，如安全性、本地化、创建自己的领域特定语言等。

原始字符串

标记函数在访问字符串常量时有一个特殊的选项:它们可以使用strings.raw获取未转义的字符串值。例如，在这种情况下\ n不会被视为只有一个角色，而实际上是两个＼而且n．

主要目标是允许你在输入字符串时访问它:

varmyRawFunction＝函数（字符串，.．.值）{var输出＝＂＂；为（var指数＝0；指数<值．长度；指数++）{输出+ =字符串．生［指数］+值［指数］；｝输出+ =字符串．生［指数］控制台．日志（字符串．长度，值．长度）；返回输出；｝结果．innerHTML＝myRawFunction｀你有$ {项目．长度｝你篮子里的物品\n。一共$$ {总计｝｀；

这段代码生成以下输出:

您的篮子里有3件物品\n。总共100.5美元

你也可以使用String的新函数:String.raw()。这个函数是一个内置函数，它的功能和我前面的例子完全一样:

结果．innerHTML＝字符串．生｀你有$ {项目．长度｝你篮子里的物品\n。一共$$ {总计｝｀；

结论

Project Spartan和最新版本的Chrome (41+)， Opera(28+)和Firefox(35+)支持模板字符串，您可以跟踪ECMAScript 6的总体支持水平在这里．因此，如果你的目标是现代网络，没有理由不使用模板字符串。

要全面了解Project Spartan中新的网络标准和功能，比如WebAudio，你可以在这里看到完整的列表status.modern.IE．

JavaScript的更多实践

这可能会让你有点惊讶，但微软有很多关于开源JavaScript主题的免费学习，我们的任务是创建更多的斯巴达计划即将到来．看看我自己的:

或者我们团队的学习系列:

还有一些免费工具:Visual Studio社区，Azure的审判,跨浏览器测试工具适用于Mac、Linux或Windows。

本文是微软网络开发技术系列的一部分。我们很高兴能分享斯巴达式的项目和它的新的渲染引擎和你在一起。获得免费虚拟机或在Mac、iOS、Android或Windows设备上远程测试现代的。即．

Baidu