推广一个良好的拼接带格式字符串的方法

带格式是指，像普通的HTML文档一样，有缩进，有换行，有空格，这种字符串更便于阅读。大家拼innerHTML的时候，巴不得越容易阅读越好。

JS拼字符串，一般喜欢用+。如果想要很多行拼在一起，且方便阅读，一般的做法是：

1 2 3 4 5 6 7 8 9 10 11 12

var  s  =  '<div class="main">'      +  '<div class="left">'      + '</div>'      + '<div class="right">${a},{{a}}'      +    '<ul>'      +        '<!-- for: ${people} as ${p} -->'      +        '<li>${p.name}</li>'      +        '<!-- /for -->'      +    '</ul>'      + '</div>' + '</div>' ;

这种已经算比较好了，但还是不够好。比如有太多的+号，有太多的”，这里的结构还算少的，要是再多的话，+和’也会更多。下面是更简洁的方式，也是我一直在用的：

1 2 3 4 5 6 7 8 9 10 11 12

var ss  =  '<!-- target:Name -->\ <div class="main">\     <div class="left"></div>\     <div class="right">${a},{{a}}\         <ul>\             <!-- for: ${people} as ${p} -->\             <li>${p.name}</li>\             <!-- /for -->\         </ul>\     </div>\ </div>\ <!-- /target -->' ;

这种方式的好处显而易见：不管字符串有多长，始终只有一对”，甚至连+都没有;效率比第1种略高。你也可以随时中断（当然，中断时就要闭合一次”）,插入变量。

这种方式要注意一点，也是实现的关键：每一行的最后，都加上转义斜线\，但没有后续字符，只有个\。（如果报语法错误，你需要看是不是某一行后面加漏了\）

这种方式也有缺点，就是生成的字符串要比上一种方法大，因为他里面的缩进是保留了的，而第一种方式实际上并没有缩进。但个人认为这个缺点远不足以抵消其优点，甚至有时候就需要保留空格呢。

最近见到一个JS经验很丰富的同事都不知道第二种方法，感叹之下发布此文。供有需者学习。