本文给大家汇总介绍了几种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. Chapter13

    package scala /** * Created by EX-CHENZECHAO001 on 2018-04-04. */class Chapter13 { // 13 集合 // 所有的集合 ...

  2. ubuntu查看系统版本和内核版本

    查看系统版本: cat /etc/issue sudo lsb_release -a 查看内核版本: uname -r

  3. python3+Appium自动化03-Appium元素检测

    需要导入方法NoSuchElementException from appium import webdriver from selenium.common.exceptions import NoS ...

  4. formatter 操作列表的合并

    {field:'22',title:'操作',width:250,align:'center',sortable:true,formatter : function(value, row, index ...

  5. 2 - Bootstrap-引导类-Bootstrap/ServerBootstrap

    2.1 ChannelOption和属性 //设置属性 bootstrap.option("xxx", 1231231); bootstrap.attr("xxx&quo ...

  6. JDK动态代理详解-依赖接口

    0. 原理分析 a). 自定义实现InvocationHandler类,实现代理类执行时的invoke方法 b). 使用Proxy.newProxyInstance生成接口的代理类(入参还包括Invo ...

  7. 打印机设置dns

    1.登录打印机网页:打印机的ip 2.点击网络--网络标识--设置DNS

  8. C#对象和集合初始值设定项

    对象初始值设定项 使用对象初始值设定项,你可以在创建对象时向对象的任何可访问字段或属性分配值,而无需调用后跟赋值语句行的构造函数. 利用对象初始值设定项语法,你可为构造函数指定参数或忽略参数(以及括号 ...

  9. angularjs $state.go页面不刷新数据

    假如进入market/beian/add添加数据,保存提交后回退market/beian列表页,没有自动更新数据,必须得手动下拉刷新才会出来 $state.go("marketBeian&q ...

  10. [luogu 1660]数位平方和

    题目描述 定义S(n)表示n的各个数位的k次方的和.定义$H(n)=min{n,S(n),H(S(n))}$. 求$$\sum _{i=A} ^{B} {H(i)} \mod 10000007$$ 输 ...