JavaScript における文字列連結の問題 (グラフィック チュートリアル)

この記事では主に JS における文字列接続の問題を紹介します。ECMAScript で最も一般的な問題の 1 つは文字列接続のパフォーマンスです。接続操作は、join() メソッドが呼び出された場合にのみ発生します。具体的な操作手順については、以下の詳細な説明を参照してください。

ECMAScript で最も一般的な問題の 1 つは、文字列連結のパフォーマンスです。他の言語と同様に、ECMAScript 文字列は不変です。つまり、その値は変更できません。次のコードを考えてみましょう:

var str = "hello ";
str += "world";

実際、このコードは舞台裏で次の手順を実行します:

1. "hello " を格納する文字列を作成します。
2.「world」を格納する文字列を作成します。
3. 接続結果を保存する文字列を作成します。
4. str の現在の内容を結果にコピーします。
5. 「world」を結果にコピーします。
6. 結果を指すように str を更新します。

ステップ 2 ～ 6 は文字列の連結が完了するたびに実行されるため、この操作はリソースを非常に消費します。このプロセスが何百回、場合によっては何千回も繰り返されると、パフォーマンスの問題が発生する可能性があります。解決策は、Array オブジェクトを使用して文字列を保存し、join() メソッド (パラメータは空の文字列) を使用して最終的な文字列を作成することです。前のコードを次のコードに置き換えることを想像してください:

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

この方法では、配列にどれだけ多くの文字列が導入されても、問題は発生しません。結合操作は join() の実行時にのみ発生するためです。メソッドが呼び出されます。この時点での手順は次のとおりです。
1. 結果を保存する文字列を作成します
2. 各文字列を結果内の適切な場所にコピーします

この解決策は優れていますが、より良い方法があります。問題は、このコードが意図した内容を正確に反映していないことです。理解しやすくするために、この機能を StringBuffer クラスでラップすることができます:

function StringBuffer () {
 this._strings_ = new Array();
}
StringBuffer.prototype.append = function(str) {
 this._strings_.push(str);
};
StringBuffer.prototype.toString = function() {
 return this._strings_.join("");
};

このコードで最初に注目すべきことは、プライベート属性であるはずの strings 属性です。これには、append() メソッドと toString() メソッドという 2 つのメソッドしかありません。 append() メソッドにはパラメータがあり、このパラメータを文字列配列に追加します。 toString() メソッドは配列の join メソッドを呼び出し、実際の連結された文字列を返します。 StringBuffer オブジェクトを使用して文字列のセットを連結するには、次のコードを使用できます:

var buffer = new StringBuffer ();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();

次のコードを使用して、StringBuffer オブジェクトと従来の文字列連結メソッドのパフォーマンスをテストできます:

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
 str += "text";
}
var d2 = new Date();
document.write("Concatenation with plus: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");
var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000; i++) {
 buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();
document.write("<br />Concatenation with StringBuffer: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

上記は皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

JS を使用する初心者が犯しやすい間違いは何ですか?

以上がJavaScript における文字列連結の問題 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。