tim学习记录

JavaScript 中的双引号（""）vs 单引号（''） vs 反引号（``）

原文地址：https://blog.bitsrc.io/double-quotes-vs-single-quotes-vs-backticks-in-javascript-3cab5aaea55

在 JavaScript 中使用单引号、双引号、反引号之间的不同。

在 JS 中， 单引号（''）和双引号（""）都是用于创建字符串字面量。大多数开发者按照他们的喜好来用单或双引号，有时他们也会让格式化工具来决定使用哪种符号。 所以，我想找出这两者的使用之间究竟有什么不同，这篇文章会讨论他们的相同点、不同点和你需要记住的重要点。

单引号 vs 双引号

像我上面说过，在 JS 中他们都用来创建字符串字面量（值），他们的作用也完全一样。
唯一需要注意的是，当我们需要使用转义符的情况下单引号和双引号的不同。
如果你用单引号创建字符串，你需要使用转义符（\）将两个单引号中的单引号进行转义。

双引号也是同样的使用原理，你必须用转义符转义两个双引号中间的任何双引号。

不过，你可以在单引号中使用双引号，在双引号中使用单引号，不用转义符。

我个人比较喜欢使用双引号去创建字符串。不使用转义符会让字符串看起来更好阅读。

有没有其他可替代的方法？

虽然单引号和双引号是最常用的，但我们有第三种选择就是反引号（``）。
反引号是 ES6 新增的属性，它允许你使用反引号来创建字符串。
虽然反引号主要用在 HTML 中或者作为代码嵌入，它也可以发挥单引号双引号的作用。此外，用反引号还能让字符串更方便操作。

1. 便于字符的串联

2. 你不需要转义单引号或双引号

3. 可以写多行而不使用换行符

综合所有的优势，使用反引号看起来是个好的替代品。

不过当我们使用单引号、双引号或反引号时，性能上会有什么不同呢？让我们找找看

不同类型的引号之间的性能区别

由于这三种方法没有太大的不同，我想要看看他们是否在性能上有显著的差别。
所以我针对三种方式写了一些测试代码，然后在 chrome 的控制台上运行，使用 console.time 测量各自的性能。

function testingDoubleQuotes(){
  console.time(‘doublequotes’);
  for (let i = 0; i < 100000; i++) {
   const string1 = “String One”;
  }
  console.timeEnd(‘doublequotes’);
}
function testingSingleQuotes(){
  console.time(‘singlequotes’);
  for (let i = 0; i < 100000; i++) {
   const string2 = 'String Two';
  }
  console.timeEnd(‘singlequotes’);
}
function testingbackticks(){
  console.time(‘backticks’);
  for (let i = 0; i < 100000; i++) {
   const string1 = `String Three`;
  }
  console.timeEnd(‘backticks’);
}
testingDoubleQuotes();
testingSingleQuotes();
testingbackticks();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

一开始我用简单的赋值，并没有显示出明显的性能区别。之后我增加循环的数值，下面的结果显示经过100000次循环的执行用时。

通过上面的结果，反引号是最快的，双引号是最慢的。但是我认为在我们的项目中使用并不会造成明显的影响。

最后，一切取决于个人喜好

也许就像你现在所理解的，使用单引号、双引号或反引号没有特别的不同之处。你可以根据喜好选择一种或多种基础风格。然而，贯穿整个项目，遵守统一的格式从而让项目保持整洁和一致，这总是正确的。 你也可以使用使用代码格式化工具和风格指南来检测你的代码。他们也有自己的引号类型偏好。

  • Prettier 默认使用双引号
  • gjslint （谷歌的代码检查工具）支持单引号
  • eslint 默认使用双引号
  • Airbnb 风格指南推荐单引号

强烈推荐使用这些工具让你的代码保持一致性，然后你可以通过自己的喜好来设置这些工具。

有一种情况下你需要强制使用一种引号风格。在使用 JSON 时，你需要用双引号。

总的来说，我喜欢使用双引号，对我来说它提供了更好的可读性。我也会使用反引号，当需要它的特性优势像插入变量、多行字符串的时候。

这些习惯对于不同的人来说会有所不同。所以，不要忘记在评论区分享你的想法。
谢谢你的阅读