Follow the WeChat public account: Front-end Power Bank to get the latest original articles:
In JavaScript, single quotes ('') and double quotes ("") are often used to create strings. Normally, there is no difference between using double or single quotes, they both end up representing a string. The only difference between them comes when we need to use the backslash character () to escape characters.
If you use single quotes to create a string, you cannot use single quotes in the string and can only use backslash () to escape them. for example:
const hi = 'hello' world';
console.log(hi)
It can only be escaped using backslashes:
const hi = 'hello\' world';
console.log(hi) // 输出结果：hello' world
If you want to use double quotes within double quotes, you also need to escape them with a backslash:
const hi = "hello\" world";
console.log(hi) // 输出结果：hello" world
And if you want to use single quotes within double quotes, you can use it directly:
const hi = "hello' world";
console.log(hi) // 输出结果：hello' world
In addition, single quotes are not supported in JSON files. If you want to copy and paste between JSON and JavaScript files, you need to pay extra attention.
Although single quotes and double quotes are commonly used, we have a third solution, which is template strings (backticks) in ES6.
(1) String connection
const name = 'javascript';
console.log(`hello ${
name}`); // 输出结果：hello javascript
(2) No need to escape single or double quotes
console.log(`hello "JS"`); // 输出结果：hello "JS"
console.log(`hello 'CSS'`); // 输出结果：hello 'CSS'
(3) Write multi-line content without using line breaks
console.log(`hello
JS`);
// 输出结果：
hello
JS
So is there any difference in performance when we use single quotes, double quotes or backticks? Let’s briefly look at the performance differences between the three forms through three methods:
function testingDoubleQuotes(){
console.time('单引号');
for (let i = 0; i < 100000; i++) {
const string1 = "String One";
}
console.timeEnd('单引号');
}
function testingSingleQuotes(){
console.time('双引号');
for (let i = 0; i < 100000; i++) {
const string2 = 'String Two';
}
console.timeEnd('双引号');
}
function testingbackticks(){
console.time('反引号');
for (let i = 0; i < 100000; i++) {
const string1 = `String Three`;
}
console.timeEnd('反引号');
}
testingDoubleQuotes();
testingSingleQuotes();
testingbackticks();
The result is as follows:
Based on the above results, we can see that backticks are the fastest and double quotes are the slowest. Of course, this result is not the same every time, it is for reference only. However, such subtle differences will not have any impact on the project.
To sum up, there is not much difference between using single quotes, double quotes or backticks. You can choose one or more styles according to your preference. However, it's best to use a single format across your projects to keep things clean and consistent.
Otherwise, we can use a code formatter or follow a style guide. They all have default types:
- Prettier uses double quotes by default;
- Eslint uses double quotes by default;
- The Airbnb style guide prefers using single quotes.
In the source code of the more popular JavaScript open source projects, single quotes are more popular than double quotes:
| Open source projects | Proportion of using single quotes |
|---|---|
| lodash | 99% |
| react | 90% |
| request | 97% |
| moment | 90% |
| express | 92% |
| debug | 97% |
| axios | 81% |