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