Multi-line string concatenation in JS

Objective

We will often encounter this scenario, we need to stitch multiple lines of string, in the string to dynamically insert some data to meet the needs of the business. However, there is no standard multi-line editing function in JS, so the Intelligent program staff will open the brain hole, writing a lot of interesting methods.

12345

<div class= "links"; <a href= "HTTP +/ qianlongo.github.io/"> Qian Long's blog </A> <a href= "HTTP +/ aximario.github.io/"> Axi's blog </A> <a href= "HTTP +/ lingyu.wang/"> Sky-Set blog </A> </DIV>

For the DOM structure if you want to splice in JS, what kind of organization would you use?

1. General mode

1	var str = ' <div class= ' links "><a href=" http://qianlongo.github.io/"> Qian Long's blog </a><a href="/http aximario.github.io/"> Axi's blog </a><a href=" http://lingyu.wang/"> Sky-Set Blog </a></div> '

See the above that a piece of code, do not know your mood is how, anyway I was completely no mood to see, readability is too poor, so in order to write a readable code we began the following journey

2. String addition form

12345

var str = ' <div class= ' links ' > ' + ' <a href= ' http://qianlongo.github.io/' > Qian Long's blog </a> ' + ' <a href= ' http://aximario.github.io/' > Axi's blog </a> ' + ' <a href= ' http://lingyu.wang/' > Sky-Set Blog </a> ' + ' </div> '

This may be a lot of the way we use, simple and flexible, you can visually see the structure of the DOM, but the code is written like a starry sky, some dizzy

3. Back slash

12345

' <div class= "links" >\<a href= "http://qianlongo.github.io/" > Qian Long's blog </a>\<a href= "http ://aximario.github.io/"> Axi blog </a>\<a href=" http://lingyu.wang/"> Sky-Set Blog </a>\</div> '

4. Array Cutting method

1	[ ' <div class= ' links > ',' <a href= ' http://qianlongo.github.io/' > Qian Long's blog </a> ',' <a href= "http://aximario.github.io/" > Axi's Blog </a> ',' <a href= ' http://lingyu.wang/' > Sky-Set Blog </a> ' ,' </div> '].join (' \ n ');

5. ES6 mode

The arrival of ES6 brings us a number of new features, some of which are about template strings and are specifically designed to solve multi-line editing issues.

12345

' <div class= ' links ><a href= "http://qianlongo.github.io/" > Qian Long's blog </a><a href= "http// aximario.github.io/"> Axi's blog </a><a href=" http://lingyu.wang/"> Sky-Set Blog </a></div> '

Note the first and last " ' " symbols, the entire code clean and concise, too comfortable there are wood

6. Black Magic function.tostring ()

1234567891011

function tosting (fn) {return fn.tostring (). Split (' \ n '). Slice (1,-1). Join (' \ n ') + ' \ n ';} Document.body.innerHTML = toString (function () {/*<div class= "Links" ><a href= "http://qianlongo.github.io/" > Qian Long's blog </a><a href= "http://aximario.github.io/" > Axi Blog </a><a href= "http://lingyu.wang/" > sky-studded blog </a></div>*/})

Summarize

There are many ways to fit your own, and the best way to solve practical problems is to do so.

Multi-line string concatenation in

JS