JS中的单引号和双引号

男娘i 2022-04-01 02:26 371阅读 0赞

**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

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层（当然通过转义可以继续往下套，但是因为可读性太差，不要这样做）；

\*/

一些demo测试：

var str1= 'af'+"bvvv"+'dd'; //单引号套双引号
    console.log("str1 = " + str1);  //str1 = afbvvvdd
    
    var str2= "<div class='con"+"tent'></div>";  //单引号是字符创的一部分
    console.log("str2 = " + str2);  //str2 = <div class='content'></div>
    
    var str3= "<div class='con\"+\"tent'></div>";  //单引号是字符创的一部分
    console.log("str3 = " + str3);  //str3 = <div class='con"+"tent'></div>
    
    var str4= "<div class='con\'-\'tent'></div>";  //单引号是字符创的一部分
    console.log("str4 = " + str4);  //str4 = <div class='con'-'tent'></div>
    
    var a="'你好'";       //此时单引也是字符串一部分
    var b='"你好"';       //此时双引也是字符串一部分
    console.info(" a==b " + a===b);  //false
    
    var _html1="<div class='content'></div>"; //方式一
    var _html2='<div class=\'content\'></div>'; //方式二
    
    console.log("_html1 = " + _html1 + " _html2 = " + _html2); //_html1 = <div class='content'></div> _html2 = <div class='content'></div>
    
    var data={name:"小明",age:18};
    
    var _html3="<div class='info'>我的名字叫"+data.name+",我今年"+data.age+"岁了<div>"
    
    console.info(_html3);//我的名字叫小明，我今年18岁了