はじめに

文字列を取り扱う際、毎回テンプレートリテラルと文字列連結だとどちらの方が早いのだろう。という疑問が毎回頭を過ぎってました。
ということで軽くですがテストしました。

環境

Windows 10 pro
node.js v13.0.1

試す

計測にはperformanceを使用しました。
10^7回文字列連結する処理を10回繰り返し、平均実行時間を出しました。
なお実行時間の単位はmsです。

まずは単純な文字列同士の結合です。

const { performance } = require("perf_hooks");
const a = "hogehoge";
const b = "fugafuga";

/** concat_text */
let concat_sum = 0;
for (let i = 0; i < 10; i++) {
  const start = performance.now();
  for (let j = 0; j < 10 ** 7; j++) {
    const hoge = a + b;
  }
  const time = performance.now() - start;
  console.log(time);
  concat_sum += time;
}
console.log("concat_text average: " + concat_sum / 10);

/** template_literal */
let template_sum = 0;
for (let i = 0; i < 10; i++) {
  const start = performance.now();
  for (let j = 0; j < 10 ** 7; j++) {
    const hoge = `${a}${b}`;
  }
  const time = performance.now() - start;
  console.log(time);
  template_sum += time;
}
console.log(`template_literal average: ${template_sum / 10}`);

result

34.08500099973753
39.77130000013858
11.797801000066102
11.937899000011384
11.332999000325799
11.727699999697506
11.424000999890268
12.096899999771267
11.576799999922514
11.971499999985099
concat_text average: 16.772190099954607
116.54179899999872
163.70389899984002
121.10849899984896
71.12280000001192
71.46999999973923
71.70690099988133
74.72199900029227
72.5004999996163
71.70279900031164
71.67179999966174
template_literal average: 90.62509959992022

単純な文字列の結合だと+で結合した方が若干早いようです。
連結する数を4個(a + b + c + d)に増やした場合以下のようになりました。

+は実行時間に然程影響は無かった
テンプレートリテラルは実行時間が倍になった。

次に連結の際にnumberの計算もするよう変更し、前テストと同じ回数行いました。

const { performance } = require("perf_hooks");
const a = "hogehoge";

/** concat_text */
let concat_sum = 0;
for (let i = 0; i < 10; i++) {
  const start = performance.now();

  for (let j = 0; j < 10 ** 7; j++) {
    const hoge = a + (8 + 2);
  }
  const time = performance.now() - start;
  console.log(time);
  concat_sum += time;
}
console.log("concat_text average: " + concat_sum / 10);

/** template_literal */
let template_sum = 0;
for (let i = 0; i < 10; i++) {
  const start = performance.now();

  for (let j = 0; j < 10 ** 7; j++) {
    const hoge = `${a}${8 + 2}`;
  }
  const time = performance.now() - start;
  console.log(time);
  template_sum += time;
}
console.log(`template_literal average: ${template_sum / 10}`);

result

270.05879899999127
226.13540100026876
226.2756000002846
230.80309899989516
245.48059999989346
221.4089999999851
226.89270000020042
227.69470000034198
225.0682989996858
220.0896009998396
concat_text average: 231.9907799000386
41.350199999753386
114.77740000002086
38.32340000011027
109.85499900020659
48.483599999919534
102.05140100000426
43.74809999996796
92.99629899999127
40.28349999990314
42.15730100031942
template_literal average: 67.40262000001967

テンプレートリテラルの方が早いですね。
連結する数を4個(a + (8 + 2) + (9 + 1) + (10 - 3))に増やした場合以下のようになりました。

テンプレートリテラルは実行時間に然程影響は無かった
+は実行時間が倍になった。

まとめ

+を用いた連結は複雑な処理を入れるかどうかでタイムに差が出た
テンプレートリテラルは複雑な処理をする際にタイムにブレが出にくい
連結数を増やした場合、早い方のタイムはブレが出にくい

といってもここまで大量に処理しない限り誤差の範囲ですので個人の好みになって来ると思います。
私は見やすさ的にもタグ関数的にもテンプレートリテラルを使いたいと思います。

また、今回はnodeのみで実験しましたがブラウザ上だとまた違った結果になりそうです。

初学者ですので間違い等あれば訂正いただけると嬉しいです。