ES6 之模板字符串

传统的字符串输出一般都这样写

let name = 'john han'
let str = 'hello ' + name
str // "hello john han"

es6 可以这样写

let name = 'john han'
let str = `hello ${name}`
str // "hello john han"

注:字符串模板中的变量需要写在 ${} 中

es6 中的这种写法叫做模板字符串,模板字符串是增强版的字符串,用反引号(`)标识

模板字符串也可以当作普通字符串使用,也可以用来定义多行字符串

// 普通字符串
`hello world and good morning`

// 多行字符串
`hello world and
 good morning`

如果在模板字符串中需要使用反引号,则用反斜杠转义

let str = `\`hello\` world`
str // `hello` world

大括号内部可以使用 JavaScript 表达式以及引用对象属性

let a = 1
let b = 2

`${a} + ${b} = ${a + b}`
// "1 + 2 = 3"

`${a} + ${b / 2} = ${a + b / 2}`
// "1 + 1 = 2"

let obj = {a: 1, b: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中还能调用函数

function foo () {
  return "hello world"
}

`${fn()} john han`
// hello world john han

如果模板字符串中的变量没有声明,将报错

// 变量 str 没有声明
let msg = `hello, ${str}`;
// 报错
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1020.html
鄂ICP备17018604号-1  鄂公网安备42060702000030号