자바스크립트에서 문자열을 연결하는 가장 효율적인 방법은?

자바스크립트에서 문자열을 연결하는 가장 효율적인 방법은?

자바스크립트에서 나는 반복이 많은 루프를 가지고 있고, 각각의 반복에서 나는 많은 것들로 거대한 문자열을 만들고 있습니다.+=연산자문자열을 만드는 더 효율적인 방법이 있습니까?저는 동적 배열을 만들어서 문자열을 계속 추가하고 조인을 하는 것에 대해 생각하고 있었습니다.누가 가장 빠른 방법을 설명하고 예를 들어줄 수 있습니까?

JSPerf의 벤치마크를 기반으로 함+=모든 브라우저에서 사용할 수 있는 것은 아니지만 가장 빠른 방법입니다.

DOM에서 문자열을 빌드하는 경우, 반복적으로 돔에 추가하는 것보다 먼저 문자열을 연결한 다음 DOM에 추가하는 것이 더 나은 것 같습니다.하지만 당신은 당신 자신의 사례를 벤치마킹해야 합니다.

(수정에 대해 @zAlbee에게 감사합니다)

연결 자체에 대한 언급은 없지만, @Jakub Hampl의 제안을 지적하고 싶습니다.

DOM에서 문자열을 빌드하는 경우에는 큰 문자열을 한 번에 추가하는 것보다 DOM에 반복적으로 추가하는 것이 더 나을 수 있습니다.

잘못된 것입니다. 결함이 있는 테스트를 기반으로 하기 때문입니다.그 테스트는 실제로 DOM에 포함되지 않습니다.

이 고정 테스트는 문자열을 렌더링하기 전에 한 번에 만드는 것이 훨씬 더 빠르다는 것을 보여줍니다.대회도 아니고요.

(죄송하지만 이것은 별도의 답변이지만, 저는 아직 답변에 대해 의견을 말할 수 있는 담당자가 충분하지 않습니다.)

이 질문에 대답한 지 3년이 지났지만 어쨌든 제 대답을 하겠습니다 :)

사실, 받아들여진 답이 완전히 정확한 것은 아닙니다.Jakub의 테스트는 JS 엔진이 코드 실행을 최적화할 수 있도록 하드 코딩된 문자열을 사용합니다. (Google의 V8은 이런 것에 정말 좋습니다!)그러나 완전히 임의의 문자열(여기는 JSPerf)을 사용하는 즉시 문자열 연결이 두 번째 위치에 배치됩니다.

노드와 크롬 모두에서 빠른 테스트를 해보니 두 케이스 모두에서 발견되었습니다.+=더 빠름:

var profile = func => { 
    var start = new Date();
    for (var i = 0; i < 10000000; i++) func('test');
    console.log(new Date() - start);
}
profile(x => "testtesttesttesttest");
profile(x => `${x}${x}${x}${x}${x}`);
profile(x => x + x + x + x + x );
profile(x => { var s = x; s += x; s += x; s += x; s += x; return s; });
profile(x => [x, x, x, x, x].join(""));
profile(x => { var a = [x]; a.push(x); a.push(x); a.push(x); a.push(x); return a.join(""); });

노드 결과: 7.0.10

• 과제: 8
• 템플릿 리터럴: 524
• 더하기: 382
• 더하기 등수: 379
• 배열 조인: 1476
• 배열 푸시 결합: 1651

크롬 86.0.4240.1987의 결과:

• 과제: 6
• 템플릿 리터럴: 531
• 더하기: 406
• 더하기 등수: 403
• 배열 조인: 1552
• 배열 푸시 결합: 1813

템플릿 리터럴을 사용하여 string concat을 수행할 수도 있습니다.저는 다른 포스터의 JSPerf 테스트를 포함하도록 업데이트했습니다.

for (var res = '', i = 0; i < data.length; i++) {
  res = `${res}${data[i]}`;
}

나는 왜 사랑을 받지 못하는지 궁금합니다.내 테스트(이미 문자열 배열이 있다고 가정)에서는 다른 모든 방법을 능가합니다.

perf.link 테스트

테스트 코드:

const numStrings = 100;
const strings = [...new Array(numStrings)].map(() => Math.random().toString(36).substring(6));

const concatReduce = (strs) => strs.reduce((a, b) => a + b);

const concatLoop = (strs) => {
  let result = ''
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
  }
  return result;
}

// Case 1: 52,570 ops/s
concatLoop(strings);

// Case 2: 96,450 ops/s
concatReduce(strings)

// Case 3: 138,020 ops/s
strings.join('')

// Case 4: 169,520 ops/s
''.concat(...strings)

저는 다른 사람의 답변에 대해 언급할 수 없으므로 템플릿 리터럴을 사용하는 MadBreaks의 답변은 좋다고 하겠지만, 템플릿 리터럴이 IE와 호환되지 않기 때문에 IE(Internet Explorer)와 호환되어야 하는 사이트를 구축할 경우 주의해야 합니다.이 경우에는 할당 연산자(+, +=)만 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/16696632/most-efficient-way-to-concatenate-strings-in-javascript