javascriptの何種類かは複数行の文字列を使う方式です.

19446 ワード

JavaScript

JSには標準的な複数行の文字列の表示方法はありませんが、テンプレートを使う時に、テンプレートの読める性を保証するために、複数行の文字列を使用することは避けられないので、いろいろなやり方があります.ここではjadeのテンプレートを例として、簡単にまとめて比較してみます.
文字列加算
これは一番分かりやすくて、よく使われている形式です.

 1 var tmpl =''+

 2     '!!! 5' +

 3     'html' +

 4     '  include header' +

 5     '  body' +

 6     '    //if IE 6' +

 7     '        .alert.alert-error' +

 8     '            center    ，     IE6，        ' +

 9     '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8    ' +

10     '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome  ' +

11     '    include head' +

12     '    .container' +

13     '        .row-fluid' +

14     '            .span8' +

15     '                block main' +

16     '                include pagerbar' +

17     '            .span4' +

18     '                include sidebar' +

19     '    include footer' +

20     '    include script'

利点:

分かりやすく、簡単で、信頼性が高いです.

は十分に柔軟であり、個々の文字列にjs論理

を追加することができる.
短所:

は本当の意味での複数行の文字列ではありません.本当の複数行がほしいなら、自分で

を追加する必要があります.

の大量の+号は満天の星に見えて、大量の'と"、醜い

.
バックスラッシュ
これは継続符といいます.これはあまり一般的な方法ではありませんが、一度使ったら癖になりやすいです.ただ1文字を追加してください.

 1 var tmpl ='\

 2     !!! 5\

 3     html\

 4       include header\

 5       body\

 6         //if IE 6\

 7             .alert.alert-error\

 8                 center    ，     IE6，        \

 9                     a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8    \

10                     a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome  \

11         include head\

12         .container\

13             .row-fluid\

14                 .span8\

15                     block main\

16                     include pagerbar\

17                 .span4\

18                     include sidebar\

19         include footer\

20         include script'

利点:

は簡単です.各ラインにはもう一つの\

が必要です.

高効率!ほとんどのブラウザでこの方法が一番早いです.これを見てください.効率比較

.
短所:

致命的な欠陥、各行の\はスペースがあってはいけません.そうでなければ、直接スクリプトエラー

は本当の意味での複数行の文字列ではありません.本当の複数行がほしいなら、自分で

を追加する必要があります.

はほとんどのjsエンジンがサポートしていますが、ECMAScriptの一部ではありません.
文字列配列

 1 var tmpl = [

 2     '!!! 5' ,

 3     'html' ,

 4     '  include header' ,

 5     '  body' ,

 6     '    //if IE 6' ,

 7     '        .alert.alert-error' ,

 8     '            center    ，     IE6，        ' ,

 9     '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8    ' ,

10     '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome  ' ,

11     '    include head' ,

12     '    .container' ,

13     '        .row-fluid' ,

14     '            .span8' ,

15     '                block main' ,

16     '                include pagerbar' ,

17     '            .span4' ,

18     '                include sidebar' ,

19     '    include footer' ,

20     '    include script'].join('
');

利点:

本当の意味での複数行の文字列

分かりやすく、簡単で、信頼性が高いです.

は十分に柔軟であり、個々の文字列にjs論理

を追加することができる.
短所:

の大量の,号と'、"、丑い

String.prototype.co ncat

 1 var tmpl = String.prototype.concat.call(

 2     '!!! 5' ,

 3     'html' ,

 4     '  include header' ,

 5     '  body' ,

 6     '    //if IE 6' ,

 7     '        .alert.alert-error' ,

 8     '            center    ，     IE6，        ' ,

 9     '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8    ' ,

10     '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome  ' ,

11     '    include head' ,

12     '    .container' ,

13     '        .row-fluid' ,

14     '            .span8' ,

15     '                block main' ,

16     '                include pagerbar' ,

17     '            .span4' ,

18     '                include sidebar' ,

19     '    include footer' ,

20     '    include script');

利点:

は一般的ではありません.実は文字列のconcat方法は+号の一般

より遠いです.

分かりやすく、簡単で、信頼性が高いです.

は十分に柔軟であり、個々の文字列にjs論理

を追加することができる.
短所:

は、本当の意味での複数行の文字列

ではない.

の大量の,号と'、"、丑い

herdoc
これは非常に技巧的な解決方法で、functionのtoString方法を利用しました.

 1 function heredoc(fn) {

 2     return fn.toString().split('
').slice(1,-1).join('
') + '
'

 3 }

 4 

 5 var tmpl = heredoc(function(){/*

 6     !!! 5

 7     html

 8       include header

 9       body

10         //if IE 6

11             .alert.alert-error

12                 center    ，     IE6，        

13                     a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8    

14                     a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome  

15         include head

16         .container

17             .row-fluid

18                 .span8

19                     block main

20                     include pagerbar

21                 .span4

22                     include sidebar

23         include footer

24         include script

25  */});

利点:

テンプレート文字列には、余分な文字は書かなくても大丈夫です.きれいで、簡単な

です.

本当に意味上の複数行の文字列は、

ああ

があります.
短所:

は、単一の文字列にjs論理

を追加してはいけません.

は圧縮器によって圧縮されやすく、yui copress orは/*!によって圧縮されないようにすることができ、googleのコード規範及びglifyjsは特定の注釈を削除しないようにオプション構成することもでき、これは大きな問題ではない.
coffeescript
言語を変えたということに相当しますが、このような言語にはない機能は、gccというjsをコンパイルの目的とする言語によって実現されるという素晴らしい選択です.

 1 var tmpl = """ 

 2     !!! 5

 3     html

 4       include header

 5       body

 6         //if IE 6

 7             .alert.alert-error

 8                 center    ，     IE6，        

 9                     a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8    

10                     a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome  

11         include head

12         .container

13             .row-fluid

14                 .span8

15                     block main

16                     include pagerbar

17                 .span4

18                     include sidebar

19         include footer

20         include script

21     """

利点:

分かりやすく、簡単で、信頼性が高いです.
短所:

coffeescript

を知る必要があります.

全体のファイルは、coffeescriptで

を書く必要があります.
ES 6
ES 6は新しい特性を持っています.coffeescriptは言語レベルで初めて複数行の文字列を実現しました.Template StringsでEnable Experimental JavaScriptを開けばこの特性を使用できます.また、chrome canaryもこのような方式をサポートします.

 1 var tmpl = 

 2    `!!! 5

 3     html

 4       include header

 5       body

 6         //if IE 6

 7             .alert.alert-error

 8                 center    ，     IE6，        

 9                     a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8    

10                     a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome  

11         include head

12         .container

13             .row-fluid

14                 .span8

15                     block main

16                     include pagerbar

17                 .span4

18                     include sidebar

19         include footer

20         include script`

利点:

分かりやすく、元のサポート

本当に多行文字列

短所:

JSエンジンサポート有限

締め括りをつける
このような書き方を見ましたが、どうやって選びますか?あなたがcoffeescriptを使うなら、安心して大胆にそれの支持する複数行の文字列の書き方を使います.クライアントであれば、コメントを削除するための圧縮器の問題を解決します.heedocを使用することをオススメします.圧縮器の問題が解決できない場合は、反対の斜線で接続してください.行ごとに文字を追加するだけです.

スレッド: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

javascriptにおける可変値と可変値(元の値)