首页 > 代码库 > js中多行字符串拼接
js中多行字符串拼接
前言
我们会经常遇到这样的场景,需要拼接多行字符串,在字符串中动态插入一些数据以达到业务的需求。但是js中并没有标准的多行编辑的函数,于是聪明的程序员们便脑洞大开,书写出许多有趣的方法。
1
2
3
4
5
|
<div class="links">
<a href=http://www.mamicode.com/"http://qianlongo.github.io/">谦龙的博客</a>
<a href=http://www.mamicode.com/"http://aximario.github.io/">阿希的博客</a>
<a href=http://www.mamicode.com/"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>
*/})
|
总结
方法会有很多,适合自己的,适合解决实际问题的方法才是最好的方法。
js中多行字符串拼接
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。