JS中的單引號和雙引號

標籤：sub   bin   嵌套   ref   name   情況   var   通過   empty   

JS裡面的單引號和雙引號可以同時使用，但是要遵循一定的準則。

最外面用了雙引號了，那麼裡面就不能再用雙引號了，因為引號是成雙對的，瀏覽器讀到一個雙引號後，到第2個雙引號時才算結束；同理，瀏覽器讀到一個單引號後，必須要讀到第二個單引號才算結束，

 

不管是單引號還是雙引號，裡面都可以套相反的引號,但是不可以雙引號裡面套單引號，這個單引號再套雙引號，這是不行的。

 

如果在引號裡面使用相同的引號，需要用 \ 轉義。

單引號轉義為\‘

單引號轉義為\"

 

單引號和雙引號之間的字串可以相加

‘af‘+"bvvv"+‘dd‘

輸出 "afbvvvdd"

 

還有一種情況，,這裡的單引號也是字串的一部分

"<div class=‘con"+"tent‘></div>"

輸出 "<div class=‘content‘></div>"

 

從代碼編譯的角度說的話，單引號在JS中被瀏覽器（IE，Chrome，Safari）編譯的速度更快（在FireFox中雙引號更快）。

來看一些案例

首先，單引號和雙引號在各自單獨用時是木有什麼區別的，都可以，比如：

var a="你好";//雙引號,變數a的內容是字串  你好

var b=‘你好‘;//單引號,變數b的內容是字串  你好

console.info(a===b);//輸出true，它們本質都是一樣的字串

 

其次，單引號和雙引號混合使用時，這時候要特別注意了，這種情況一般出現在js拼接字串裡面，或者html元素的屬性裡面，就以JS為例吧，都是一樣的規則：單引號和雙引號必須成雙成對的出現，可以單引號在外面，也可以雙引號在外面：

var a="‘你好‘";//這裡變數a的內容就是字串‘你好‘,這裡的單引號也是字串的一部分

var b=‘"你好"‘;//這裡變數b的內容就是字串"你好",這裡的雙引號也是字串的一部分

console.info(a===b);//輸出false，它們不是一樣的字串

 

接下來來個稍微複雜點的，我們來看下字串拼接：

var _html="<div class=‘content‘></div>";/*這裡是最外面用了雙引號了，那麼裡面就不能再用雙引號了，因為引號是成雙對的，瀏覽器讀到一個雙引號後，到第2個雙引號時才算結束；同理，瀏覽器讀到一個單引號後，必須要讀到第二個才算結束*/

//上面的代碼也可以寫作：_html=‘<div class="content"></div>‘;

//如果你只想用一種引號的話，你級需要對裡面的引號進行**轉義處理**，告訴瀏覽器裡面的引號是一個字串，而不是引號結束符，比如：

_html=‘<div class=\‘content\‘></div>‘;

 

再來個拼接字串的：

var data={name:"小明",age:18};

var _html="<div class=‘info‘>我的名字叫"+data.name+",我今年"+data.age+"歲了<div>"

console.info(_html);//我的名字叫小明，我今年18歲了

//很明顯了，按照之前說的，引號在讀到首個雙引號字串的時候，把它當做這個變數的

//內容開始處理，然後到第二個雙引號那裡結束，即： "<div class=‘info‘>我的名字叫"

/*然後通過加號拼接變數 data.name，  拼接好了後繼續用加號拼接字串 ",我今年"

以此類推。。。 

一個特別複雜的例子

想要輸出這段HTML

<template v-for="aodo in aodos">      <li class="mui-table-view-cell" v-bind:fundcodeli="aodo.assetCode">          <span class="column-a" v-text="aodo.assetName.substring(0,6)"></span>          <span class="column-b" v-text="aodo.setupDate.substring(0,4)+‘-‘+aodo.setupDate.substring(4,6)+‘-‘+aodo.setupDate.substring(6,8)"></span>          <span class="column-c" v-text="aodo.investType.substring(0, aodo.investType.length - 2)"></span>          <span class="column-d mui-icon mui-icon-closeempty"></span>    </li></template>

JS裡面必須這樣寫：

var str="<template v-for=‘aodo in aodos‘><li class=‘mui-table-view-cell‘ v-bind:fundcodeli=‘aodo.assetCode‘><span class=‘column-a‘ v-text=‘aodo.assetName.substring(0,6)‘></span><span class=‘column-b‘ v-text=‘aodo.setupDate.substring(0,4)"+‘+"-"+‘+"aodo.setupDate.substring(4,6)"+‘+"-"+‘+"aodo.setupDate.substring(6,8)‘></span><span class=‘column-c‘ v-text=‘aodo.investType.substring(0, aodo.investType.length - 2)‘></span><span class=‘column-d mui-icon mui-icon-closeempty‘></span></li></template>";fundListUl.innerHTML = str;

**總結下**：引號（同類型的引號，單引號和雙引號是不同類型）是成雙對的，在讀第一個引號時開始，讀到第二個結束，遇到第三個又開始，第四個又結束。。。；

不同類型引號之間可以嵌套，最多2層（當然通過轉義可以繼續往下套，但是因為可讀性太差，不要這樣做）；

*/

JS中的單引號和雙引號