Single and double quotes in JS

JS inside the single and double quotation marks can be used at the same time, but to follow certain criteria.

The most used double quotation marks, then the inside can no longer use double quotation marks, because the quotation marks are paired, the browser reads a double quotation mark, to the 2nd double quotation marks the end; Similarly, when the browser reads a single quote, it must be read to the second single quotation mark to end,

Whether it is a single quotation mark or double quotation marks, inside can set the opposite quotation marks, but can not double quotation marks inside the single quotation mark, this single quotation mark again sets double quotation marks, this is not possible.

If you use the same quotation marks inside the quotation marks, you need to escape with \.

Single quote escaped as \ '

Single quote escaped as \ "

The string between single and double quotation marks can be added

' AF ' + ' BVVV ' + ' DD '

Output "AFBVVVDD"

In another case, the single quotation marks here are also part of the string

"<div class= ' con" + "Tent ' ></div>"

Output "<div class= ' content ' ></div>"

From the point of view of code compilation, single quotes are compiled faster by the browser (Ie,chrome,safari) in JS (double quotes in Firefox are faster).

Take a look at some cases

first of all, single and double quotation marks in their respective time is the difference between wood, can be, such as:

var a= "Hello";//double quotes, the contents of variable A is a string hello

var b= ' hello ';//single quote, variable b is the string hello

Console.info (a===b);//output True, they are essentially the same string

second , the single and double quotation marks mixed use, this time to pay special attention, this situation is usually in the JS stitching string inside, or HTML element attributes inside, to JS as an example, are the same rules: single and double quotation marks must be paired to the appearance, you can single quotation marks outside, You can also double quotation marks on the outside:

var a= "' Hello '";//the content of variable a here is the string ' Hello ', where the single quotation marks are part of the string

var b= ' hello ';//the content of variable B here is the string "Hello", where the double quotation marks are also part of the string

Console.info (a===b);//output false, they are not the same string

next a little bit more complicated, let's take a look at string concatenation:

var _html= "<div class= ' content ' ></div>";/* Here is the most used double quotation marks, then the inside can not use double quotation marks, because the quotation marks are paired, the browser read a double quote, To the 2nd double quotation mark is the end; Similarly, when a browser reads a single quote, it must read to the second to end.

The above code can also be written: _html= ' <div class= "content" ></div> ";

If you want to use only one quotation mark, you need to do a * * escape inside the quotation marks, telling the browser that the quotation marks are a string, not a quote terminator, such as:

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

And then a concatenation of strings:

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

var _html= "<div class= ' info ' > My name is" +data.name+ ", I Am" +data.age+ "year old <div>"

Console.info (_html);//My Name is Xiao Ming, I am 18 years old this year.

Obviously, as I said before, the quotation marks are used as the first double-quote string when they are read.

The content begins processing and then ends with the second double quote, namely: "<div class= ' info ' > My name is"

/* Then use the plus sign to stitch the variable data.name, and then continue to stitch the string with the plus sign "I am this year"

etc...

A particularly complex example.

Want to output this piece of HTML

<Templatev-for= "Aodo in Aodos">      <Liclass= "Mui-table-view-cell"V-bind:fundcodeli= "Aodo.assetcode">          <spanclass= "Column-a"V-text= "aodo.assetName.substring (0,6)"></span>          <spanclass= "Column-b"V-text= "aodo.setupDate.substring (0,4) + '-' +aodo.setupdate.substring (4,6) + '-' +aodo.setupdate.substring (6,8)" ></span>          <spanclass= "Column-c"V-text= "aodo.investType.substring (0, aodo.investtype.length-2)"></span>          <spanclass= "column-d mui-icon mui-icon-closeempty"></span>    </Li></Template>

JS inside must write this:

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> "= str;

* * Summary under * *: quotation marks (the same type of quotation marks, single and double quotes are different types) are paired, start reading the first quotation mark, read the second end, meet the third and start again, the fourth end ... ；

Different types of quotation marks can be nested, up to 2 layers (of course, by escaping can continue to go down, but because of poor readability, do not do so);

*/

Single and double quotes in JS