前言

我们会经常遇到这样的场景,需要拼接多行字符串,在字符串中动态插入一些数据以达到业务的需求。但是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中多行字符串拼接的更多相关文章

  1. js中定义用字符串拼接起来的变量名的变量

    用对象的形式 你的问题可以通过js的对象实现 var ovar = {}; for(var i=0;i<10;i++){ ovar['var_'+i]=''; } 3用数组的形式 var arr ...

  2. 使用“\n\t”将多行字符串拼接起来

    以前js拼接字符串有好多 \n \t 不使用ES6 使用"\n\t"将多行字符串拼接起来: var roadPoem = 'Then took the other, as just ...

  3. [转]JS中对象与字符串的互相转换

    原文地址:http://www.cnblogs.com/luminji/p/3617160.html 在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: thr ...

  4. JS中对象与字符串的互相转换

    在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON ...

  5. Js中常用的字符串,数组,函数扩展

    由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展 ...

  6. 为什么阿里巴巴不建议在for循环中使用"+"进行字符串拼接

    字符串,是Java中最常用的一个数据类型了.关于字符串的知识,作者已经发表过几篇文章介绍过很多,如: Java 7 源码学习系列(一)--String 该如何创建字符串,使用" " ...

  7. 不建议在for循环中使用”+”进行字符串拼接

    https://mp.weixin.qq.com/s/qG6bdhndAip9s-_XM9oP3A 为什么阿里巴巴不建议在for循环中使用”+”进行字符串拼接 互联网后端架构 1周前    

  8. js与多行字符串

    JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 字符串相 ...

  9. js中使用进行字符串传参

    在js中拼接html标签传参时,如果方法参数是字符串需要加上引号,这里需要进行字符转义 <a href='javascript:addMenuUI("+"\"&qu ...

随机推荐

  1. Find a way HDU - 2612(bfs)

    Find a way Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. Leetcode 81. 搜索旋转排序数组 II

    题目链接 https://leetcode-cn.com/problems/search-in-rotated-sorted-array-ii/description/ 题目描述 假设按照升序排序的数 ...

  3. Leetcode 145. 二叉树的后序遍历

    题目链接 https://leetcode-cn.com/problems/binary-tree-postorder-traversal/description/ 题目描述 给定一个二叉树,返回它的 ...

  4. HDU 5536 Chip Factory Trie

    题意: 给出\(n(3 \leq n \leq 1000)\)个数字,求\(max(s_i+s_j) \bigoplus s_k\),而且\(i,j,k\)互不相等. 分析: 把每个数字看成一个\(0 ...

  5. HDU 3667 费用流 拆边 Transportation

    题意: 有N个城市,M条有向道路,要从1号城市运送K个货物到N号城市. 每条有向道路<u, v>运送费用和运送量的平方成正比,系数为ai 而且每条路最多运送Ci个货物,求最小费用. 分析: ...

  6. 【Jenskins】安装与配置

    Jenskins教程:http://www.yiibai.com/jenkins/ 一.Jenskins的安装 1.jenskins下载和启动 Jenskins下载地址:https://jenkins ...

  7. 一个通用的分页存储过程实现-SqlServer(附上sql源码,一键执行即刻搭建运行环境)

    使用前提 查询表必须有ID字段,且该字段不能重复,建议为自增主键 背景 如果使用ADO.NET进行开发,在查询分页数据的时候一般都是使用分页存储过程来实现的,本文提供一种通用的分页存储过程,只需要传入 ...

  8. eclipse中添加svn插件

    在eclipse中使用svn查看能非常方便的对代码进行查看和更新提交操作,能及时知道代码的更新状态. 在eclipse中如果要使用svn,只能使用svn插件的方式进行. 插件地址:http://sub ...

  9. hdu6038[找规律+循环节] 2017多校1

    /*hdu6038[找规律+循环节] 2017多校1*/ #include<bits/stdc++.h> using namespace std; typedef long long LL ...

  10. 【bzoj1283】序列 线性规划与费用流

    题目描述 给出一个长度为 的正整数序列Ci,求一个子序列,使得原序列中任意长度为 的子串中被选出的元素不超过K(K,M<=100) 个,并且选出的元素之和最大. 输入 第1行三个数N,m,k. ...