JavaScript의 문자열 연결 문제(그래픽 튜토리얼)

이 글에서는 주로 JS의 문자열 연결 문제를 소개합니다. ECMAScript에서 가장 일반적인 문제 중 하나는 문자열 연결 성능입니다. 연결 작업은 Join() 메서드가 호출될 때만 발생합니다. 관심 있는 친구는 아래의 자세한 설명을 확인하여 참고할 수 있습니다.

ECMAScript에서 가장 일반적인 문제 중 하나는 문자열 연결 성능입니다. 다른 언어와 마찬가지로 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 속성입니다. 여기에는 두 가지 메서드, 즉 add() 및 toString() 메서드만 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!