说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

【探秘ES6】系列专栏:模版字符串

HTML文档下载 WORD文档下载 PDF文档下载
新一代JavaScript标准,ES6即将发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解。本文为系列的第四篇,带你了解ES6的模版字符串(Template Strings)。

ES6作为新一代JavaScript标准,即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,供大家学习借鉴。本文为该系列的第四篇。

前两次学习了生成器和迭代器以后,脑袋有没有一团浆糊?哈哈。我承诺过本次我们将学习一些简单的东西。

那我们现在就开始吧!

“小句号”的基本使用

ES6新引入了一种新的字符串语法——模版字符串(Template Strings),它看起来和普通的字符串很像,区别在于它不是由单引号'或者双引号"来闭合,而是使用`(俗称:小句号)。我们来看个最简单的例子,它们其实就是字符串而已:

context.fillText(`Ceci n'est pas une chaîne.`, x, y);

但是既然它被叫做“模版字符串”,那它应该不仅仅是用小句号来闭合的普通字符串吧?模版字符串让JavaScript有了一个简单的字符串插值功能——既写法美观又能很方便地将JavaScript变量替换到字符串中。

很多情景下都可以用到它,但最打动我的是它在毫不起眼的错误消息中的使用:

function authorize(user, action) {  if (!user.hasPrivilege(action)) {    throw new Error(      `User ${user.name} is not authorized to do ${action}.`);  }}

在这个例子中,${user.name}和${action}被称作模版替换位。在生成的字符串中,JavaScript会用使用user.name和action的变量值来替换字符串的模版替换位。最后生成的字符串为:User jorendorff is not authorized to do hockey(你可以自己试试,我可没忽悠你)。

