本文给大家汇总介绍了几种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. Clion下载安装使用教程(Win+MinGW)

    Clion Jetbrains旗下产品之一,主要用来开发C/C++,软件相比VS来说轻巧很多 一.Clion下载(Crack...) 链接:https://www.bicfic.com/ 你懂的,全英 ...

  2. 【ACM】孪生素数问题

    孪生素数问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 写一个程序,找出给出素数范围内的所有孪生素数的组数.一般来说,孪生素数就是指两个素数距离为2,近的不能再 ...

  3. 转 Mindoc搭建流程 文档多人编辑工具。

    安装方法参考: https://www.yuanmas.com/info/1bz9Y126zx.html https://www.iminho.me/version.html #step 1,安装My ...

  4. Storm概念学习系列 之数据流模型、Storm数据流模型

    不多说,直接上干货! 数据流模型 数据流模型是由数据流.数据处理任务.数据节点.数据处理任务实例等构成的一种数据模型.本节将介绍的数据流模型如图1所示. 分布式流处理系统由多个数据处理节点(node) ...

  5. (六)Redis主从自动恢复-sentinel

    原文地址,转载请注明出处: http://blog.csdn.net/qq_34021712/article/details/72026313     ©王赛超 准备工作:(1个master,2个sl ...

  6. 两道sql面试题

    两道sql面试题:    1. 数据库表A的数据如下:             year   quarter             2001      1             2001      ...

  7. ADO学习笔记之注入漏洞与参数化查询

    ADO学习笔记之注入漏洞与参数化查询 作为新手,在学习ADO程序时,使用 sql 语言查询数据时,很容易写类似如下代码: using (SqlConnection con = new SqlConne ...

  8. 谷歌地图自定义popup框

    谷歌地图的infowindow 不提供官方的定制化 <!DOCTYPE html> <html> <head> <meta name="viewpo ...

  9. pycharm 更改字体and背景颜色

    File-settings-Appearance&Behavior-Appearance-Theme File-settings-Editor-font

  10. 在MFC对话框中快速集成三维控件

    在MFC的对话框中可以方便的集成AnyCAD三维控件(c++版本),遵循一下几步: 1.在对话框资源中增加一个Static控件,ID为IDC_STATIC_3D,并且把它的Notify属性设置为Tru ...