首页 文章,lzcTools

版权声明

本文转载自 草依山的Javascript世界,原文地址:https://jser.me/2013/08/20/javascript%E7%9A%84%E5%87%A0%E7%A7%8D%E4%BD%BF%E7%94%A8%E5%A4%9A%E8%A1%8C%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%96%B9%E5%BC%8F.html,有添改。
本文下方版权声明失效。推荐到原网页阅读,效果更佳。

用了这么久的 JS,发现居然没有多行字符串?太过分了!于是上网搜索了一下,想到做一个小工具。

工具介绍页:JS 多行字符串转换工具 - lzcJSMultipleLineString

下面先放出几种方式:

1.字符串相加

这是最容易理解也很常用的一种形式,如下

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逻辑
    缺点 :
  • 并不是真正意义上的多行字符串, 如果想要真正的多行,需要自己加n
  • 大量的+号看上去满天星,大量的'和", 丑陋

2.反斜线

这个叫续行符, 这个并非一种很常见的方式, 但是一旦用上了,还是很容易上瘾,只需要加一个字符

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'

优点:

  • 简单,每一行只需要有多一个\
  • 高效!在大部分的浏览器上,这种方式都是最快的,看这个效率对比
    缺点 :
  • 致命缺陷,每一行的必须不可以有空格,否则直接脚本错误
  • 并不是真正意义上的多行字符串, 如果想要真正的多行,需要自己加n
    尽管绝大部分的js引擎都支持它,但是它并不是ECMAScript的一部分(我并没有研究规范,这句话是从google的编码规范翻译过来的)

3.字符串数组join

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'].join('\n');

优点:

  • 真正意义上的多行字符串
  • 易理解,简单,可靠
  • 足够灵活,可以在单个字符串中添加js逻辑
    缺点 :
  • 大量的,号和'、", 丑陋

4.String.prototype.concat

var tmpl = String.prototype.concat.call(
    '!!! 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');

优点:

  • 不常用,事实上字符串的concat方法远没有+号常见
  • 易理解,简单,可靠
  • 足够灵活,可以在单个字符串中添加js逻辑
    缺点 :
  • 并不是真正意义上的多行字符串
  • 大量的,号和'、", 丑陋

5.heredoc

这是一种很有技巧的解决办法, 利用了function的toString方法

function heredoc(fn) {
    return fn.toString().split('\n').slice(1,-1).join('\n') + '\n'
}

var tmpl = heredoc(function(){/*
    !!! 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
 */});

优点:

  • 模板字符串内不必写多余的任何字符,干净,简单
  • 真正意义上的多行字符串, 有n哦
    缺点 :
  • 不可以在单个字符串中添加js逻辑
  • 容易被压缩器压缩掉,yui compressor可以通过/*!来避免被压缩掉,uglifyjs和gcc也可以通过选项配置不删除特定的注释,这个不是大问题

6.ES6

ES6的有一个新的特性,Template Strings, 这是语言层面上第一次实现了多行字符串, 在chrome canary里打开Enable Experimental JavaScript就可以使用这个特性,另外typescript也会支持这种方式

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引擎支持有限

6.总结

看了这么些写法,如何选择?如果是在客户端,同时你解决了你的压缩器去掉注释的问题,推荐使用heredoc;如果你无法解决压缩器的问题,使用反斜线连接吧,每行只需要加一个字符。




文章评论

目录