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`

優勢: