Seven methods for creating multi-line strings in javascript

JS does not have a standard multi-line string representation method, but when using a template, to ensure the readability of the template, We can inevitably use multi-line strings, so there are various ideas. Here we take a jade template as an example to briefly summarize and compare it.

I. String Addition

This is the easiest and most commonly used form, as shown below:
Copy codeThe Code is 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 '+
'A (href = "https://www.google.com/intl/en/chrome/browser/") | Chrome download' +
'Include head' +
'. Iner' +
'. Row-fluid' +
'. Span8' +
'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:

It is not a real multi-line string. If you want to really multi-line strings, you need to add \ n
A lot of plus signs look like stars, a lot of "and", ugly

Ii. Use Backlash

This is called a line break, which is not a common method. However, once used, it is still very addictive. You only need to add one character.
Copy codeThe Code is 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 \
A (href = "https://www.google.com/intl/en/chrome/browser/") | Chrome Download \
Include head \
. Container \
. Row-fluid \
. Span8 \
Block main \
Include pagerbar \
. Span4 \
Include sidebar \
Include footer \
Include script'

Advantages:

Simple: each row only needs one more \
Efficient! In most browsers, this method is the fastest,

Disadvantages:

Fatal defect. The \ of each line must not have spaces; otherwise, a direct script error occurs.
It is not a real multi-line string. If you want to really multi-line strings, you need to add \ n
Although most js engines support it, it is not part of ECMAScript.

Iii. String Array join

Copy codeThe Code is 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 ',
'A (href = "https://www.google.com/intl/en/chrome/browser/") | Chrome download ',
'Include head ',
'. Iner ',
'. Row-fluid ',
'. Span8 ',
'Block main ',
'Include pagerbar ',
'. Span4 ',
'Include sidebar ',
'Include footer ',
'Include script']. join ('\ n ');
Advantages:

True multi-line string
Easy to understand, simple, and reliable
Flexible enough to add js logic to a single string

Disadvantages:

A lot of, numbers and ', ", ugly

5. String. prototype. concat

Copy codeThe Code is as follows:
Var tmpl = String. prototype. concat. call (
'!!! 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 ',
'Include head ',
'. Iner ',
'. Row-fluid ',
'. Span8 ',
'Block main ',
'Include pagerbar ',
'. Span4 ',
'Include sidebar ',
'Include footer ',
'Include script ');

Advantages:

Not commonly used. In fact, the concat method of a string is far less commonly used than the "+" method.
Easy to understand, simple, and reliable
Flexible enough to add js logic to a single string

Disadvantages:

Not a true multi-line string
A lot of, numbers and ', ", ugly

V. heredoc

This is a very skillful solution, using the function toString Method
Copy codeThe Code is as follows:
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 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
Include head
. Container
. Row-fluid
. Span8
Block main
Include pagerbar
. Span4
Include sidebar
Include footer
Include script
*/});

Advantages:

No extra characters are required in the template string, which is clean and simple.
The true multi-line string has \ n.

Disadvantages:

Javascript logic cannot be added to a single string.
It is easily compressed by the compressed file. yui compressor can use /*! To avoid compression. uglifyjs and gcc can also use option configuration to not delete specific annotations. This is not a big problem.

Vi. coffeescript

It is equivalent to changing a language. In fact, the lack of functions in this language is a great choice to achieve it through coffeescript, a js-based compilation target language.
Copy codeThe Code is 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
A (href = "https://www.google.com/intl/en/chrome/browser/") | Chrome download
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:

Coffeescript
Coffeescript is used to write the entire file.

VII. ES6

ES6 has a new feature, Template Strings. This is the first time that multiple lines of Strings are implemented at the language level. Enable Experimental JavaScript in chrome canary can use this feature, in addition, typescript also supports this method.
Copy codeThe Code is 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
A (href = "https://www.google.com/intl/en/chrome/browser/") | Chrome download
Include head
. Container
. Row-fluid
. Span8
Block main
Include pagerbar
. Span4
Include sidebar
Include footer
Include script'
Advantages:

Easy to understand, native support
Real multi-line string

Disadvantages:
Limited JS engine support

VIII. Summary

After reading these writing methods, how can I choose? If you are using coffeescript, feel free to use the multi-line string writing supported by it. If you solve the problem of removing comments from your compressor on the client side, heredoc is recommended; if you cannot solve the problem of the compressors, use the backslash to connect, each line only needs to add one character.