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

2021-01-21 10:39:14 浏览数 (1)

每一个编程语言都有引号,但作用和用法略有区别。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 入门教程.模板字符串

0 人点赞