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

【探秘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,进行前端技术交流。  

【CTO讲堂】面对世界竞争对手,如何拿到Google PDF开源项目PDFium? 提升网站性能开发的10个技巧 SDCC 2015:顶尖技术精英云集 大会日程及首批讲师议题公布 《近匠》专访猿团创始人CEO谢恩明:梦想、未来、改变 《近匠》专访小熊尼奥:从软硬结合到IP合作,AR产品的机遇 W3C启动Web支付标准工作,推进在线结算流程 W3C中国区会员沙龙在京召开 W3C CEO Jeff分享W3C未来发展重点 【SDCC讲师专访】车轮互联总架构师韩天峰:PHP是最好的编程语言 SDCC 2015讲师专访精彩集锦(一):你想知道的,都在这! (入门篇)带你走进Erlang 【大神来了】Elixir语言设计者Jos&#233; Valim:释放Erlang VM的能量 【SDCC 2015讲师专访】刘小溪:Vert.x3的异步框架实战 【CTO讲堂】支付接入开发的陷阱有多深? 程序员界“香饽饽”、大神级别人物集体亮相——SDCC 2015编程语言专场议题曝光 【CTO沙龙】CDN在共享经济下的创新应用 深入浅出Fetch API 带你入解应用场景及适用问题 SDCC 2015讲师专访精彩集锦(二):途牛网、饿了么、快的等大牛都来了 百度、饿了么、美团专家齐聚SDCC2015,剖析前端开发核心技术 【SDCC讲师专访】百度乔刚:前端可视化难点分析及探索实践 【CTO讲堂】Growth Hacking背后,数据分析平台的架构调整 BAT、巨杉、南大、柏睿等齐聚SDCC—新一代数据库专场议题曝光! 《近匠》BeeCloud创始人黄君贤:三行代码集成支付的技术实现 【SDCC讲师专访】AdMaster技术副总裁卢亿雷:分布式数据库挑战与分析 tvOS真的代表了应用的未来吗? 使用Fetch API和ES6生成器构建异步API Android应用性能优化实践 华云数据:OpenStack的技术践行之路 【SDCC讲师专访】腾讯潘安群:腾讯云金融级数据库TDSQL分析 高颜值、高品质——安全技术论坛议题曝光! 移动应用开发者正饱受折磨 在Android平台上加载本地库的危险性 新手问题:西门子的汇编语言与Intel的汇编有什么不同? pb的发展空间还有多少,我们老总宣布pb即将下岗 关于界面的刷新的问题,大侠帮忙 如何取得程序当前运行的目录? 同一个局域网内为什么有的能上网有的不能上? 我编了一个mousemove的过程为什么在onmousemove里看不到 jsp参数传递的乱马问题 校园网查看ip的问题 tuxedo分组很有学问,分不好会死,还有内存泄露,请赐教 有关页面调度的课程设计 新手问题,在线等! 内存大小是否会影响到网络速度? 谁来救我 ,SOS,求用C语言写的编译器 修改数据出错,不知为何? 等级考试的问题 请问能不能在不同用户登陆的情况来决定服务A是否启动。 关于还原精灵转储后win98不能启动的问题,请指教!~ 今天,我终于听到项目经理的一句内心话,让我们作为程序员感到一阵阵的寒心 请教一下 dll调试问题 怎样得到OnLButtonDown的point在整个屏幕上的坐标啊?谢谢 递归调用FindFirstFile、FindNextFile、FindClose的问题 页面调度有关的课程设计 关于client端与server端的连接问题 请问能不能在不同用户登陆的情况来决定服务A是否启动。 Textbox如何禁止它记忆以前曾经输入过的值? 我的XP的CPU经常占用90%以上,高手指点. 安装完win2000,又安装了天网防火墙,再安装SQL server 2000,快完成时启动服务警告“无法定位程序输入点” 急招深圳周边(含深圳).Net程序员 ??qustion Laney(6吨大肥猫) 快来啊^@^ 有关struts的<html:text>标签的问题!!!!!!!!!!!!!!!!!!!!!!! 为了考试挑灯夜读,遇到一个菜问题请大家帮忙! 哪位高手帮帮我!时间紧急! 关于还原精灵转储后win98不能启动的问题,请指教!~ 有几张漂亮图片,看看你的计算机是怎么累死的 求C++算法代码。 怎么实现在IE中将查找到的关键字用红色标记指示出来? 求C++算法代码。 请问哪里可以下载Numega DevPartenr Studio 测试工具 ㊣㊣ 什么也不多说了,帮忙给解决这个问题吧, 先多谢了!! ㊣㊣ 有个小小问题 寻找监测某端口的数据流量软件 都市幽灵·里面一定有宝藏 非常奇怪:为什么超链接无效? 显示异常 下个星期开始到新公司了,请大家给点经验,好吗 急!jsp+mysql,急寻blob输出方法!!! 修改记录问题 StringGrid的自画 导出 急求高数同济第六版下册练习册答案,望哪位大侠成全 前不见古人,后不见来者,念天地之悠悠,下一句是什么? 忽然间明白过来适合什么成语? 公元1010年谁当皇帝? 带文口的成语 心中忽然间明白了,是什么成语 极度压抑是什么意思? 时钟从9时45分到10时05分,分针旋转了【 】度. 用成语代替全世界都知道 英语翻译先后于XX和XX月,分别以X和X为主题在xx举办会议.带领团队各邀请不同领域的5位嘉宾到场为听众传播思想,其中包括XX等;统筹会议前期准备工作,现场控制,后期善后工作,在XX各界反响强 try this one on white哪里错了 英语翻译内容是:"既然你开口叫我负责,我会负责到底的!" 现在在自学同济六版高数,感觉习题太少,请大家推荐一些习题集,练习册 try this one on white哪里错了 实矩阵A特征值为r+is,有1/2(A+A')的特征值均为实数且为b1 自学高数(同济版)有什么好的教辅书,请推荐一些!1 文在最后时能组什么成语 谁能帮忙写篇作文啊悲观主义说,这个世界有无数的墙.乐观主义说,这个世界有无数的门.现实主义说,这个世界是由无数的隔膜和沟通的门组成的.你怎么理解这三种看法?请从上面三种看法中选 无限感慨 是什么意思 甲、乙两车分别从A、B两地同时相对开出,甲车每小时行45千米,乙车从B地到A地要12小时,相遇时甲车所行的路程是乙车的4/5,求相遇时甲车行了多少千米? 谁能帮我写篇文章RT,主题是庆祝火锅店开业一周年.字数800左右. 《春》野花,眼睛,星星共同特征的词是? 前不见古人后不见来者念天地之悠悠独怆然而涕下是谁写的? 谁能帮我写篇作文啊?《爱点亮我的心灵》700字 一定是亲身经历的~ 像眼睛,像星星,还眨呀眨的.“眨呀眨的”写出了野花什么样的情态? It's small Try this pair on哪里错了 七年级下册地理的重点? 惆怅啥意思 为什么现在的小学课本都那么深. 您好,请问杭州离海宁有多远? 马哲里的时间的“一维性”和“客观性”怎么区分? 两个向量相等的条件是 什么叫结构化程序设计?它的主要内容是什么? 为什么在《算法导论》中,lg变成了以2为底?在算法导论第二版第33页说lg以2为底,lg不是以10为底么? 前不见古人 后不见来者念天地之悠悠独怆然而涕下谁写的啊在什么时候写的啊? 英语为啥这么难? 小学五年级课本 写篇英语作文should student be required to do writeen honework写篇作文 在线等 你懂得 为什么英语这么难 小学五年级课本在那? 请问刘老师,行阶梯形矩阵是不是只能由行变换得到? 为什么英语回这么难 算法导论什么时候有翻译的第三版? 求问矩阵的初等行变换是否影响其对称性?并给出证明. 为什么英语对于我来说这么难? 心急怎么找,三国演义中的三绝是谁,谢 已知矩阵B,求变换矩阵T使得(T的转置)*B*T成为对角矩阵,老师我想问一下先变行再变相应的列行不行? 世态炎凉人情冷暖世态炎凉.人情冷暖.为什么真么说 L That's an English book怎么拼写 几维的时空宇宙共有几维时空? (v-2s)/(2x-u)=(v-s)/s (u、v都是正数,且v+u≠0,求出s,并推导出1/s=(1/u)+(1/v) 坐等,三国演义中的三绝是谁,请快回答 时间和空间的讨论,这是个几维的空间?假设题:地球发射宇宙飞船去A星探索星际环境,地球距离A星的空间直线距离假定为一光年.在飞船起飞的时候就与地面进行实时传播,地面开始录制整个飞 已知圆面C:(x-a)^2+y^2 栗可以组成神马词语 一道初中语法题!麻烦详解.The teacher ,together with his students ,____ a trip to Nanjing.A have taken B are talkingC are going to take D is taking答案选的是D is taking C错在哪里?B呢? 重点论也是一元论,对吗, 长沙理工大学高数(同济第六版)下册练习册的详细答案~ 前不见古人,后不见来者,念天地之悠悠,独沧然而涕下是什么意思 3点多少分时,时针和分针离2的距离相等,并且在2的两边 上海实施油品升级全面完成沪五汽油置换中年男子躲商场男厕偷拍男人 事败后迅曼城出线在望图雷遭球迷种族歧视 俱乐范佩西或因与主帅不和被雪藏 赛前对话高校生“共享”淫秽视频 “随手之举”南京科委坦言不完全排除靠关系申请科技江苏成人高考:医学类考生考试要查指纹首尔FC主场如临大敌 恒大球迷将占到土硬顶别买中国导弹警告 已用中方导弹金正恩出席朝军2万人连长大会 发表\中印携手,印媒欢呼并警惕美国情报机构“搞砸了”奥斯卡影后赞与查尔斯王子跳舞比“亲热朝或将第四次核试 美韩揣测朝“核冒险美国“窃听门”或成欧盟峰会议题 法国第七届阿布扎比电影节开幕巴西国企独揽石油招标引抗议 政府进退央行:贷款基础利率集中报价和发布机制杜青林对西班牙进行友好访问澳首都领地同性恋合法化 或澳高等法院墨前警长向美贩毒 被判13年监禁罚款“非法集资”类罪亟须轻罪化面对道德逼捐该怎么办刘翔退役宣告一个时代终结 哽咽只因内俄航天署一日两挫折:质子火箭升空50世纪老人忆日本战时思想管制:假传教 英烘焙专家与未婚妻用食材烘焙制作当代澳小伙把世界之旅做成虚拟游戏 另类记破冰后美国乐团首访古巴 距上次近1/台湾女生游公园在野牛旁摆姿势拍照遭严“米利班德石碑”今何在?“尘封”仓库俄罗斯前“选美皇后”闹离婚 英法官““猫王”巡演大巴高价拍卖 成交价26父母监控未成年子女手机?韩国上演“家秀球技抓猛鳄 哈里王子渐摆脱“派对王美研究发现:孩子自己动手种菜有助其健厄瓜多尔创单日植树世界纪录 全民植树荷兰一大学研制出神奇水泥 开裂后能自意大利买房只需1欧元 古老小城为重新德国卡车在铁轨“卡壳”被火车撞 致两六招帮你记朋友姓名:与其长相或某名人每天坚持喝500毫升橙汁 可迅速改善
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