Javascript字符串拼接小技巧(推荐)


Posted in Javascript onJune 02, 2016

在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了。

如果是在一行的,可读性差不说,如果要换行的,会直接报错。

在此介绍几种Javascript拼接字符串的技巧.

字符串相加(+)

var items = '<li class="details">' + 
      '<span>Hello world</span>' + 
      '</li>';

利用反斜线拼接字符串

var items = '<li class="details">' \ 
      '<span>Hello world</span>' \ 
      '</li>';

利用数组拼接字符串

利用数组的join方法,把数组转成字符串.

var empList = ['<li class="details">', '<span>Hello world</span>','</li>'].join("");

在数组的基础上可以封装一个StringBuffer的方法来完成字符串的拼接。

function StringBuffer(){ 
  this.buffer = []; 
} 
StringBuffer.prototype = { 
  constructor: StringBuffer, 
  append: function(str){ 
    this.buffer.push(str); 
    return this; 
  }, 
  toString: function(){ 
    return this.buffer.join(''); 
  } 
};

ES6模板字符串

ES6中引入了一种新型的字面量语法,称为模板字符串。

用反撇号`来代替原来的单引号或双引号.

$('.warning').html(` 
  <h1>Working!</h1> 
  <p>迷糊餐厅</p> 
  <p>区区一只亚麻太</p> 
`);

字符串中的换行、缩进、空格都会原样输出到新生成的字符串中。

如果想要了解字符串拼接的性能问题,推荐去看Nicholas C.Zakas的《高性能Javascript》一书

以上这篇Javascript字符串拼接小技巧(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 #Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 #Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 #Javascript
深入理解jQuery事件绑定
Jun 02 #Javascript
jQuery获取单击节点对象的方法
Jun 02 #Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 #Javascript
JavaScript核心语法总结(推荐)
Jun 02 #Javascript
You might like
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
WxPython建立批量录入框窗口
2019/02/27 Python
PyTorch基本数据类型(一)
2019/05/22 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
编写strcpy函数
2014/06/24 面试题
新闻专业应届生求职信
2013/10/31 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
会议主持人开场白台词
2015/05/28 职场文书
联村联户简报
2015/07/21 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
详解OpenCV曝光融合
2022/04/29 Python
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS