7 ways to create multiple-line strings for JavaScript _javascript tips

JS there is no standard multi-line string representation method, but in the template, in order to ensure the readability of the template, we will inevitably use multi-line strings, so there are a variety of way, here with a jade template as an example, simple summary and contrast.

The addition of a string

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

Copy Code code as follows:

var Tmpl = ' +
'!!! 5 ' +
' HTML ' +
' Include header ' +
' Body ' +
'//if IE 6 ' +
'. Alert.alert-error ' +
' Center Sorry, we don't 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, reliable
Flexible enough to add JS logic to a single string

Disadvantages:

is not really a multiline string, if you want to really multiline, you need to add \ n
Lots of + numbers look like stars, lots of ' and ', ugly

Second, use the backslash

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

Copy Code code as follows:

var Tmpl = ' \
!!! 5\
Html\
Include Header\
Body\
If IE 6\
. alert.alert-error\
Center Sorry, we don't 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\
Include script '

Advantages:

Simple, each line only needs to have more than one \
Efficient! In most browsers, this is the fastest way,

Disadvantages:

Fatal flaw, each line \ must not have spaces, otherwise direct scripting error
is not really a multiline string, if you want to really multiline, you need to add \ n
Although most JS engines support it, it's not part of the ECMAScript.

Three, string array join

Copy Code code as follows:

var Tmpl = [
'!!! 5 ',
' HTML ',
' Include header ',
' Body ',
'//if IE 6 ',
'. Alert.alert-error ',
' Center Sorry, we don't 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 ',
' Include script '].join (' \ n ');

Advantages:

Multiple lines in the true sense of the string
Easy to understand, simple, reliable
Flexible enough to add JS logic to a single string

Disadvantages:

Lots of, numbers and ', ', ugly

Five, String.prototype.concat

Copy Code code as follows:

var Tmpl = String.prototype.concat.call (
'!!! 5 ',
' HTML ',
' Include header ',
' Body ',
'//if IE 6 ',
'. Alert.alert-error ',
' Center Sorry, we don't 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 ',
' Include script ');

Advantages:

Infrequently, in fact the concat method of strings is far less common than the + number
Easy to understand, simple, reliable
Flexible enough to add JS logic to a single string

Disadvantages:

is not really a multiline string
Lots of, numbers and ', ', ugly

Five, Heredoc

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

Copy Code code 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 don't 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
Include script
*/});

Advantages:

There is no need to write any extra characters inside the template string, clean, simple
In the real sense of the multi-line string, there \ n OH

Disadvantages:

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

VI. coffeescript

The equivalent of a language, in fact, this lack of language features, through the coffeescript of JS for the purpose of compiling the language to achieve is a very good choice.

Copy Code code as follows:

var Tmpl = "" "
!!! 5
Html
Include header
Body
If IE 6
. alert.alert-error
Center Sorry, we don't 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
Include script
"""

Advantages:

Easy to understand, simple, reliable

Disadvantages:

Need to know Coffeescript
The entire file needs to be written in Coffeescript.

Seven, ES6

ES6 has a new feature, Template Strings, which is the first time a multiline string has been implemented at the language level, which can be used in Chrome canary to open the Enable experimental JavaScript. In addition, Typescript will support this approach.

Copy Code code as follows:

var Tmpl =
`!!! 5
Html
Include header
Body
If IE 6
. alert.alert-error
Center Sorry, we don't 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
Include script '

Advantages:

Easy to understand, native support
True Multiline string

Disadvantages:
JS Engine support is limited

Viii. Summary

Read all this writing, how to choose? If you're using a coffeescript, feel free to use it to support multiple lines of string writing; if it is on the client, and you solve the problem of your compressor to remove the annotation, recommend using Heredoc; If you can't solve the problem with the compressor, use a backslash to connect it, each line needs to add one character.