7 ways to create multiline strings in javascript
- 2020-03-30 02:44:13
- OfStack
JS does not have the standard method of multi-line string representation, but when using the template, in order to ensure the legibility of the template, we inevitably use multi-line string, so there are a variety of methods, here is a paragraph of jade template as an example, a simple summary and comparison.
One, string addition
This is one of the easiest to understand and most commonly used forms, as follows
var tmpl =''+
'!!! 5' +
'html' +
' include header' +
' body' +
' //if IE 6' +
' .alert.alert-error' +
' center Sorry, we don't support that IE6 Please upgrade your browser ' +
' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 The 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
Flexible enough to add js logic to a single string
Disadvantages:
It's not really a multi-line string. If you want to be really multi-line, you need to add \n
A lot of + sign looks full of stars, a lot of 'and', ugly
Use backslashes
This is called line continuation, and it's not a very common way to do it, but once you use it, it's still very addictive, just one character
var tmpl ='
!!! 5
html
include header
body
//if IE 6
.alert.alert-error
center Sorry, we don't support that IE6 Please upgrade your browser
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 The 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, only one more \ per row
Efficient! This is the fastest way on most browsers,
Disadvantages:
Join the string array
var tmpl = [
'!!! 5' ,
'html' ,
' include header' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
' center Sorry, we don't support that IE6 Please upgrade your browser ' ,
' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 The 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'].join('n');Advantages:
True multi-line string
Easy to understand, simple and reliable
Flexible enough to add js logic to a single string
Disadvantages:
Lots of horn and ', "ugly
Five, the String. The prototype. Concat
var tmpl = String.prototype.concat.call(
'!!! 5' ,
'html' ,
' include header' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
' center Sorry, we don't support that IE6 Please upgrade your browser ' ,
' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 The 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:
In fact, concat methods of strings are far less common than the + sign
Easy to understand, simple and reliable
Flexible enough to add js logic to a single string
Disadvantages:
It's not really a multi-line string
Lots of horn and ', "ugly
Five, the heredoc
This is a tricky solution, using the toString method of function
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 that IE6 Please upgrade your browser
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 The 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:
Template string does not have to write any extra characters, clean, simple
True multi-line string, with \n
Disadvantages:
You cannot add js logic to a single string
Easy to be compressed, yui compressor can be through /*! To avoid being compressed out, uglifyjs and GCC can also be configured with options that do not remove specific comments, which is not a big deal
Six, coffeescript
It is equivalent to changing a language, in fact, the lack of functionality in this language, through coffeescript such as js compilation target language to achieve a very good choice.
var tmpl = """
!!! 5
html
include header
body
//if IE 6
.alert.alert-error
center Sorry, we don't support that IE6 Please upgrade your browser
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 The 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:
You need to know about coffeescript
The entire file needs to be written in coffeescript