js字符串连接代码与注意事项及效率

function xntest(){
var d1=new date();
var str="";
for(var i=0;i<10000;i++){
str+="stext";
}
var d2=new date();
document.write(" 字符串拼接方式耗时:"+(d2.gettime()- d1.gettime())+"毫秒;");
d1=new date();
var sb=new array();
for(var i=0;i<10000;i++){
sb.push("stext");
}
var result=sb.tostring();
d2=new date();
document.write(" 数组方式耗时:"+(d2.gettime()- d1.gettime())+"毫秒;");
}

下面看简介应用

每次完成字符串连接都会执行步骤2到6,使得这种操作非常消耗资源。如果重复这一过程几百次,甚至几千次,就会造成性能问题。解决方法是用array对象存储字符串,然后用join()方法(参数是空字符串)创建最后的字符串。想像用下面的代码代替前面的代码:
复制代码 代码如下:

var str=new array();
str[0]="hello";
str[1]="world";
str.join("");

这样,无论在数组中引入多少字符串都不成问题,因为只在调用join()方法时才会发生连接操作。此时,执行的步骤如下:
(1) 创建存储结果的字符串。
(2) 把每个字符串复制到结果中的合适位置。
复制代码 代码如下:

function stringbuilder(){
this._string=new array();
}
stringbuilder.prototype.append=function(str){
this._string.push(str);
}
stringbuilder.prototype.tostring=function(){
return this._string.join("");
}

符串拼接的最快方法

第一种:逐个字符串相加
复制代码 代码如下:

var arr = ['item 1', 'item 2', 'item 3', ...],
list = '';
for (var i = 0, l = arr.length; i < l; i++) {
list += '<li>' + arr[i] + '';
}
list = '<ul>' + list + '</ul>';

这种最常见的,但是效率最低!代码逻辑相对来说复杂。
第二种:逐个 push 进数组
复制代码 代码如下:

var arr = ['item 1', 'item 2', 'item 3', ...],
list = [];
for (var i = 0, l = arr.length; i < l; i++) {
list[list.length] = '<li>' + arr[i] + '';
}
list = '<ul>' + list.join('') + '</ul>';

比上一种方法稍微快一些,但还是不够好…
第三种:直接join()
复制代码 代码如下:

var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

最后看看字符串联连时注意事项

尽量使用stringbuilder而不采用普通的字符串拼接方式。但是可能大部分开发者却忽略了js中也需要注意这种效率问题

时间: 2024-09-19 09:34:23

js字符串连接代码与注意事项及效率的相关文章

js字符串连接效率问题

问题描述 js字符串连接效率问题 function StringBuffer() { this.__strings__ = new Array; //这里也可以去掉括号 } StringBuffer.prototype.append = function (str) { this.__strings__.push(str); } StringBuffer.prototype.toString = function () { return this.__strings__.join(""

数组方法解决JS字符串连接性能问题有争议_javascript技巧

1.传统上,字符串连接一直是js中性能最低的操作之一. var text="Hello"; text+=" World!"; 早期浏览器没有对这种运算进行优化. 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果.频繁地在后台创建和销毁字符串导制性能异常低下. 2.发现这一点后,开发者们利用数组对象进行优化. var buffer=[],i=0; buffer[i++]="Hello";//通过相应索引值添加元素比push方法快 bu

JS 字符串连接[性能比较]_javascript技巧

一.ECMAScript的字符串是不可变的,即它们的值不能改变,因此当你写出下面的代码的时候发生了什么呢? Js代码 复制代码 代码如下: var str = "Hello "; str += "world"; 执行的步骤如下: 创建存储"Hello"的字符串 创建存储"world"的字符串 创建存储连接结果的字符串 把str的当前内容复制到结果中 把"world"复制到结果中 更新str,使它指向结果 每

再论Javascript下字符串连接的性能_javascript技巧

1 如何进行字符串连接? 首先让我们来回顾一下字符串连接的两种常用方法: 1.1 使用字符串连接运算符 常用的语言(如Java.C#.PHP等)都有字符串连接运算符,Javascript也不例外,代码示例: 复制代码 代码如下: var str = ""; str = str + "a"; 1.2 使用数组 在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串.而在

Js字符串与数组互相转换实例代码

方法说明: 1.join()方法:用于把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分隔的. 指定分隔符方法join("$");其中$可以是任意字符 2.split()方法:用于把一个字符串分割成字符串数组. stringObject.split(a,b)这是它的语法 其中a是必填项,以a为分隔符开始分割整个字符串:b不是不填项,可选.该参数可指定返回的数组的最大长度 .如果设置了该参数,返回的子串不会多于这个参数指定的数组.如果没有设置该参数,整个字符串都会被分割,不考

js冒泡法和数组转换成字符串示例代码_javascript技巧

js代码: 复制代码 代码如下: window.onload = function(){ var mian = document.getElementById( "mian" ); var mian1 = document.getElementById( "mian1" ); var str = mian.innerHTML; var arry = []; var len = str.length; for( var i = 0; i < len; i++ )

正则字符串中含有超连接代码

要判断字符串中是否有url连接代码,我们正则 @"(http|ftp|https教程)://[w]+(.[w]+)([w-.,@?・^=%&:/~+#]*[w-@?^=%&/~+#])";,下面我们用一个实例来说明. private list<string> geturlfromcontent(string content)         {             string regexstr = @"(http|ftp|https)://[

JS编程建议——36:警惕字符串连接操作(1)

建议36:警惕字符串连接操作(1)字符串连接表现出惊人的"性能紧张".一个任务通过一个循环向字符串末尾不断地添加内容,以创建一个字符串.例如,创建一个HTML 表或一个XML 文档.此类处理在一些浏览器上表现得非常糟糕.当连接少量字符串时,这些问题都可以忽略,临时使用可选择最熟悉的操作.当合并字符串的长度和数量增加之后,有些函数开始显示出"威力".(1)+.+=+.+=运算符提供了连接字符串的最简单方法.除IE 7及其以前版本外,当前所有浏览器都对这种方法优化得很好

JS编程建议——36:警惕字符串连接操作(2)

建议36:警惕字符串连接操作(2)先将两个小字符串合并起来,然后将结果返回给大字符串.创建中间字符串s1 + s2与两次复制大字符串相比,对性能的"冲击"要轻得多.(2)编译期合并在赋值表达式中所有字符串连接都属于编译期常量,Firefox自动地在编译过程中合并它们.在以下这个方法中可看到这一过程: function foldingDemo() { var str = "compile" + "time" + "folding"