背景
文字列の連結には、テンプレートリテラルか文字列連結を使うかいずれかの方法がある。可読性的にはテンプレートリテラルの方が良いが、パフォーマンス的には単なる文字列連結の方が良い。
実際にどれぐらい差があるのか比較してみる。
方法
以下の3つの方法で文字列を連結するコードをベンチマークする。
- テンプレートリテラル
const url = `/${slug}.html`; - 文字列連結
const url = '/' + slug + '.html'; - 配列を使った文字列連結
const url = ['/', slug, '.html'].join('');
各手法で100万回の文字列連結し、その処理速度を測定する。
const slug = '1234567890';
// Template Literal
for (let i = 0; i < 1000000; i++) {
const url = `/${slug}.html`;
}
// String Concatenation
for (let i = 0; i < 1000000; i++) {
const url = '/' + slug + '.html';
}
// String Concatenation with Array
for (let i = 0; i < 1000000; i++) {
const url = ['/', slug, '.html'].join('');
}