源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

javascript的创建多行字符串的7种方法

  • 时间:2020-07-12 05:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript的创建多行字符串的7种方法
JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下。 [b]一、字符串相加 [/b]这是最容易理解也很常用的一种形式,如下
[url=http://windows.microsoft.com/zh-CN/internet-explorer/download-ie]    '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' +     '    include head' +     '    .container' +     '        .row-fluid' +     '            .span8' +     '                block main' +     '                include pagerbar' +     '            .span4' +     '                include sidebar' +     '    include footer' +     '    include script'
优点: 易理解,简单,可靠 足够灵活,可以在单个字符串中添加js逻辑 缺点 : 并不是真正意义上的多行字符串, 如果想要真正的多行,需要自己加\n 大量的+号看上去满天星,大量的'和", 丑陋 [b]二、使用反斜线 [/b]这个叫续行符, 这个并非一种很常见的方式, 但是一旦用上了,还是很容易上瘾,只需要加一个字符 优点: 简单,每一行只需要有多一个\ 高效!在大部分的浏览器上,这种方式都是最快的, 缺点 : 致命缺陷,每一行的\必须不可以有空格,否则直接脚本错误 并不是真正意义上的多行字符串, 如果想要真正的多行,需要自己加\n 尽管绝大部分的js引擎都支持它,但是它并不是ECMAScript的一部分 [b]三、字符串数组join[/b]
[url=http://windows.microsoft.com/zh-CN/internet-explorer/download-ie]    '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' ,     '    include head' ,     '    .container' ,     '        .row-fluid' ,     '            .span8' ,     '                block main' ,     '                include pagerbar' ,     '            .span4' ,     '                include sidebar' ,     '    include footer' ,     '    include script'].join('\n');
优点: 真正意义上的多行字符串 易理解,简单,可靠 足够灵活,可以在单个字符串中添加js逻辑 缺点 : 大量的,号和'、", 丑陋 [b]五、String.prototype.concat [/b]
优点: 不常用,事实上字符串的concat方法远没有+号常见 易理解,简单,可靠 足够灵活,可以在单个字符串中添加js逻辑 缺点 : 并不是真正意义上的多行字符串 大量的,号和'、", 丑陋 [b]五、heredoc[/b] 这是一种很有技巧的解决办法, 利用了function的toString方法
[url=http://windows.microsoft.com/zh-CN/internet-explorer/download-ie]                    a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载         include head         .container             .row-fluid                 .span8                     block main                     include pagerbar                 .span4                     include sidebar         include footer         include script  */});
优点: 模板字符串内不必写多余的任何字符,干净,简单 真正意义上的多行字符串, 有\n哦 缺点 : 不可以在单个字符串中添加js逻辑 容易被压缩器压缩掉,yui compressor可以通过/*!来避免被压缩掉,uglifyjs和gcc也可以通过选项配置不删除特定的注释,这个不是大问题 [b]六、coffeescript[/b] 相当于换了一个语言,其实这种语言上缺少的功能,通过coffeescript这种以js为编译目标的语言来实现是一种非常棒的选择。
优点: 易理解,简单,可靠 缺点 : 需要了解coffeescript 整个文件都需要用coffeescript来写 [b]七、ES6 [/b] ES6的有一个新的特性,Template Strings, 这是语言层面上第一次实现了多行字符串, 在chrome canary里打开Enable Experimental JavaScript就可以使用这个特性,另外typescript也会支持这种方式
[u]复制代码[/u] 代码如下:
var tmpl =    `!!! 5     html       include header       body         //if IE 6             .alert.alert-error                 center 对不起,我们不支持IE6,请升级你的浏览器                     a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载                     a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载         include head         .container             .row-fluid                 .span8                     block main                     include pagerbar                 .span4                     include sidebar         include footer         include script`
优点: 易理解,原生支持 真正的多行字符串 缺点 : JS引擎支持有限 [b]八、总结 [/b]看了这么些写法,如何选择?如果你用的是coffeescript,放心大胆的使用它支持的多行字符串写法;如果是在客户端,同时你解决了你的压缩器去掉注释的问题,推荐使用heredoc;如果你无法解决压缩器的问题,使用反斜线连接吧,每行只需要加一个字符。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部