使用 Performance.now() 对字符串字面量 ("") 和模板字面量 (``) 进行基准测试

让我们来谈谈 JavaScript 中的字符串。开发人员可以通过两种方式定义字符串：

a. 使用字符串文字

const str = "Hello " + "world!";

b. 使用模板字符串

const worldText = "world!"
const str = `Hello ${worldText}`;

那么，你有没有想过，这两种拖车有什么区别？你通常用哪一种？你现在用的那款更好吗？

让我们通过性能测试来找出答案。

基准测试

这是测试用例，String Literal and Template Literal用于基准测试。

测试用例

const iterations = ITERATION_TOTAL // 10, 100, 10000, 1000000
const stringText = 'string'
let text = ''

const start = performance.now()

for (let i = 0; i < iterations; i++) {
  // String or Template literal test case here
}

const end = performance.now()

console.log(`It took ${end - start} ms.`);

字符串文字

text = "text"

模板字面量

text = `text`

字符串文字连接字符串

text = "text " + stringText

模板字面量连接字符串

text = `text ${stringText}`

字符串文字连接两个字符串

text = stringText + " text " + stringText

模板字面量连接两个字符串

text = `${stringText} text ${stringText}`

我在 Node.js v18.17.0 上以不同的循环迭代次数（10、100、10,000、100,000 和 1,000,000）运行了测试。我测量了每次迭代的平均时间。

结果

以下是每次迭代的结果（越低越好）：

10次​​迭代

100次迭代

1,000 次迭代

10万次迭代

1,000,000 次迭代

结论

String Literal在简单的迭代中同时使用&仍然很好Template Literal，显示有限的项目。结果显示两者略有不同，但仍然可以接受。

当处理大型数据集、复杂算法、生成长字符串时，使用需要大量迭代的频繁重新渲染的 React 组件String Literal是唯一的选择。

重要的是要理解，并非每种方法都适合所有案例和项目。可能需要考虑一些权衡。