javascript字符串拼接方法详解

字符串拼接在JS中是常遇到的，有时候遇到长字符串的拼接就会比较麻烦了。比如html字符串；

 代码如下 复制代码

var str = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";

var str = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";

编辑器的宽度有限，为了程度的可读性，必须对字符串进行换行处理。但如果你直接像下面这么换行，就会直接报错了。

 代码如下 复制代码

var str = "aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaa";var str = "aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaa";

这时候，你需要对字符串进行拼接处理，最基本的方法：

 代码如下 复制代码

var str = "aaaaaaaaaaaaaaaaaa" +
"aaaaaaaaaaaaaaaaaaaaaa" +
"aaaaaaaaaaaaaaaaaaaaaaa";var str = "aaaaaaaaaaaaaaaaaa" +
"aaaaaaaaaaaaaaaaaaaaaa" +
"aaaaaaaaaaaaaaaaaaaaaaa";

如果只有两三行那还好办，要有个几十行，不但费时费力，还容易出错。

字符串拼接的技巧，利用数组进行字符拼接：

 

 代码如下 复制代码
var strArr = [];
strArr.push("aaaaaaaaaaaaaaaaaa");
strArr.push("aaaaaaaaaaaaaaaaaaaaaa" );
strArr.push("aaaaaaaaaaaaaaaaaaaaaaa");
strArr.join("");var strArr = [];
strArr.push("aaaaaaaaaaaaaaaaaa");
strArr.push("aaaaaaaaaaaaaaaaaaaaaa" );
strArr.push("aaaaaaaaaaaaaaaaaaaaaaa");
strArr.join("");

这种方法减少了出错的概率，但工程量依然不小。

更方便的字符串拼接方法：
在字符串中直接换行，会产生错误，但如果在每行的后面加一个反斜杠“”就不会产生错误了；

 

 代码如下 复制代码
var str = "aaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaa";
//最后一行不需要添加反斜杠var str = "aaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaa";

//最后一行不需要添加反斜杠当然，这个方法也有一个缺点，就是每行的后面不能再进行单行注释了。

至于这几种方法之间的性能对比，我觉得不用太多考虑，除非有成千上万行的字符串拼接，否则性能差距可以忽不计；程序的可读性应放在前面。

时间： 2024-10-06 06:16:42

javascript字符串拼接方法详解的相关文章

javascript字符串连接方法详解(性能测试)

js的字符串连接有两种:用"+"连接:用array的join连接.  代码如下 复制代码 var a1=10; var a2=20; a3 = a1 + a2 //数字加数字 alert(typeof(a3)) //number alert("a1+a2="+a3) //a1+a2= 30 alert(typeof("a1+a2="+a3)) //字符串"a1+a2"加数字a3;得到的是字符串,输出string alert(&

jQ处理xml文件和xml字符串的方法(详解)_jquery

1.xml文件 <?xml version="1.0" encoding="utf-8" ?> <root> <book id="1"> <name>锋利的jQuery1</name> <author>XXX1</author> <price>250</price> </book> <book id="2&quo

javaScript数组迭代方法详解_javascript技巧

本文为大家介绍了javaScript数组迭代方法,供大家参考,具体内容如下 每个方法都接收两个参数:要在每一项上运行的函数  和  (可选的)运行该函数的作用域对象. 传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置,数组对象本身. forEach()  对数组中的每一项运行 给定函数.该方法没有返回值.every()  对数组中的每一项运行 给定函数,如果数组的每一项都返回true,则返回true.some()  对数组中的每一项运行 给定函数,如果数组的任意一项返回true

javascript 正则表达式定义方法详解

javascript中使用正则表达式有两种方式.第一种是构建一个RegExp对象:第二种是使用"//"来定义,也即perl风格.例如:  代码如下 复制代码 var str = 'http://www.111cn.net/'; var reg = new RegExp('http', 'i'); alert(reg.test(str)); 或 alert(/http/.test(str)); 上述例子就是使用两种方式判断字符串str中是否包含http,注意第二种方式 // 一定不能使用

JavaScript中借用方法详解

通过call().apply()和bind()方法,我们可轻易地借用其它对象的方法,而无须从这些对象中继承它. 在JavaScript中借用方法 在JavaScript中,有时可以重用其它对象的函数或方法,而不一定非得是对象本身或原型上定义的.通过 call().apply() 和 bind() 方法,我们可轻易地借用其它对象的方法,而无须继承这些对象.这是专业 JavaScript 开发者常用的手段. 前提 本文假设你已经掌握使用 call().apply() 和 bind() 的相关知识和它

Javascript解析URL方法详解_javascript技巧

URL : 统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成: scheme://host:port/path?query#fragment scheme  = 通信协议 (常用的http,ftp,maito等) host = 主机 (域名或IP) port = 端口号 path = 路径 query = 查询 可选,用于给动态网页(如使用CGI.ISAPI.PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数

JavaScript闭包使用方法详解

闭包就是一种在函数内访问和操作外部变量的方式,一般情况下,我们会在函数外部定义一些变量以供函数内部使用.  代码如下 复制代码 var a = 1; function fn( arg ){  var b =2;  function fnInner ( arg ){  console.log(a); //访问全局的变量  console.log(b); //访问外部函数体内的变量  console.log(arg); //访问函数自身的变量  }  fnInner(3); } fn函数的闭包引用了

Javascript 字符串对象用法详解

 代码如下 复制代码 var a = "abcDEfGgdefg32asdf38"; document.write("原始:"+a+"<br />") document.write("粗体:"+a.bold()+"<br />"); document.write("大号:"+a.big()+"<br />"); document.w

JavaScript原生对象之Date对象的属性和方法详解

 这篇文章主要介绍了JavaScript原生对象之Date对象的属性和方法详解,需要的朋友可以参考下     创建 Date 对象的语法: 代码如下: //Date 对象会自动把当前日期和时间保存为其初始值. new Date();   //value-毫秒:代表自世界协调时1970年1月1日00:00:00开始的数值. new Date(value); //dateString-日期字符串:表示日期的字符串值.此字符串应该是在parse方法中识别的格式. new Date(dateString