JavaScript 单引号、双引号与反引号的区别

每一个编程语言都有引号，但作用和用法略有区别。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}

单引号比使用双引号方便输入，因为不用键入 Shift 键。约定俗成，表示字符串字面量使用单引号。

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!

上面代码中，模板字符串写成了一个函数的返回值。执行这个函数，就相当于执行这个模板字符串了。

---

参考文献

阮一峰.ECMAScript 6 入门教程.模板字符串