JS下高效拼装字符串的几种方法比较与测试代码

在使用Ajax提交信息时，我可能常常需要拼装一些比较大的字符串通过XmlHttp来完成POST提交。尽管提交这样大的信息的做法看起来并不优雅，但有时我们可能不得不面对这样的需求。那么JavaScript中对字符串的累加速度如何呢？我们先来做下面的这个实验。累加一个长度为30000的字符串。
测试代码1 - 耗时: 14.325秒


代码如下:

var str = "";
for (var i = 0; i < 50000; i++) {
str += "xxxxxx";
}

这段代码耗时14.325秒，结果并不理想。现在我们将代码改为如下的形式：
测试代码2 - 耗时: 0.359秒


代码如下:

var str = "";
for (var i = 0; i < 100; i++) {
var sub = "";
for (var j = 0; j < 500; j++) {
sub += "xxxxxx";
}
str += sub;
}

这段代码耗时0.359秒！同样的结果，我们做的只是首先拼装一些较小的字符串然后再组装成更大的字符串。这种做法可以有效的在字符串拼装的后期减小内存复制的数据量。知道了这一原理之后我们还可以把上面的代码进一步拆散以后进行测试。下面的代码仅耗时0.140秒。
测试代码3 - 耗时: 0.140秒


代码如下:

var strArray = new Array();
for (var i = 0; i < 100; i++) {
var sub = "";
for (var j = 0; j < 500; j++) {
sub += "xxxxxx";
}
strArray.push(sub);
}
str = String.prototype.concat.apply("", strArray);

不过，上面这种做法也许并不是最好的！如果我们需要提交的信息是XML格式的（其实绝大多数情况下，我们都可以设法将要提交的信息组装成XML格式），我们还能找能更高效更优雅的方法—利用DOM对象为我们组装字符串。下面这段代买组装一个长度为950015的字符串仅须耗时0.890秒。
利用DOM对象组装信息 - 耗时: 0.890秒


代码如下:

var xmlDoc;
if (browserType == BROWSER_IE) {
xmlDoc = new ActiveXObject("Msxml.DOMDocument");
}
else {
xmlDoc = document.createElement("DOM");
}
var root = xmlDoc.createElement("root");
for (var i = 0; i < 50000; i++) {
var node = xmlDoc.createElement("data");
if (browserType == BROWSER_IE) {
node.text = "xxxxxx";
}
else {
node.innerText = "xxxxxx";
}
root.appendChild(node);
}
xmlDoc.appendChild(root);
var str;
if (browserType == BROWSER_IE) {
str = xmlDoc.xml;
}
else {
str = xmlDoc.innerHTML;
}

赞 (0)

