本文给大家汇总介绍了几种javascript中字符串拼接的方法,十分的简单实用,有需要的小伙伴可以参考下。

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

如果在一行的话,可读性太差;如果换行的话,会直接报错。

现在就来介绍几个JavaScript拼接字符串的几个小技巧(主要针对字符串过长的情况)。

1. 字符串相加(+)

1
2
3
var empList = ' <li data-view-section="details">'+
      '<span>Hello world</span>'+
     '</li>';

2.利用反斜杠拼接字符串

1
2
3
var empList = ' <li data-view-section="details">\
      <span>Hello world</span>\
    </li>';

3. 利用数组拼接字符串

复制代码代码如下:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function StringBuffer(){
  this.buffer = [];
}
//将新添加的字符串添加到数组中
StringBuffer.prototype.append = function(str){
  this.buffer.push(str);
  return this;
};
//转成字符串
StringBuffer.prototype.toString = function(){
  return this.buffer.join("");
};
//用法
var buffer = new StringBuffer();
buffer.append("hello");
buffer.append(',world');
console.log(buffer.toString());

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

浅谈JavaScript字符串拼接的更多相关文章

  1. 谈JavaScript组合拼接字符串的效率 --转载

    JavaScript组合拼接字符串的效率.在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出.比如写脚本控件时控制整个控件的外观的HTML标签输出,比如AJAX里得到服务器端的回传值 ...

  2. 浅谈 js 字符串之神奇的转义

    原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...

  3. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  4. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  5. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  6. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  7. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  8. 浅谈JavaScript浮点数及其运算

    原文:浅谈JavaScript浮点数及其运算     JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...

  9. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

随机推荐

  1. JAVA四大特征:封装,继承,多态,抽象

    1,封装 将对象的属性和方法组合成一个独立的整体,隐藏实现的细节,并提供对外访问的接口. 封装的好处: (1):隐藏实现细节.好比你买了台电视机,你只需要怎么使用,并不用了解其实现原理. (2):安全 ...

  2. python3 no module named yaml

    sudo apt-get install python3-yaml

  3. 行高:line-height图文解析

    行高——line-height 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那 ...

  4. python 发布

    使用distutils.core.setup函数发布程序 将要发布的包放到mypub的目录下 在mypub目录下创建一个setup.py文件 setup.py文件的设置 from distutils. ...

  5. SpringBoot | 第九章:Mybatis-plus的集成和使用

    前言 本章节开始介绍数据访问方面的相关知识点.对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的.目前,绝大部分公司都选择MyBatis框架作为底层数据库持久化框 ...

  6. webpack webpack-dev-server报错

    Error: getaddrinfo ENOTFOUND localhost at errnoException (dns.js:28:10) at GetAddrInfoReqWrap.onlook ...

  7. gitk更改主题设置打不开

    ➜ project git:(master) gitk Error in startup script: unknown color name "lime" (processing ...

  8. sublime 主要使用方法

    ---------------最常用的1.新建文件-输入"html:xt"后 按"Ctrl+E键"或 "tab键" ,可快速生成xhtml ...

  9. pure响应式布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. 优化Linux的内核参数来提高服务器并发处理能力

    提高Linux系统下的负载能力,可以使用nginx等原生并发处理能力就很强的web服务器 使用Apache的可以启用其Worker模式,来提高其并发处理能力 修改Linux的内核相关TCP参数,来最大 ...