javascript的創(chuàng)建多行字符串的7種方法

更新時(shí)間：2014年04月29日 09:59:17 作者：

多行字符串的作用是用來(lái)提高源代碼的可讀性.尤其是當(dāng)你處理預(yù)定義好的較長(zhǎng)字符串時(shí),把這種字符串分成多行書寫更有助于提高代碼的可讀性和可維護(hù)性.在一些語(yǔ)言中,多行字符串還可以用來(lái)做代碼注釋. 大部分動(dòng)態(tài)腳本語(yǔ)言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?

JS里并沒有標(biāo)準(zhǔn)的多行字符串的表示方法，但是在用模板的時(shí)候，為了保證模板的可閱讀性，我們又不可避免的使用多行字符串，所以出現(xiàn)了各種搞法，這里以一段jade的模板作為示例，簡(jiǎn)單總結(jié)和對(duì)比一下。

一、字符串相加

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

復(fù)制代碼代碼如下:

var tmpl =''+
    '!!! 5' +
    'html' +
    '  include header' +
    '  body' +
    '    //if IE 6' +
    '        .alert.alert-error' +
    '            center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器' +
    '                a() | IE8官方下載' +
    '                a() | Chrome下載' +
    '    include head' +
    '    .container' +
    '        .row-fluid' +
    '            .span8' +
    '                block main' +
    '                include pagerbar' +
    '            .span4' +
    '                include sidebar' +
    '    include footer' +
    '    include script'

優(yōu)點(diǎn):

易理解，簡(jiǎn)單，可靠
足夠靈活，可以在單個(gè)字符串中添加js邏輯

缺點(diǎn) :

并不是真正意義上的多行字符串, 如果想要真正的多行，需要自己加\n
大量的+號(hào)看上去滿天星,大量的'和", 丑陋

二、使用反斜線

這個(gè)叫續(xù)行符, 這個(gè)并非一種很常見的方式, 但是一旦用上了，還是很容易上癮，只需要加一個(gè)字符

復(fù)制代碼代碼如下:

var tmpl ='\
    !!! 5\
    html\
      include header\
      body\
        //if IE 6\
            .alert.alert-error\
                center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器\
                    a() | IE8官方下載\
                    a() | Chrome下載\
        include head\
        .container\
            .row-fluid\
                .span8\
                    block main\
                    include pagerbar\
                .span4\
                    include sidebar\
        include footer\
        include script'

優(yōu)點(diǎn):

簡(jiǎn)單,每一行只需要有多一個(gè)\
高效！在大部分的瀏覽器上，這種方式都是最快的，

缺點(diǎn) :

致命缺陷，每一行的\必須不可以有空格，否則直接腳本錯(cuò)誤
并不是真正意義上的多行字符串, 如果想要真正的多行，需要自己加\n
盡管絕大部分的js引擎都支持它，但是它并不是ECMAScript的一部分

三、字符串?dāng)?shù)組join

復(fù)制代碼代碼如下:

var tmpl = [
    '!!! 5' ,
    'html' ,
    '  include header' ,
    '  body' ,
    '    //if IE 6' ,
    '        .alert.alert-error' ,
    '            center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器' ,
    '                a() | IE8官方下載' ,
    '                a() | Chrome下載' ,
    '    include head' ,
    '    .container' ,
    '        .row-fluid' ,
    '            .span8' ,
    '                block main' ,
    '                include pagerbar' ,
    '            .span4' ,
    '                include sidebar' ,
    '    include footer' ,
    '    include script'].join('\n');

優(yōu)點(diǎn):

真正意義上的多行字符串
易理解，簡(jiǎn)單，可靠
足夠靈活，可以在單個(gè)字符串中添加js邏輯

缺點(diǎn) :

大量的,號(hào)和'、", 丑陋

五、String.prototype.concat

復(fù)制代碼代碼如下:

