JavaScript Elegant Simple stitching string

Objective

Recently maintained an old system, there is a large number of JS splicing string code, here a total of JS stitching string

JS Native string concatenation

The strings inside JavaScript can be spliced directly with +

Return "<a style= ' text-decoration:underline ' onclick= '" + valsar[1] + "return false;" + "' data-rowid= '" + row_id + "' href= ' javascript:; ' title= ' "+ valsar[0] +" > "+ valsar[0] +" </a> ";

The above is splicing a JS event with a tag, you can see the inside mixed with single quotation marks and double quotation marks, with relatively strenuous.

Because the single and double quotation marks are combined together, you can use the JS array to separate operations, and finally join up:

Data.push ("<a style= ' text-decoration:underline ' onclick= '");d Ata.push (valsar[1]);d Ata.push (' return false; '); Data.push ("' data-rowid= ');d Ata.push (row_id);d ata.push (" ' href= ' javascript:; ' title= ' ");d Ata.push (valsar[0]); Data.push (">");d ata.push (valsar[0]);d ata.push ("</a>");

This is actually not the same as the above method, just with the array will be separated by +

JS Template

All of these are older solutions, it is also laborious to use, and now are assembled with JS Template:

var strtem = "<a style= ' text-decoration:underline;color: #color # ' onclick= ' #click # return false; ' data-rowid= ' #rowId # ' href= ' javascript:; ' title= ' #title # ' > #title #</a> '; var values = {};values["color"] = color;values["click"] = valsar[1];values["title"] = valsar[0];values["rowId"] = Row_id;template (Strtem, values)

Summarize

JS splicing is now generally used template, here record the following

JavaScript Elegant Simple stitching string