js与多行字符串

时间 2019-11-17

原文原文链接

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

字符串相加

这是最容易理解也很经常使用的一种形式，以下php

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'

优势:html

易理解，简单，可靠
足够灵活，能够在单个字符串中添加js逻辑

缺点 :java

并非真正意义上的多行字符串, 若是想要真正的多行，须要本身加\n
大量的+号看上去满天星,大量的'和", 丑陋

反斜线

这个叫续行符, 这个并不是一种很常见的方式, 可是一旦用上了，仍是很容易上瘾，只须要加一个字符git

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'

优势:es6

简单,每一行只须要有多一个\
高效！在大部分的浏览器上，这种方式都是最快的，看这个效率对比

缺点 :github

致命缺陷，每一行的\必须不能够有空格，不然直接脚本错误
并非真正意义上的多行字符串, 若是想要真正的多行，须要本身加\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');

优势:chrome

真正意义上的多行字符串
易理解，简单，可靠
足够灵活，能够在单个字符串中添加js逻辑

缺点 :typescript

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

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');

优势:windows

不经常使用，事实上字符串的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；若是你没法解决压缩器的问题，使用反斜线链接吧，每行只须要加一个字符。