JSにおける3つの文字列接続方法の詳細説明とその性能比較

この記事では、JSの3つの文字列接続メソッドとそのパフォーマンスの比較について詳しく説明します

仕事では、JSで扱われる2つ以上の文字列を1つの文字列に連結するという問題によく遭遇します。通常は3つありますここでは、この種の問題に対するメソッドを 1 つずつリストし、そのパフォーマンスの具体的な比較も行います。

最初の方法は、接続する文字列を接続するためにコネクタ「+」を使用することです:

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

100 個未満の文字列のみを接続する場合は、この方法が最も便利で高速であることは間違いありません。を推奨します この方法が最も便利です。

2 番目のメソッドは、array を仲介として使用し、結合を使用して文字列を接続します。

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

w3school の Web サイト Introduction には、このメソッドは最初のメソッドより消費するリソースが少なく、高速であると記載されています。そうなるかどうか実験を通じて検証してください。

3 番目のメソッドは、objectproperties を使用して文字列を接続します

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();

次のコードを使用して 3 つのメソッドのパフォーマンスを比較し、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());
//-------------------------------------------------------

-5000、50000、500,000、および5000000をそれぞれ調整し、各値はそれぞれ10倍測定されます。 12 9 14 12 13 13 13 10 17 13.52 番目の 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
3型 104 70 74 69 76 77 69 102 73 73 78.7

2番目 78 100 99 99 100 98 96 71 94 97 93.2

最初のタイプ 90 87 83 85 85 83 84 83 88 85.4

c=5000000

3 番目の種類 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

最初のタイプ 516 279 616 161 466 416 201 95 510 515 417.5

5000000 をカウントするときに、キャッシュの影響を回避するためのランダムなパラメータがアドレスバーに追加されました。結果から判断すると、最初の方法は他の 2 つの方法よりも消費量が少なく、明らかにマニュアルの指示と矛盾しています。

テストシステム: win 7 フラッグシップ

ブラウザ: chrome 52.0.2739.0 m

以上がJSにおける3つの文字列接続方法の詳細説明とその性能比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。