Single and double quotes in JS

Single quotes and double quotes in JS can be used at the same time, but certain guidelines must be followed.

The outermost double quotation marks are used, then the double quotation marks can no longer be used inside, because the quotation marks are in double pairs. After the browser reads a double quotation mark, it will not end until the second double quotation mark; After the reader reads a single quote, it must read the second single quote before it ends.

No matter it is a single quote or a double quote, you can put the opposite quote inside, but you can't put a single quote inside a double quote, and this single quote is put inside a double quote, this is not acceptable.

If the same quotes are used inside quotes, they need to be escaped with \.

single quotes are escaped as \'

single quotes are escaped as \"

Strings between single and double quotes can be added

'af'+"bvvv"+'dd'

output "afbvvvdd"

There is also a case, where the single quotes are also part of the string

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

输出 "<div class='content'></div>"

From a code compilation perspective, single quotes are faster to be compiled by browsers (IE, Chrome, Safari) in JS (double quotes are faster in FireFox).

look at some cases

First of all, there is no difference between single quotation marks and double quotation marks when they are used alone. They can be used, for example:

var a="Hello";//Double quotes, the content of variable a is a string Hello

var b='Hello';//Single quotes, the content of variable b is a string Hello

console.info(a====b);//Output true, they are essentially the same string

Secondly , when single quotes and double quotes are mixed, special attention should be paid at this time. This situation usually occurs in js spliced strings, or in the attributes of html elements. Take JS as an example, they are all the same rules: Single quotes and double quotes must appear in pairs, either single quotes or double quotes:

var a="'Hello'";//The content of variable a here is the string 'Hello', and the single quote here is also part of the string

var b='"Hello"';//The content of variable b here is the string "Hello", the double quotes here are also part of the string

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

Next, a little more complicated , let's look at string concatenation:

var _html="<div class='content'></div>";/*This is the outermost double quotation mark, then the double quotation mark can no longer be used inside, because the quotation mark is in double pairs, the browser After reading a double quotation mark, it will not end until the second double quotation mark; similarly, after the browser reads a single quotation mark, it must read the second double quotation mark before it ends*/

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

//If you only want to use one kind of quotation mark, you need to **escape** the quotation mark inside to tell the browser that the quotation mark inside is a string, not a quotation mark terminator, for example:

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

Another concatenated string:

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

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

console.info(_html);//My name is Xiaoming, I am 18 years old

//Obviously, according to what I said before, when the quotation mark reads the first double-quoted string, it treats it as the variable's

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

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

And so on. . .

A particularly complex example

Want to output this 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>

It must be written in JS like 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>";
fundListUl.innerHTML = str;

**Summary**: Quotes (quotes of the same type, single quotes and double quotes are different types) are double pairs, starting when reading the first quote, reading to the end of the second, and encountering the third Begins, the fourth ends. . . ;

Different types of quotation marks can be nested, up to 2 levels (of course, you can continue to set down by escaping, but because the readability is too poor, do not do this);

Single and double quotes in JS

Guess you like