The string in JS

JS does not have a standard multi-line string representation method, but in the template, in order to ensure the readability of the template, we are inevitably using multi-line string, so there are a variety of pointers, here with a jade template as an example, a simple summary and comparison.

string addition

This is one of the most easily understood and commonly used forms, as follows

var Tmpl ="+‘!!! 5 ' +' HTML ' + ' include header ' +  ' body ' +  '//if IE 6 ' +  Alert.alert-error ' +  Center sorry, we do not support IE6, please upgrade your browser ' +  ' A (href= "Http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 official Download ' +  '. Container ' +  ' block main ' +  "include Pagerbar ' + " Span4 ' +  ' include sidebar ' +  "include footer ' +  ' include script '     

Advantages:

• Easy to understand, simple and reliable
• Flexible enough to add JS logic to a single string

Disadvantages:

• is not really a multi-line string, if you want to really multi-line, you need to add\n
• Lots of + numbers look like stars, lots of ‘ and " , ugly

Reverse Slash

This is called the continuation character, this is not a very common way, but once used, it is very addictive, only need to add a character

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‘

Advantages:

• Simple, each line needs only one more\
• Efficient! In most browsers, this is the quickest way to look at this efficiency comparison

Disadvantages:

• Fatal flaw, each line \ must not have a space, otherwise the direct script error
• is not really a multi-line string, if you want to really multi-line, you need to add\n
• Although most of the JS engines support it, it's not part of the ECMAScript (I didn't study the spec, which was translated from Google's Code specification).

String array Join

var Tmpl = [‘!!! 5 ',' HTML ',' Include header ', ' body ',  '//if IE 6 ', . Alert.alert-error ',  Center sorry, we do not support IE6, please upgrade your browser ',  ' A (href= ') Http://windows.microsoft.com/zh-CN/internet-explorer/download-ie ") | IE8 official Download ',  ' A (href= "https://www.google.com/intl/en/chrome/browser/") | Chrome Download ',  '. Container ',  Span8",  ' block main ',  ' include Pagerbar ',  ' include sidebar ',  ' include footer ',  ' include script '].join ( \ n ');               

Advantages:

• Multi-line string in the real sense
• Easy to understand, simple and reliable
• Flexible enough to add JS logic to a single string

Disadvantages:

• Lots of , numbers and ‘ , " ugly

String.prototype.concat

var Tmpl =String.prototype.concat.call (‘!!! 5 ',' HTML ', ' include header ',  ' body ',  '//if IE 6 ' ,  Center sorry, we do not support IE6, please upgrade your browser ',  ' A (href= "Http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 official Download ',  ' A (href= "https://www.google.com/intl/en/chrome/browser/") | Chrome Download ',  '. Container ',  Span8",  ' block main ',  ' include Pagerbar ',  ' include sidebar ',  "include footer ',  ' include script ');     

Advantages:

• Not commonly used, in fact the concat method of the string is far less + common
• Easy to understand, simple and reliable
• Flexible enough to add JS logic to a single string

Disadvantages:

• Not a multiline string in the real sense
• Lots of , numbers and ‘ , " ugly

Heredoc

This is a very skillful solution, using the ToString method of the function

function heredocreturn fn.tostring (). Split (1,-1). Join ( \ n '}var Tmpl = Heredoc ( function () {/*!!! 5 HTML include Header Body//if IE 6. Alert.alert-error Center Sorry, we do not support IE6, please upgrade your browser a (href= "http://windows.microsoft.com/zh-CN/ Internet-explorer/download-ie ") | IE8 official Download a (href= "https://www.google.com/intl/en/chrome/browser/") | Chrome downloads include head container. Row-fluid. SPAN8 block main include Pagerbar. Span4 include sidebar include footer inclu De script */});               

Advantages:

• The template string does not have to write any extra characters, clean, simple
• The real meaning of the multi-line string, there is \n OH

Disadvantages:

• You cannot add JS logic in a single string
• Easily compressed by the compressor, Yui compressor can be /*! avoided by the compression, UGLIFYJS and GCC can also be configured by the option to not delete specific comments, this is not a big problem

Coffeescript

The equivalent of changing a language, in fact, the lack of language features, through the coffeescript of this language to compile target JS is a very good choice.

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    """

Advantages:

• Easy to understand, simple and reliable

Disadvantages:

• Need to know Coffeescript
• The whole file needs to be written in Coffeescript.

ES6

ES6 has a new feature, Template Strings, which is the first time a multi-line string has been implemented on the language level, Enable Experimental JavaScript This feature can be used in Chrome Canary, and typescript will support this way

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`

Advantages:

• Easy to understand, native support
• True multi-line string

Disadvantages:

• JS Engine Support Limited

Summarize

Read all the writing, how to choose? If you're using Coffeescript, be sure to use the multi-line string notation that it supports, and if it is on the client side, and you solve the problem of removing comments from your compressor, it is recommended to use Heredoc; If you can't solve the problem with the compressor, use a backslash to connect it with a single character per line.

The string in JS