目前为止,它只是个比+(加号连接符)在语法上略微美观一些而已,你可能想了解更多关于它的细节:

  • 模版替换位中的代码可以是任何JavaScript的表达式,比如函数调用、算数运算等等都是允许的(只要你乐意,你甚至可以在模版字符串中嵌套模版字符串,有种模版中的《盗梦空间》的感觉)。
  • 如果插入的值不是字符串,它将被转换为字符串。例如,如果action是个对象,它的.toString()方法将会被调用。
  • 如果你的模版字符串中包含 ` (小句号),需要使用转义字符`\``,效果相当于 "`"。
  • 举一反三,如果你的模版字符串中需要 ${ 这两个字符,我不想去关心你为什么要这么写,但是你可以使用转义其中任意一个字符:`write \${  或者 $\{`。

与普通字符串不同的是,模版字符串可以写成多行:

$("#warning").html(`  <h1>Watch out!</h1>  <p>Unauthorized hockeying can result in penalties  of up to ${maxPenalty} minutes.</p>`);

在模版字符串中,所有空格、换行、缩进都是逐字输出的。

好的,就像我上篇文章所承诺的,我觉得我必须对你大脑的健康负责。所以给一个小小的警告:接下来的内容就比较费脑一点了。你可以现在就放弃阅读,喝杯咖啡享受一下,放松一下大脑。认真地说,不用为放弃下面的内容而感到羞愧噢。 当Lopes Gonçalves穿过了赤道,证明了不会被可怕的海怪吃掉或掉进地球的尽头,然后他还需要去航行整个完整的南半球来增加论证吗?不需要!他返航了,回到家吃了顿美美的午餐。换做是你也会这么做,对不对?

深入讨论“小句号”

我们来讨论一些模版字符串的局限性。

  • 它不会为你自动转义关键字。为了防止脚本注入,你需要认真小心对待那些不受信任的数据,就像你曾经小心地拼接字符串一样。
  • 它并没有明确地说明如何配合国际化库(一个针对用户所处的国家/语言不同来国际化你的代码的库)来使用。模版字符串不会处理特定语言的数字、日期等的格式化。
  • 它并不能代替像Mustache、Nunjucks这样的模板库。

模版字符串没有内置针对循环的语法——通过数组来循环生成一个HTML表格;甚至条件语句也不支持。(当然,你可以使用模版嵌套来实现,但是这样的方法太笨拙,我认为不可取。)

ES6在模版字符串中为JS开发者和库设计人员提供了一种解决方案来帮助他们处理这些局限性问题。这个特性被称做模版标记。

模版标记的语法很简单。我们只需要在“小句号”的前面加一个额外的标记。在我们接下来的第一个例子中,SaferHTML就是它的标记,我们使用这个标记来处理上面列表中的第一个局限性问题:自动转义关键字。

必须清楚SaferHTML并不是ES6标准库中的内容。在下面我们将会自己来实现它。

var message =  SaferHTML`<p>${bonk.sender} has sent you a bonk.</p>`;

这里使用了一个标识符SaferHTML来作为标记,标记也可以是一个属性——SaferHTML.escape,甚至可以是一个函数调用——SaferHTML.escape({unicodeControlCharacters: false})。(说明一下,任何ES6的MemberExpressio类或CallExpression类都可以作为标记使用)。

可以看出不含标记的模版字符串适用于简单的字符串拼接。标记模版完全适用于其它场景:如函数调用。

上面的代码与这段等效:

var message =  SaferHTML(templateData, bonk.sender);

templateData 是由模版的字符串部分所组成的不可变数组,由JS引擎为我们提供。下面是一个拥有两个元素的数组,因为在标记模板中他们被模版替换所分割,有两个字符串部分。所以templateData 应该是这个样子的: Object.freeze(["<p>", " has sent you a bonk.</p>"]。

(实际上templateData 还有一个属性。我并不打算在这篇文章中用到它,为了完整性我还是提一下: templateData.raw 是另一个囊括了标记模版中所有字符串部分的数组,它的源码就和它的名称(raw)一样原始——还保留着\n这样的转义序列,而不是被转到新的一行等。标准的String.raw使用了最原始的字符串。)

这样就给了SaferHTML函数很大的自由度,可以用很多可选的方法去解析字符串和替换字符。

现在你一定想弄清楚SaferHTML究竟是怎么实现的,或许你想亲手来尝试实现它。它终究只是个函数而已。你可以再Firefox的控制台中测试一下。

下面是其中一种方式(查看Gist上的例子)。

function SaferHTML(templateData) {  var s = templateData[0];  for (var i = 1; i < arguments.length; i++) {    var arg = String(arguments[i]);    // Escape special characters in the substitution.    s += arg.replace(/&/g, "&")            .replace(/</g, "<")            .replace(/>/g, ">");    // Don't escape special characters in the template.    s += templateData[i];  }  return s;}

定义了这个方法以后,SaferHTML`<p>${bonk.sender} has sent you a bonk.</p>`将会被解析为 "<p>ES6&lt;3er has sent you a bonk.</p>"。那么你的用户传入的值都是安全的,即使有人恶意地将bonk.sender 赋值为 "Hacker Steve <script>alert('xss');</script>",返回的也是不可执行的字符串,无论这段字符串的含义是什么,都不会有安全漏洞。

(顺便说一句,如果你觉得函数使用参数对象的方式让你感觉这样很笨重,我们下次将换用另一种方法。ES6还有另一个我认为你会喜欢的新特性。)

一个例子并不能说明标记模版的灵活性。让我们再来看看我们能为之前列出的那些模版字符串的局限性做些什么改进。

  • 模版字符串不自动转义特殊字符。但是我们已经看到了,使用标记模版我们就能解决这个问题。实际上,我们能做得更好。

从安全性的角度来看,我的SaferHTML函数功能性非常弱。HTML中不同的地方有不同的关键字需要不同的转义方式。SaferHTML把它们全部都转义,但是我们可以再付出一些努力把SaferHTML写的更精明一点,完全按照字节来解析templateData中的字符串,这样我们就知道哪些替换位是在纯HTML中;哪些是在元素属性中,这些 ‘ 和 “ 就需要转义;那些在URL查询字符串中需要使用URL转义而不是HTML转义等等。它可以准确地对每个替代位进行正确的转义。

也许你会有疑问——HTML解析效率低,这方法是不是很牵强?幸运的是标记模版的字符串部分是固定不变的。SaferHTML可以将这部分的解析结果缓存起来,这样就可以提高运行速度了。(这个缓存可以是一个WeakMap,WeakMap是ES6的新特性,我们在以后的文章中将会对它有所讨论。)

  • 模版字符串没有涉及国际化相关的特性。好在有了标记,这个问题就迎刃而解。Jack Hsu发表了一篇博客为我们迈出了这第一步。下面是一个例子:

i18n`Hello ${name}, you have ${amount}:c(CAD) in your bank account.`// => Hallo Bob, Sie haben 1.234,56 $CA auf Ihrem Bankkonto.

注意,在这个例子中name和amount是JavaScript,但是这里有一个我们不熟悉的语句——:c(CAD),Jack把它放到了模板的字符串部分。JavaScript理所当然由JavaScript引擎来处理,而字符串部分则有Jack的i18n标记来处理。我们可以从i18n的文档中知道:c(CAD)表示加拿大元,那么amount则表示了加拿大元的数额。

这就是标记模板的作用了。

  • 它并不能代替像Mustache 、Nunjucks这样的模板库,大部分原因是因为它没有内置对循环和条件句的支持。那么现在我们一起来看看如何解决这个问题,准备好了吗?

如果JS没有为我们提供某个特性,那我们就自己写一个!

// Purely hypothetical template language based on// ES6 tagged templates.var libraryHtml = hashTemplate`  <ul>    #for book in ${myBooks}      <li><i>#{book.title}</i> by #{book.author}</li>    #end  </ul>`;

它的灵活性还不止于此。记住,标记函数的参数不会自动转换为字符串。它的返回值也是这样,它们可以是任何类型,标记模版不一定是字符串!你可以使用自定义标签来创建自定义正则表达式、DOM树、图片、完整的异步流程、JS数据结构、GL着色器等等。

标记模版鼓励库开发人员去创建强大的基于特定领域的语言。这些语言看起来一点也不像JS,但是他们可以无缝地嵌入JS中并且可以智能地与其它语言进行交互。现在,我想不出其它任何有类似特性的语言,我不知道这个特性将来会给我们的开发带来什么改变,但这个改变应该是令人惊喜的。

我什么时候可以开始使用模版字符串?

在服务端,io.js已经开始支持模版字符串了。

浏览器里,FireFox 34+已经支持模版字符串。去年夏天Guptha Rajagopal已经把它作为一个实习项目。Chrome 41+也支持模板字符串,IE和Safari不支持。现在,如果你想在web项目中使用模版字符串你需要用到Babel或Traceur来支持;你也可以在TypeScript中使用。

在Markdown中可以使用吗?

嗯? 

哦……这是一个好问题。

(这一部分与JavaScript无关。如果你不使用Markdown,可以跳过这一段。)

Markdown和JavaScript都使用 ` 来作为模版字符串的特殊字符。实际上,在Markdown中

它是内联文本的定界符。

如果你在Markdown中用下面的方式来写是会有问题的:

To display a message, write `alert(`hello world!`)`.

显示的结果为:

To display a message, write alert(hello world!).

请注意,在输出中是不会有小句号的。Markdown把这个四个小句号都解释为定界符,在输出结果中被HTML标记替换掉了。

为了避免这种情况,我们一开始在Markdown就采用了一种比较少见的特性:使用多重小句号来作为代码定界符,如下:

To display a message, write ``alert(`hello world!`)``.

可以到Gist上去查看更多细节,它是由Markdown写的,你可以查看源码。

下期预告

下篇文章,我们将学习两个新特性,在其它语言中这两个特性已经被程序员们愉快地使用了几十年了:其中一个是为了那些喜欢尽量避免使用参数的开发人员准备的,另一个是给那些喜欢使用很多参数的人准备的。当然,两种特性都为我们提供了,我们可以根据个人对函数的使用习惯来选择。

这些特性可以直接在Firefox中测试,所以下次我们一起来试一下吧,我们的客座来宾Benjamin Peterson将为大家讲解ES6的default parameters和rest parameters。(译者:向渝 责编:陈秋歌)

原文链接:ES6 In Depth: Template strings

本译文遵循Creative Commons Attribution Share-Alike License v3.0 

相关阅读:

【探秘ES6】系列专栏:ES6简介

【探秘ES6】系列专栏:迭代器和for-of循环

【探秘ES6】系列专栏:生成器

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。  

在运行时动态生成多个相同的控件?-VB资料 在最小化状态时提供提示 -VB资料 暂时禁止窗口更新-VB资料 VB怎样得到文本框(TextBox)中的文本行数? 制造出透明的Form -VB资料 VB制作半透明窗体和形状不规则的窗体 VB制作方向按钮 VB制作渐变的窗口背景色 字体闪烁 -VB资料 自动改变控件大小-VB资料 自制IE风格按纽控件-VB资料 VB6.0中通过MSChart控件调用数据库 用VB6实现动态增减控件 ActiveX控件的创建-VB资料 ADO控件和DATA控件的冲突(不能共存)的解决方法-VB资料 Combo的自动查询技术 -VB资料 DirectX7.0使用心得(1) -VB资料 DirectX7.0使用心得(2) -VB资料 DirectX7.0使用心得(3) -VB资料 FSO对象模型在VB中的应用 MsComm 控件的文字传输范例 -VB资料 Office或IE4风格的ToolBar -VB资料 Regsvr32.exe注册控件的具体用法-VB资料 TextBox的自动调节 -VB资料 TextBox实现打印机效果 -VB资料 TreeView的基本操作-VB资料 VB5中DBGRID控件在VB6中使用 VB与MS-Draw开发通用作图软件 VB中APP对象及其应用 VB中list控件的功能扩充 VB中用Multimedia MCI控件开发多媒体应用 我为大家共享的资源.找我的人太多了,我吃不消.在这里列BILL.大家看看,书不算太多。 很傻的问题,在线等 ★★如何实现按一下按钮可以终止一个正在运行中的循环?请举个例子,谢谢! 谁能帮我提供一点资料或文档! 告急?(在线等待) 用正则表达式,怎么验证日期(yyyy-mm-dd)的输入啊? kao~ 请教有关MSWORD9.OLB的帮助文档是哪个? 怎样知道一个调度执行失败或没有执行???(MSSQL7)上火呀~~~ 如何将自己定义的记录类型转化成Tmemorystream对象? c++builder5的下载地址? 做个调查,来者有分。 ODBC下的数据库查询,急!急! 初学者的问题--com dll服务器如何在客户程序中使用? 如何统计 DBGrid 中记录的个数???? 请教:m_fLogfile.Read(pBuffer , sizeof(VNumAndPassWord)); 错在哪? 谁能替我做一张图片啊? 气死人了,安装红帽子在输入根口令时遇到的尴尬:( 奇怪的oracle数据库错误? 公布我的软件了——网络邮盘,国内日下载量>1000,国外<10 关于堆和栈的队! 请问,准考证的英文怎么说? ASP终极开发:请成功用INSTALLSHIELD设置好IIS的高手朋友进来看看。100分全散了!!!!! 是屏保的问题?还是硬件故障? 紧急救命啊!各位大虾:)98关机时断电出现的故障 初级问题,请教大侠 在C#里面如何取得这个SQL値那? 请教, 扫描的问题... 不好意思,还有问题,关于span,恳请高手答完再下班。 心情郁闷,各位朋友安慰我一下好么。 如何注册JDBC驱动啊!我手头好多的驱动但是我不知道如何的注册这些驱动 在RICHEDIT里怎么实现换行输出? 200分求快速取中值的算法!(thirdapple) Flash Action 如何定时,就像Javascript中的setTimeout()? 保护的问题 用一个关于Printer对象的问题?各位大虾,初来乍到,请多多关照。 请问如何自动提交一个FORM? 请问各位师兄:web开发如何起步?例如使用JSP? 求助! 如何知道电脑中的网卡是什么型号的? 大家请帮忙,兄弟必重谢,分都给了 如何制作含有msdn数据库的安装程序 Web Service服务程序如何增加对SSL的支持? 怎么還可以上網﹐向各位大蝦求救 请问如何自动提交一个FORM? 如何处理并发访问! 如何在网页中打开*.ocx组件?是否能打开? 如果给我再来一次的机会...我还是想说... 求随机数发生器的算法 高手来拿高分!!!!!!!!!求开发自定义服务器控件的好书或代码 那位有ESQL(嵌入SQL)中文资料? 如何select LONG类型的字段? 闲居初夏午睡起二绝句这两首古诗描写的时候什么时候的情景.还要有从古诗中找出的理由列出来 八下地理复习提纲 湘教版第一节 中国的主要产业第二节 沿海万里行······ for children,the important one is that of receiving gifts.其中OF是什么用法和意思? 英语翻译用中文 或罗马音 来翻译英文,如有大神音译,必定造福后人,比如学日语,不要,就是音译,牙麦迭 2011年底考四级,要怎么复习! The relation of genius to talent is the same as that of instinct to reason中that of的用法!去掉不用行么?这里是什么用法? 林俊杰的one 2011年英语四级考前如何系统复习? Is your school life that of other teens?这个句子中that是什么用法Is your school life ____ of other teens?a.this b.the same c.one d.that为什么选that啊? what's the difference between watching a movie and reading books求作文 She went to the zoo after lunch.(改为一般疑问句) A commonly held superstition is that of touching wood for luck.为什么加个of?这是什么特殊的用法吗?为什么is后面是that of touching不直接是is touching或者is that touch?到底为什么是of touching?为什么一定要加一 april that +of 是什么用法请举个例子好吗 为什么问句中glue前面是用some,而不用any april 翻译: 安徽省合肥市香樟城市花园 7栋10单元 507室 邮编241000翻译地址: 安徽省合肥市 芜宁路 香樟城市花园 7栋10单元 507室 邮编241000安徽省合肥市 镜湖区 芜宁路 香樟城市花园 7栋10单元 507 是在表请求的问句中some不用改any吗? April Fool愚人节乐一乐夫妻离婚争孩子,老婆理直气壮说:“孩子从我肚子里出来的,当然归我!”老公说:“笑话!简直是胡说八道.取款机里取出来的钱能归取款机吗?还不是谁插卡归谁! that + of 是什么用法,请举例说明 09年12月19号英语四级估分听力:短对话3个 长对话2个 听力短文理解3个 听力填词3个 听力句子0个快速阅读:填句子0个选词填空:1个仔细阅读:3个完型填空:7个翻译:0个作文中等 考四级该怎么复习 中译英,软件机器直译的勿进,地道一点1.已将化学制剂(chemical (IPA))及时清理出房间,并在房间中设置化学制剂的最大存放量(1瓶)2.增加一个可抽风的柜子去保存打印机,使其余净化间(clean 十二月19号考完四级之后多久可以拿证通过的情况下~ APRIL FOOL'S DAI 到安徽合肥肥东,哪个火车站离肥东最近交通方便,我要去肥东镇 撮镇 大丁村 马场组. 坐什么公交可以到附近.万分感谢坐什么公交,到哪个站下,然后怎么到撮镇 大丁村 马场组? 关于that of的用法They believe the data support an idea current among marine biologists,that of the "shifting baseline".这句话的意思是:在这些海生物学家中,他们相信目前的数据支持当前的想法,那就是所谓的“转 大学考英语四级.平时应该怎样复习?..考过1次了,成绩不怎么样,不知道该怎样复习,. 合肥市肥东县在哪学英语比较好 watch怎么读 Mary’s hair is longer than_____ Last year,there 15 students in our team.This year,there are 20 students in our team.(变同义句)句型转换1.___Would you mind going back to your seat?(作否定回答)___No,not ____ ____.2.I enjiy running every morning.(改同义句)I____________ 合肥肥东的变化快,急!6小时以内只要是农村的变化都可以 Sandy is ___at playing soccer than SimonA.better B .good C.wekk D.best STAY FOOL,STAY HUNGRY --- YOU'LL BE HAPPY .以前男朋友在我博客里的留言, 请教"中共合肥市直属机关工作委员会"的英文翻译 Sandy is (tall and thin).对括号部分提问.( )( )Sandy ( Sandy 后只有一个空,look like以外还能用什么好呢? 快考四级了,怎么复习?各位高手们出招吧最好具体点 合肥肥东县政府在哪怎么走都走不到 What on earth is that 与 What is that exactly (那到底是什么?) 两句一样吗? I'm not a fool,okay?someone why don't you just go to hell!You guys deserve each other!You HAPPY NOI'm not a fool,okay?someone why don't you just go to hell!You guys deserve each other!You HAPPY NOW这是完整的 过去式,some要改成any吗 侃的粤语读音?粤语怎么读 "闲居初夏午睡起二绝句"描写了什么季节?一.要长!二.不能和别人的一样!三.要两首都要回答!四.要有季节!五.分明一二两首!六.要有意思! some的过去式只要some的过去试只要答案正确, that is what I trying to do 是什么从句Jim,that is what I trying to do 是什么从句 闲居初夏午睡起二绝句描写什么时候的情景松阴一架半弓苔,偶欲看书又懒开.戏掬清泉洒蕉叶,儿童误认雨声来. do some reading 的过去式是什么? 求“数”字广州话读音. 闲居初夏午睡起二绝句描写什么时的情景,从诗中找理由 过去式的问句中前面的do变成过去式了后面的动词还要变过去式吗 闲居初夏午睡起二绝句描写了怎样的情景 This is the restaurant___we enjoyed our meal last weekA.that B.in which C.which D.in that do some shopping的过去式 侃的读音? 1.You are looking for the doctor.She is busy.2.This is our school.You visited last week.把它们改为定语从句 翻译:watch out 任务型阅读! 初二上地理晋教版复习提纲 关于watch out for和watch out 的区别?还有protect.from doing.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