JS의 세 가지 문자열 연결 방법에 대한 자세한 설명과 성능 비교

이 글에서는 JS의 세 가지 문자열 연결 방법과 성능 비교를 자세히 설명합니다.

업무상 2개 이상을 연결해야 하는 경우가 종종 있습니다. 문자열을 하나의 문자열로 연결하는 경우 JS에서 이러한 유형의 문제를 처리하는 방법에는 일반적으로 세 가지가 있습니다. 여기에서는 이를 하나씩 나열하고 성능을 구체적으로 비교합니다.

첫 번째 방법은 커넥터 "+"를 사용하여 연결할 문자열을 연결하는 것입니다.

str="a";
str+="b";

이 방법이 가장 편리하고 편리하다는 것은 의심의 여지가 없습니다. 가장 빠른 경우, 100개 미만의 문자열만 연결하는 경우 가장 편리한 방법으로 이 방법을 사용하는 것이 좋습니다.

두 번째 방법은 array를 중개자로 사용하여 문자열을 조인과 연결합니다.

var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");

w3school 웹사이트소개에 따르면 이 방법은 첫 번째 방법에 비해 리소스 소모가 적고 속도도 빠릅니다. 이것이 사실인지는 나중에 실험을 통해 확인해 보겠습니다.

세 번째 방법은 object속성을 사용하여 문자열

function stringConnect(){
    this._str_=new Array();
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join();
}
    var mystr=new stringConnect;
    mystr.append("a");
    var str=mystr.toString();

를 연결하는 것입니다. 다음을 사용하세요. 세 가지를 연결하는 코드 두 가지 방법의 성능을 비교하려면 c 값을 변경하여 연결 문자열 수를 조정합니다.

var str="";
var d1,d2;
var c=5000;//连接字符串的个数

//------------------------测试第三种方法耗费时间-------
 d1=new Date();
function stringConnect(){
    this._str_=new Array();
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join("");
}
    var mystr=new stringConnect;

    for(var i=0;i<c;i++){
        mystr.append("a");
    }
str=mystr.toString();
 d2=new Date();
 console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------

//------------------------测试第二种方法耗费时间-------
d1=new Date();
    var arr=new Array();
for(var i=0;i<c;i++){
    arr.push("a");
}
str=arr.join("");
    d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

//------------------------测试第一种方法耗费时间-------
d1=new Date();for(var i=0;i<c;i++){
    str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

c를 5000, 50000, 500000, 각각 5000000, 각 값은 각각 10회 테스트 후 최종 결과는 다음과 같습니다.

c=5000
평균 시간 소모(단위 밀리초)
세 번째 3 2 2 3 1 2 2 1 1 1 1.8
두 번째 유형 1 3 0 3 1 3 4 1 4 2 2.2
첫 번째 유형 0 0 0 0 0 1 1 1 1 1                     0.5

c=50000

세 번째 유형 22 12 9 14 12 13 13 13 10 17 13.5
두 번째 유형 8 13 12 8 11 11 8 9 8 9 9.7
첫 번째 유형 7 12 5 11 10 10 10 13 16 12 10.6

c=500000

세 번째 유형 104 70 74 69 76 77 69 102 73 73                        7 8.7
두 번째 유형 78 100 99 99 100 98 96 7 1 94 97 93.2
첫 번째 유형 90 87 83 85 85 83 84 83 88 86 85.4

c=5000000

세 번째 유형 651 871 465 444 1012 436 787 449 432 444 599.1
2차 568 842 593 747 417 747 719 549 573 563 631.8
1차 유형 516 279 616 161 466 416 201 495 510 515 417.5

5000000을 셀 때 주소 표시줄에 임의 매개변수가 추가되어 캐싱의 영향을 피할 수 있습니다. 결과로 볼 때 첫 번째 방법은 다른 두 가지 방법보다 더 많이 소비하지 않으며 훨씬 더 유리합니다. 이는 설명서의 지침과 분명히 일치하지 않습니다.

테스트 시스템: win 7 플래그십

브라우저: chrome 52.0.2739.0 m

위 내용은 JS의 세 가지 문자열 연결 방법에 대한 자세한 설명과 성능 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!