js中多行字符串编辑，你会哪些方式

发表于   |     |   阅读次数

前言

我们会经常遇到这样的场景，需要拼接多行字符串，在字符串中动态插入一些数据以达到业务的需求。但是js中并没有标准的多行编辑的函数，于是聪明的程序员们便脑洞大开，书写出许多有趣的方法。

多行字符串拼接方式

1
2
3
4
5
<div class="links">
  <a href="http://qianlongo.github.io/">谦龙的博客</a>
  <a href="http://aximario.github.io/">阿希的博客</a>
  <a href="http://lingyu.wang/">天镶的博客</a>
</div>

对于上图的dom结构如果要在js中拼接，你会用什么组织方式呢？

1. 常规方式

1
var str = '<div class="links"><a href="http://qianlongo.github.io/">谦龙的博客</a><a href="http://aximario.github.io/">阿希的博客</a><a href="http://lingyu.wang/">天镶的博客</a></div>'

看到上面那一坨的代码，不知道您的心情是怎样的，反正我是完全没有心情看下去了，可读性太差了，于是乎为了写出可读性强的代码我们开始了下面的征程

2. 字符串相加形式

1
2
3
4
5
var str = '<div class="links">' +
	    '<a href="http://qianlongo.github.io/">谦龙的博客</a>' +
	    '<a href="http://aximario.github.io/">阿希的博客</a>' +
	    '<a href="http://lingyu.wang/">天镶的博客</a>' +
	  '</div>'

这种也许是我们用的很多的一种方式，简单灵活，可以直观地看出dom结构，但是写出来的代码犹如满天繁星一般，有些头晕目眩

3. 反斜杠

1
2
3
4
5
'<div class="links">\
  <a href="http://qianlongo.github.io/">谦龙的博客</a>\
  <a href="http://aximario.github.io/">阿希的博客</a>\
  <a href="http://lingyu.wang/">天镶的博客</a>\
</div>'

4. 数组切割方式

1
[ '<div class="links">','<a href="http://qianlongo.github.io/">谦龙的博客</a>','<a href="http://aximario.github.io/">阿希的博客</a>','<a href="http://lingyu.wang/">天镶的博客</a>','</div>'].join('\n');

5. es6 方式

es6的到来给我们带来许多新的特性，其中有一部分是关于模板字符串的，专门可以用来解决多行编辑的问题

1
2
3
4
5
`<div class="links">
  <a href="http://qianlongo.github.io/">谦龙的博客</a>
  <a href="http://aximario.github.io/">阿希的博客</a>
  <a href="http://lingyu.wang/">天镶的博客</a>
</div>`

注意第一个和最后一个” ` “符号,整段代码干净简洁，太舒服了有木有

6. 黑魔法 function.toString()

1
2
3
4
5
6
7
8
9
10
11
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/">谦龙的博客</a>
		<a href="http://aximario.github.io/">阿希的博客</a>
		<a href="http://lingyu.wang/">天镶的博客</a>
	</div>
*/})

总结

方法会有很多，适合自己的，适合解决实际问题的方法才是最好的方法。