JavaScript 字串連線效能比較

先上結果：

連線1次

使用方法	執行次數	連線耗時
+	1	0.069ms
concat	1	0.114ms
Array.join	1	0.149ms
模板字串	1	0.051ms

連線100次

使用方法	執行次數	連線耗時
+	100	0.011ms
concat	100	0.028ms
Array.join	100	0.056ms
模板字串	100	0.012ms

連線10000次

使用方法	執行次數	連線耗時
+	10000	1.770ms
concat	10000	0.939ms
Array.join	10000	4.608ms
模板字串	10000	0.743ms

1000000

使用方法	執行次數	連線耗時
+	1000000	31.039ms
concat	1000000	36.029ms
Array.join	1000000	211.760ms
模板字串	1000000	25.440ms

程式碼

function log(...args) {
  console.log(...args);
}

function timeOut(times, name, func) {
  console.time(name);
  let i = 0;
  while (i < times) {
    func();
    i++;
  }
  console.timeEnd(name);
}

const a = 'a';
const b = 'b';

const str1 = () => a + b;
const str2 = () => a.concat(b);
const str3 = () => [a, b].join();
const str4 = () => `${a}${b}`;

const link = (times) => {
  log(`------- ${times} -------`);
  timeOut(times, 'string + 連線', str1);
  timeOut(times, 'string concat 方法', str2);
  timeOut(times, 'array join 連線', str3);
  timeOut(times, '模板字串', str4);
}

link(1);
link(100);
link(10000);
link(1000000);複製程式碼