JavaScript 怎样js高效拼接字符串串

来源：蜘蛛抓取(WebSpider) 时间：2016-12-17 01:41 标签： 高效javascript
JavaScript字符串拼接 - 简书
JavaScript字符串拼接
写在前头:很多时候,我们在用js拼接字符串的时候,用加号,如果习惯好一点,先把字符串写好,然后在要填充的地方打一对双引号,在弄两个加号,这样就可以放上变量了,虽然这拼接的东西越来越多,字符串变得越来越复杂,一眼看不出那些引号是怎么配对的.为了解决这个问题,我在马桶上想了一坨屎的时间,我想到了printf,占位符是个不错的方式,貌似实现起来也不是很难,只要用正则和替换就可以了.
function buildString(str,paraList){
//占位符前后修饰符
var prefix="#\\{", surfix="\\}";
//正则表达式字符串
var regStr = prefix + "([^"+ surfix +"]+)" +
//新建正则表达式
var regExp = new RegExp(regStr,"mg");
if (!str){
//没有参数时返回空字符串
return "";
}else if (str && arguments.length == 1){
//只有一个参数时返回本身
}else if (arguments.length &= 2 && ((typeof paraList) == "string")){
//字符串传参数时转换参数变成数组
paraList = Array.prototype.splice.call(arguments,1);
return bulidStr(str,paraList);
//数组或对象传参数
return bulidStr(str,paraList);
//功能函数,替换并返回
function bulidStr(str,paraList){
var ret = str.replace(regExp,function(full,key){
return paraList[key];
//使用对象传参,占位符使用属性名
var id="myID",myclass="myclass";
buildString("&div id='#{id}' class='#{myclass}' &&/div&",{id:id,myclass:myclass});
//输出: "&div id='myID' class='myclass' &&/div&"
//使用数组传参,占位符使用数组下标
var id="myID",myclass="myclass";
buildString("&div id='#{0}' class='#{1}' &&/div&",[id,myclass]);
//输出: "&div id='myID' class='myclass' &&/div&"
//使用字符串传参,占位符使用下标,字符串一次传入,位置从0开始
var id="myID",myclass="myclass";
buildString("&div id='#{0}' class='#{1}' &&/div&",id,myclass);
//输出: "&div id='myID' class='myclass' &&/div&"
如果你在JSP里用这个方法,你最好换一个占位符前缀和后缀,应为jsp里#{}是有别的用处的,而{}也是需要转义的,还好选一个自己喜欢的符号并不是很难,你们就看着办吧~提高js拼接字符串效率--自定义StringBulider
我们知道java中String是引用类型，使用+=进行字符串拼接将会频繁地分配新地址，指向新的地址块，这无疑白白地消耗了的性能。javascript中的字符串类型同java的String类似，如果我们大量使用+=进行字符串拼接的话，将会使界面失去响应(卡死状态)。
无论是java还是.net 中都有提供StringBuffer()或StringBuilder() 的方法来实现大数据量拼接效率问题，那javascript呢？它是如何解决此问题的呢？其实javascript中可以使用数组来提高拼接的效率，通过数组的push()方法来添加数据，使用数组的join()方法来转成成字符串。
&script type="text/javascript"&
var strArr = new Array();
strArr.push("aaaa");
strArr.push("bbbb");
strArr.push("ccccc");
alert(strArr.join(' '));
此种方法可以大大提高拼接的效率，但是它有个小小的问题，就是不能连续地push，例如这样的: strArr.push("aaa").push("bbb").push("ccc"); ,它就实现不了，不符合我们的习惯，所以我们自己封装了个StringBuffer的js类，让编程更easy!
* @Description: 字符串拼接
* @CreateTime:
下午2:42:35
* @author: chenzw
* @version V1.0
function StringBulider() {
this.data = new Array();
* 拼接字符串,可以连续拼接
* @return {}
StringBulider.prototype.append = function(){
this.data.push(arguments[0]);
* 转成字符串输出
* @return {}
StringBulider.prototype.toString = function(){
if(arguments.length > 0){
return this.data.join(arguments[0]);
return this.data.join('');
* 判断字符串数组是否为空
* @return {}
StringBulider.prototype.isEmpty =
function(){
return this.data.length <=0;
* 清空字符串数组
StringBulider.prototype.clear = function(){
this.data = [];
this.data.length = 0;
* 测试数据
var sb = new StringBulider();
sb.append("a").append("b").append("c").append("d");
alert(sb.toString(',')); //结果: a,b,c,d
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'

我要回帖

更多关于 高效javascript 的文章

 

随机推荐