javascript的創建多行字串的7種方法_javascript技巧

JS裡並沒有標準的多行字串的表示方法，但是在用模板的時候，為了保證模板的可閱讀性，我們又不可避免的使用多行字符串，所以出現了各種搞法，這裡以一段jade的模板作為範例，簡單總結和對比一下。

一、字串相加

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

複製程式碼 程式碼如下:

var tmpl =''
    '!!! 5'
   include header'
    '  body'
    '    //if IE 6'
    '        center 對不起，我們不支援IE6，請升級你的瀏覽器'
    '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/down     a(href="https://www .google.com/intl/en/chrome/browser/") | Chrome下載'
    '    include head'
    '               .span8'
    '                block main'
    '             .span4'
    '                include sidebar'
  🎜>
優點:

容易理解，簡單，可靠
夠靈活，可以在單一字串中加入js邏輯

缺點 :

並不是真正意義上的多行字符串, 如果想要真正的多行，需要自己加n大量的 號看上去滿天星,大量的'和", 醜陋

二、使用反斜線

這個叫續行符, 這個並非一種很常見的方式, 但是一旦用上了，還是很容易上癮，只需要加一個字元

複製程式碼

程式碼如下:
var 5

    html      include header      body      🎜>                center 對不起，且我們不支援IE6，請升級您的瀏覽器                    a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-  a(href="https://www.google.com /intl/en/chrome/browser/") | Chrome下載        include head        .container

            .row-fluid

                .span8
                    block main
                    include pagerbar
                . span4
                    include sidebar
        
優點:

簡單,每一行只需要多一個
高效！在大部分的瀏覽器上，這種方式都是最快的，

缺點 :

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

三、字串陣列join

複製程式碼 程式碼如下:

var plh = [
' ,
    'html' ,
    '  include header',
    '  body' ,
   .alert-error' ,
'            center 對不起，我們不支持IE6，請升級你的瀏覽器' ,
    '         IE8官方下載' ,
    '                a(href="https://www.google.com/intl/en/chrome/browser/") |下載' ,    '        .row-fluid',
    '              block main' ,
    '                include p0  '                include sidebar' ,
    '    include footer' ,
    '    include script'].join('n');

優點:

真正意義上的多行字串
易理解，簡單，可靠
夠靈活，可以在單一字串中加入js邏輯

缺點 :

大量的,號和'、", 醜陋

五、String.prototype.concat

複製代碼

代碼如下:var tmpl = String.prototype.concat.call(    '!!! 5' ,    'html' ,     '    //if IE 6' ,

    '        .alert.alert-error' ,  ,

    '                a(href ="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載' ,
    '           intl/en/chrome/browser/") | Chrome下載' ,
    '    include head' ,
    '    .container' ,            .span8' ,
    '                block main',
    '              .span4' ,
    '                include sidebar 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
     🎜>            .alert.alert- error
                            , net-explorer/download-ie") | IE8官方下載
                    a(href="https://www.google.com/intl/en/ .container
            .row- fluid
                .span8
                    block main
                    include pagerbar
                .span4
                    include sidebar
        include footer
        include script
 */});


優點:

模板字串內不必寫多餘的任何字符，乾淨，簡單
真正意義上的多行字串, 有 哦

缺點 :

不可以在單一字串中加入js邏輯

容易被壓縮器壓縮掉，yui compressor可以透過/*!來避免被壓縮掉，uglifyjs和gcc也可以透過選項配置不刪除特定的註釋，這個不是大問題

六、coffeescript

相當於換了一個語言，其實這種語言上缺少的功能，透過coffeescript這種以js為編譯目標的語言來實現是一種非常棒的選擇。

複製程式碼

程式碼如下:

var tmpl = """
    !!! 5
    html
     >            .alert.alert-error
                center 對不起，我們不支援IE6，請升級你的瀏覽器
       lorer/download-ie") | IE8官方下載
                    a(href="https://www.com/intl/en/9/browser/") | tainer
            .row-fluid
               .span8
                    include pagerbar
                .span4
        include footer
        include script
    """

優點:

易理解，簡單，可靠

缺點 :

要了解coffeescript
整份文件都需要用coffeescript來寫

七、ES6

ES6的有一個新的特性，Template Strings, 這是語言層面上第一次實現了多行字串, 在chrome canary裡開啟Enable canary Experimental JavaScript就可以使用這個特性，另外typescript也會支持這種方式

複製代碼

代碼如下:

var tmpl =    `!!! 5    html      include header          .alert.alert-error

                center 對不起，我們不支援IE6，請升級你的瀏覽器

                   a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-expieg> a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下載
        include head
                      .span8
                    block main
                    include pagerbar
                .span4
                    include sidebar
        include footer
        include script`

優點:

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

缺點 :
JS引擎支援有限


八、總結

看了這麼些寫法，如何選擇？如果你用的是coffeescript，放心大膽的使用它支援的多行字串寫法；如果是在客戶端，同時你解決了你的壓縮器去掉註釋的問題，推薦使用heredoc；如果你無法解決壓縮器的問題，使用反斜線連接吧，每行只需要加一個字元。