javascript的几种使用多行字符串的方式

JS里并没有标准的多行字符串的表示方法，但是在用模板的时候，为了保证模板的可阅读性，我们又不可避免的使用多行字符串，所以出现了各种搞法，这里以一段jade的模板作为示例，简单总结和对比一下。

字符串相加

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

 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
• 大量的+号看上去满天星,大量的'和", 丑陋

反斜线

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

 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的编码规范翻译过来的)

字符串数组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逻辑

缺点 :

• 大量的,号和'、", 丑陋

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逻辑

缺点 :

• 并不是真正意义上的多行字符串
• 大量的,号和'、", 丑陋

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也可以通过选项配置不删除特定的注释，这个不是大问题

coffeescript

相当于换了一个语言，其实这种语言上缺少的功能，通过coffeescript这种以js为编译目标的语言来实现是一种非常棒的选择。

 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
     """

优点:

• 易理解，简单，可靠

缺点 :

• 需要了解coffeescript
• 整个文件都需要用coffeescript来写

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

总结

看了这么些写法，如何选择？如果你用的是coffeescript，放心大胆的使用它支持的多行字符串写法；如果是在客户端，同时你解决了你的压缩器去掉注释的问题，推荐使用heredoc；如果你无法解决压缩器的问题，使用反斜线连接吧，每行只需要加一个字符。

转帖：http://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