javascript中字符串的‘单‘与“双“引号

骑猪看日落 2023-09-29 15:38 37阅读 0赞

通常在使用 javascript 进行编码时，您会遇到对字符串使用“单”或“双”引号的情况，并且想知道两者之间是否有任何真正的区别，如果有，使用一个是否有优势其他的报价类型？这篇文章就是来回答的！继续阅读！

### **两种引用风格的区别** ###

单引号 (' ') 和双引号 (" ") 都用于表示 Javascript 中的字符串。选择引用样式由您决定，一种样式相对于另一种样式没有特殊的语义。尽管如此，重要的是要注意，javascript 中没有单个字符的类型，所有内容始终是字符串！

'apple' === "apple"

#### **两种引用方式的其他一些关键点如下：** ####

'apple' //correct
    "apple" //correct
    "apple' //incorrect

*  无论您使用哪种引用样式打开字符串，都以相同的样式关闭它。
 *  系统不关心你使用哪一个。
 *  
 *  在德语、匈牙利语、奥地利语和许多其他键盘上，单引号或双引号都必须使用 Shift 键。
 *  
 *  在土耳其语 Q 键盘上，我们需要按**Shift**来输入单引号而不是双引号！

### **选择正确的引用风格** ###

明智地选择引用可以帮助您避免在字符串中转义**单引号 (')**或**双引号 (")**。例如，如果您希望将 HTML 片段存储在变量中，您可以对 HTML 属性值使用双引号 (")并使用单引号 (') 将 JavaScript 字符串括起来：

var div = '<div class="panel">...</div>'

#### 引号**内的**引号 ####

在字符串中使用引号会导致错误。例如，

var message='Javascript's beauty is simplicity';

浏览器无法知道哪一个是结束引号。解释器将 'Javascript' 中的第二个引号视为结束引号 - 因此该行的其余部分变得无效。

我们可以通过使用 javascript 允许单引号和双引号来定义字符串这一事实来解决这个问题。因此，在这种情况下，您可以使用双引号。

var message="Javascript's beauty is simplicity";

另一种方法是使用正斜杠**"\\"**来转义引号。您在要转义的字符前面使用正斜杠。所以同样的信息变成：

var message='Javascript\'s beauty is simplicity';

#### **要记住的要点** ####

*  双引号字符串可以有单引号而不转义它们，相反，单引号字符串可以在其中有双引号而不必转义它们。
 *  
 *  双引号 ( \\" ) 必须转义双引号，反之亦然单引号 ( \\' ) 必须转义单引号。

### **单引号和双引号 - 优点和缺点** ###

#### **优点** ####

<table style="width:654px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dbdbe2;width:291px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 单引号</strong></td> 
   <td style="background-color:#ffffff;border-color:#dbdbe2;width:354px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 双引号</strong></td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dbdbe2;width:291px;">&nbsp;空字符串 (' ') 更好的可读性看起来比 ("" "")</td> 
   <td style="background-color:#ffffff;border-color:#dbdbe2;width:354px;">&nbsp;在 JSON 中，唯一允许的引用样式是双引号 (" ")</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;width:291px;">&nbsp;如果您想在 javascript 中编写 html 会更容易</td> 
   <td style="background-color:#ffffff;width:354px;">&nbsp;用英语写句子时无需转义撇号</td> 
  </tr> 
 </tbody> 
</table>

#### **缺点** ####

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#dbdbe2;"><strong>&nbsp; &nbsp; 单引号</strong></td> 
   <td style="border-color:#dbdbe2;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 双引号</strong></td> 
  </tr> 
  <tr> 
   <td>&nbsp;&nbsp;JSON 不支持</td> 
   <td>&nbsp;&nbsp;想要使用双引号时必须按一个额外的键 (Shift)</td> 
  </tr> 
 </tbody> 
</table>

### **流行的引号风格** ###

梳理几个 [流行的][Link 1] JavaScript 项目，我们可以看到对**单引号****的偏好明显高于双引号**。

<table style="width:227px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dbdbe2;width:78px;"><strong>&nbsp;项目</strong></td> 
   <td style="background-color:#ffffff;border-color:#dbdbe2;width:133px;"><strong>&nbsp;主导报价风格</strong></td> 
  </tr> 
  <tr> 
   <td>odash</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 99% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;chalk</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 100% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;react</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 90% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;request</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 97% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;commander.js</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 97% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;moment</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 90% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;express</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 92% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;tslib</td> 
   <td>&nbsp;&nbsp;<strong>"</strong>&nbsp;- 100% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;debug</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 97% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;node-fs-extra</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 98% of quotes</td> 
  </tr> 
  <tr> 
   <td>&nbsp;axios</td> 
   <td>&nbsp;&nbsp;<strong>'</strong>&nbsp;- 81% of quotes</td> 
  </tr> 
 </tbody> 
</table>

*数据来自[byte archer][]*

然而，相当多的前端库更喜欢双引号样式，这可能与 HTML 片段的存在有关。

### **离别的话** ###

总而言之，尝试始终坚持一种引用风格。如果您对选择哪一个感到困惑，请使用广泛使用的单引号。在 ES6 中，您还可以使用第三个选项来包含字符串 - **\`backtick\`** 字符串。

[Link 1]: https://www.npmjs.com/browse/depended
[byte archer]: https://bytearcher.com/