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 ...
随机推荐
- Find a way HDU - 2612(bfs)
Find a way Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- Leetcode 81. 搜索旋转排序数组 II
题目链接 https://leetcode-cn.com/problems/search-in-rotated-sorted-array-ii/description/ 题目描述 假设按照升序排序的数 ...
- Leetcode 145. 二叉树的后序遍历
题目链接 https://leetcode-cn.com/problems/binary-tree-postorder-traversal/description/ 题目描述 给定一个二叉树,返回它的 ...
- HDU 5536 Chip Factory Trie
题意: 给出\(n(3 \leq n \leq 1000)\)个数字,求\(max(s_i+s_j) \bigoplus s_k\),而且\(i,j,k\)互不相等. 分析: 把每个数字看成一个\(0 ...
- HDU 3667 费用流 拆边 Transportation
题意: 有N个城市,M条有向道路,要从1号城市运送K个货物到N号城市. 每条有向道路<u, v>运送费用和运送量的平方成正比,系数为ai 而且每条路最多运送Ci个货物,求最小费用. 分析: ...
- 【Jenskins】安装与配置
Jenskins教程:http://www.yiibai.com/jenkins/ 一.Jenskins的安装 1.jenskins下载和启动 Jenskins下载地址:https://jenkins ...
- 一个通用的分页存储过程实现-SqlServer(附上sql源码,一键执行即刻搭建运行环境)
使用前提 查询表必须有ID字段,且该字段不能重复,建议为自增主键 背景 如果使用ADO.NET进行开发,在查询分页数据的时候一般都是使用分页存储过程来实现的,本文提供一种通用的分页存储过程,只需要传入 ...
- eclipse中添加svn插件
在eclipse中使用svn查看能非常方便的对代码进行查看和更新提交操作,能及时知道代码的更新状态. 在eclipse中如果要使用svn,只能使用svn插件的方式进行. 插件地址:http://sub ...
- hdu6038[找规律+循环节] 2017多校1
/*hdu6038[找规律+循环节] 2017多校1*/ #include<bits/stdc++.h> using namespace std; typedef long long LL ...
- 【bzoj1283】序列 线性规划与费用流
题目描述 给出一个长度为 的正整数序列Ci,求一个子序列,使得原序列中任意长度为 的子串中被选出的元素不超过K(K,M<=100) 个,并且选出的元素之和最大. 输入 第1行三个数N,m,k. ...