相关推荐

  • JavaScript中字符串拼接的基本方法

    非常简单,就用一个"+"将两个字符串"相加": var longString = "One piece " + "plus one more piece."; 要将多个字符串累积为一个字符串,还可以使用"+="操作符: var result = ""; result += "My name is Anders" result += " and my age

  • JavaScript中使用concat()方法拼接字符串的教程

    这种方法将两个或多个字符串,并返回一个新的单字符串. 语法 string.concat(string2, string3[, ..., stringN]); 下面是参数的详细信息: string2...stringN : 这些是要连接字符串. 返回值: 返回一个连接字符串. 例子: <html> <head> <title>JavaScript String concat() Method</title> </head> <body>

  • JS 拼凑字符串的简单实例

    和Java一样,JS中直接用"+"号拼凑字符串是很耗费资源的,所以在大量拼凑字符串的情景中,我们也需要一个类似于StringBuffer的工具, 下面利用Array.join()方法实现StringBuffer function StringBuffer() { this._strs = new Array; } StringBuffer.prototype.append = function (str) { this._strs.push(str); }; StringBuffer.

  • JavaScript String(字符串)对象的简单实例(推荐)

    JavaScript String(字符串)对象的简单实例(推荐)

    返回字符串的长度: <html> <body> <script type="text/javascript"> var txt="Hello World!" document.write(txt.length) </script> </body> </html> 为字符串添加样式: <html> <body> <script type="text/java

  • JS下高效拼装字符串的几种方法比较与测试代码

    在使用Ajax提交信息时,我可能常常需要拼装一些比较大的字符串通过XmlHttp来完成POST提交.尽管提交这样大的信息的做法看起来并不优雅,但有时我们可能不得不面对这样的需求.那么JavaScript中对字符串的累加速度如何呢?我们先来做下面的这个实验.累加一个长度为30000的字符串. 测试代码1 - 耗时: 14.325秒 复制代码 代码如下: var str = ""; for (var i = 0; i < 50000; i++) { str += "xxxx

  • js中常见切割截取字符串的几种方法小结

    目录 1. split() 方法用于把一个 字符串 分割成 字符串数组 : 2. slice() 可提取字符串的某个部分,并以新的字符串返回被提取的部分: 3.substring() 提取字符串中介于两个指定下标之间的字符 4.join() 把数组中的所有元素转换一个字符串 5. charAt() 返回指定位置的字符 总结 切割截取字符串的几种方法 1. split() 方法用于把一个 字符串 分割成 字符串数组 : stringObject.split(str,length) var str

  • 详解vue.js下引入百度地图jsApi的两种方法

    前言 今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们

  • Go语言如何高效的进行字符串拼接(6种方式对比分析)

    Go语言如何高效的进行字符串拼接(6种方式对比分析)

    目录 前言 string类型 字符串拼接的6种方式及原理 原生拼接方式"+" 字符串格式化函数fmt.Sprintf Strings.builder bytes.Buffer strings.join 切片append Benchmark对比 结论 总结 前言 日常业务开发中离不开字符串的拼接操作,不同语言的字符串实现方式都不同,在Go语言中就提供了6种方式进行字符串拼接,那这几种拼接方式该如何选择呢?使用那个更高效呢?本文我们就一起来分析一下. 本文使用Go语言版本:1.17.1 s

  • JS使用正则实现去掉字符串左右空格的方法

    本文实例讲述了JS使用正则实现去掉字符串左右空格的方法.分享给大家供大家参考,具体如下: //去掉左空格 function ltrim(s) { return s.replace(/^/s*/, ""); } //去掉右空格 function rtrim(s) { return s.replace(//s*$/, ""); } //去掉左右空格 function trim(s) { return rtrim(ltrim(s)); } PS:这里再为大家提供2款非常方

  • JS中判断某个字符串是否包含另一个字符串的五种方法

    String对象的方法 方法一: indexOf()   (推荐) var str = "123" console.log(str.indexOf("2") != -1); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. 方法二:match() var str = "123" var reg = RegExp(/3/); if(str.match(reg

  • JS截取字符串的三种方法详解

    JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一个参数 alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" 使用两个参数 alert(stmp.slice(1

  • JS原生实现轮播图的几种方法

    JS原生实现轮播图的几种方法

    轮播图 主要思想就是: 在大的容器里,装着一个很长的表,表是容器宽度的整数倍. 然后通过更改列表样式里的left属性来实现左右滑动. 本文旨在控制滑动五张图片,但在html中使用了七张图片,第一张和最后一张是有重复的,至于原因会在下面解释. 通过给容器设定overflow:hidden属性来保证只显示容器视口大小的一张图片. <body> <div id="container"> /*容器*/ <div id="wrap" style=

  • CentOS下MySQL的彻底卸载的几种方法

    本文介绍了CentOS下MySQL的彻底卸载的几种方法,分享给大家,具体如下: 1:查看MySQL是否安装: 方式1: [root@localhost usr]# yum list installed mysql* Loaded plugins: fastestmirror Loading mirror speeds from cached hostfile * base: mirrors.yun-idc.com * extras: mirror.neu.edu.cn * updates: mi

  • 解析Json字符串的三种方法日常常用

    在很多时候,我们的需要将类似 json 格式的字符串数据转为json, 下面将介绍日常中使用的三种解析json字符串的方法 1.首先,我们先看一下什么是 json 格式字符串数据,很简单,就是 json 字符串化,在json 最外加单/双号变为字符串数据    var str='{"name":"Mike","sex":"女","age":"29"}'; var t2="[{n

随机推荐