JS 单引号、双引号与反引号的区别
每一个编程语言都有引号，但作用和用法略有区别。JS 也存在单引号、双引号与反引号。
1.单引号&双引号
JS 中单引号和双引号无任何区别，二者均用于表示字符串字面量。
var s0 = 'dable is fish'
var s1 = "dable is fish"
console.log(s0 === s1) // true单引号和双引号混合使用时，内层引号将被视为字符串的一部分。
var s0 = 'dable is "fish"'
var s1 = "dable is 'fish'"
console.log(s0) // dable is "fish"
console.log(s1) // dable is 'fish'
console.log(s0 === s1) // false如果不使用单引号包含双引号或者双引号包含单引号，那么需要反斜杠对引号进行转义。
var s0 = 'dable is \'fish\''
var s1 = "dable is \"fish\""
console.log(s0) // dable is 'fish'
console.log(s1) // dable is "fish"
console.log(s0 === s1) // false单引号和双引号之间的字符串可以相加。
var s = 'dable'+" is"+' fish'
console.log(s) // dable is fish因为单引号和双引号表示的是字符串常量，所以字符串中如果包含表达式占位符，是不会解析表达式结果的。
var s0 = 'fish'
var s1 = 'dable is ${s0}'
var s2 = "dable is ${s0}"
console.log(s1) // dable is ${s0}
console.log(s2) // dable is ${s0}约定俗成，表示字符串字面量使用单引号。
2.反引号
从 ECMAScript 6 开始，表示字符串引入了新的方法，即使用反引号（`）来表示模板字符串。
传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);模板字符串（template string）是增强版的字符串，它可以表示普通字符串，也可以表示多行字符串，或者在字符串中嵌入变量。
// 普通字符串
var s = `dable is 'fish'`
console.log(s) // dable is 'fish'
// 多行字符串
console.log(`string text line 1
string text line 2`)
// 字符串中嵌入变量
var name = 'dable', animal = 'fish'
`${name} is ${animal}`大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。
let x = 1, y = 2
`${x} + ${y} = ${x + y}` // "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}` // "1 + 4 = 5"
let obj = {x: 1, y: 2}
`${obj.x + obj.y}` // "3"模板字符串之中还能调用函数。
function fn() {
return "Hello World";
}
`foo ${fn()} bar` // foo Hello World bar同样地，如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
var s = `dable is \`fish\``如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的 toString 方法。
如果模板字符串中的变量没有声明，将报错。
// 变量 place 没有声明
let msg = `Hello, ${place}` // 报错由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。
`Hello ${'World'}` // Hello World模板字符串甚至还能嵌套。
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`上面代码中，模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下。
const data = [
{ first: '<Jane>', last: 'Bond' },
{ first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));
// <table>
//
// <tr><td><Jane></td></tr>
// <tr><td>Bond</td></tr>
//
// <tr><td>Lars</td></tr>
// <tr><td><Croft></td></tr>
//
// </table>如果需要引用模板字符串本身，在需要时执行，可以写成函数。
var func = (name) => `Hello ${name}!`
func('Dable') // Hello Dable!上面代码中，模板字符串写成了一个函数的返回值。执行这个函数，就相当于执行这个模板字符串了。
参考文献
腾讯云开发者