var tmpl = String.prototype.concat.call(
    '!!! 5' ,
    'html' ,
    '  include header' ,
    '  body' ,
    '    //if IE 6' ,
    '        .alert.alert-error' ,
    '            center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器' ,
    '                a() | IE8官方下載' ,
    '                a() | Chrome下載' ,
    '    include head' ,
    '    .container' ,
    '        .row-fluid' ,
    '            .span8' ,
    '                block main' ,
    '                include pagerbar' ,
    '            .span4' ,
    '                include sidebar' ,
    '    include footer' ,
    '    include script');

優(yōu)點(diǎn):

不常用，事實(shí)上字符串的concat方法遠(yuǎn)沒有+號(hào)常見
易理解，簡(jiǎn)單，可靠
足夠靈活，可以在單個(gè)字符串中添加js邏輯

缺點(diǎn) :

并不是真正意義上的多行字符串
大量的,號(hào)和'、", 丑陋

五、heredoc

這是一種很有技巧的解決辦法, 利用了function的toString方法

復(fù)制代碼代碼如下:

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 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器
                    a() | IE8官方下載
                    a() | Chrome下載
        include head
        .container
            .row-fluid
                .span8
                    block main
                    include pagerbar
                .span4
                    include sidebar
        include footer
        include script
*/});

優(yōu)點(diǎn):

模板字符串內(nèi)不必寫多余的任何字符，干凈，簡(jiǎn)單
真正意義上的多行字符串, 有\(zhòng)n哦

缺點(diǎn) :

不可以在單個(gè)字符串中添加js邏輯
容易被壓縮器壓縮掉，yui compressor可以通過(guò)/*!來(lái)避免被壓縮掉，uglifyjs和gcc也可以通過(guò)選項(xiàng)配置不刪除特定的注釋，這個(gè)不是大問(wèn)題

六、coffeescript

相當(dāng)于換了一個(gè)語(yǔ)言，其實(shí)這種語(yǔ)言上缺少的功能，通過(guò)coffeescript這種以js為編譯目標(biāo)的語(yǔ)言來(lái)實(shí)現(xiàn)是一種非常棒的選擇。

復(fù)制代碼代碼如下:

var tmpl = """ 
    !!! 5
    html
      include header
      body
        //if IE 6
            .alert.alert-error
                center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器
                    a() | IE8官方下載
                    a() | Chrome下載
        include head
        .container
            .row-fluid
                .span8
                    block main
                    include pagerbar
                .span4
                    include sidebar
        include footer
        include script
    """

優(yōu)點(diǎn):

易理解，簡(jiǎn)單，可靠

缺點(diǎn) :

需要了解coffeescript
整個(gè)文件都需要用coffeescript來(lái)寫

七、ES6

ES6的有一個(gè)新的特性，Template Strings, 這是語(yǔ)言層面上第一次實(shí)現(xiàn)了多行字符串, 在chrome canary里打開Enable Experimental JavaScript就可以使用這個(gè)特性，另外typescript也會(huì)支持這種方式

復(fù)制代碼代碼如下:

var tmpl = 
   `!!! 5
    html
      include header
      body
        //if IE 6
            .alert.alert-error
                center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器
                    a() | IE8官方下載
                    a() | Chrome下載
        include head
        .container
            .row-fluid
                .span8
                    block main
                    include pagerbar
                .span4
                    include sidebar
        include footer
        include script`

優(yōu)點(diǎn):

易理解，原生支持
真正的多行字符串

缺點(diǎn) :
JS引擎支持有限

八、總結(jié)

看了這么些寫法，如何選擇？如果你用的是coffeescript，放心大膽的使用它支持的多行字符串寫法；如果是在客戶端，同時(shí)你解決了你的壓縮器去掉注釋的問(wèn)題，推薦使用heredoc；如果你無(wú)法解決壓縮器的問(wèn)題，使用反斜線連接吧，每行只需要加一個(gè)字符。

您可能感興趣的文章: