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>
*/})
|
总结
方法会有很多,适合自己的,适合解决实际问题的方法才是最好的方法。
js中多行字符串拼接的更多相关文章
- js中定义用字符串拼接起来的变量名的变量
用对象的形式 你的问题可以通过js的对象实现 var ovar = {}; for(var i=0;i<10;i++){ ovar['var_'+i]=''; } 3用数组的形式 var arr ...
- 使用“\n\t”将多行字符串拼接起来
以前js拼接字符串有好多 \n \t 不使用ES6 使用"\n\t"将多行字符串拼接起来: var roadPoem = 'Then took the other, as just ...
- [转]JS中对象与字符串的互相转换
原文地址:http://www.cnblogs.com/luminji/p/3617160.html 在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: thr ...
- JS中对象与字符串的互相转换
在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON ...
- Js中常用的字符串,数组,函数扩展
由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展 ...
- 为什么阿里巴巴不建议在for循环中使用"+"进行字符串拼接
字符串,是Java中最常用的一个数据类型了.关于字符串的知识,作者已经发表过几篇文章介绍过很多,如: Java 7 源码学习系列(一)--String 该如何创建字符串,使用" " ...
- 不建议在for循环中使用”+”进行字符串拼接
https://mp.weixin.qq.com/s/qG6bdhndAip9s-_XM9oP3A 为什么阿里巴巴不建议在for循环中使用”+”进行字符串拼接 互联网后端架构 1周前
- js与多行字符串
JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 字符串相 ...
- js中使用进行字符串传参
在js中拼接html标签传参时,如果方法参数是字符串需要加上引号,这里需要进行字符转义 <a href='javascript:addMenuUI("+"\"&qu ...
随机推荐
- ACM 深度优化搜索算法小总结
深度优化搜索算法的本质:就是从一状态不断转移,如果无法转移了就需要返回上一个状态,知道找到解为止. 其核心:递归函数 基本模型: dfs(int i, int j) { //控制结束条件 //进行状态 ...
- 新游发布:《Don't touch the color》
这是笨猫工作室最后一个Scratch 2.0游戏,经过笨猫工作室成员的不懈努力,游戏终于可以稳定运行.此次更新添加了最高分数显示,优化了系统流畅度.快来试玩吧!!! 卡搭蓝链:https://kada ...
- STM8时基单元
STM8时基单元 时基单元包含: 16位向上/向下计数器 16位自动重载寄存器 重复计数器 预分频器 (图29:STM8 时基单元) 16位计数器,预分频器,自动重载寄存器和重复计数器寄存器都可以通过 ...
- body标签相关
03-body标签中相关标签 今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一 ...
- 转:GridView中RowDataBound的取值
GridView是ASP.NET中功能强大的数据显示控件,它的RowDataBound事件为我们提供了方便的控制行.列数据的途径. 要获取当前行的某个数据列,我在实践中总结有如下几种方法: 1. Ce ...
- day03_09 编码部分历史及文件编码简介
详细课件:http://www.cnblogs.com/alex3714/articles/5465198.html 字符编码 支持中文的第一张表就是GB2312 1980 gb2312 6700+ ...
- ZOJ-3956 Course Selection System,01背包!
Course Selection System 比赛的时候最后20分钟想到了是01背包,奈何没时间推出怎么背. 题意:n门课程,每门课程都有一个h值和c值,现在给出一个happy的定义,所选的课程的h ...
- POJ 2355 Railway tickets
Railway tickets Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2472 Accepted: 865 De ...
- 【bzoj4568】[Scoi2016]幸运数字 树上倍增+高斯消元动态维护线性基
题目描述 A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念碑的形式矗立在这座城市的正中心,作为城市的象征.一些旅行者希望游 ...
- [cogs729]圆桌问题(最大流)
传送门 模型 二分图多重匹配问题,可以用最大流解决. 实现 建立二分图,每个单位为X集合中的顶点,每个餐桌为Y集合中的顶点,增设附加源S和汇T. 1.从S向每个Xi顶点连接一条容量为该单位人数的有向边 ...