第四章：模板字符串

Veröffentlicht am

模板字符串

传统的Javascript输出模板通常是这样写的

1
$('#root').append('there are <b>' + basket.count + '</b>' + 'items in your basket')

这种写法相当繁琐而不方便，ES6引入了模板字符串来解决这个问题。

1
$('#root').append(` there are <b> ${basket.count} </b> items in your basket`);

模板字符串

什么是模板字符串

模板字符串是增强版的字符串，用反引号(`)标识，他可以当做普通字符串来使用，也可以定义多行字符串，或者在字符串中嵌入变量。

1
2
3
4
5
6
7
8
9
10
11
`In Javascript '\n' is a line-feed`
//In Javascript '\n' is a line-feed
//多行字符串
console.log(`String text line1
 string text line2`)
//String text line1
//String text line2
//字符串中嵌入代码
console.log(`1+2=${1+2}`)//1+2=3

以上代码中的字符串都使用了反引号。

注意事项

  1. 如果要在模板字符串中使用反引号，则在其前面要用反斜杠来转义
  2. 如果使用模板字符串，所有的空格和缩进都会保留在输出中
  3. 在模板字符串中嵌入变量，需要将变量写在${}中

  4. 在${}的大括号中，可以放入任意Javascript表达式，可以进行运算以及引用对象属性

    1
    2
    let x=1,y=2
    `${x} + ${y} = ${x+y}`//1+2=3

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

    1
    2
    3
    4
    function foo(){
     return 'hello world'
    }
    `say ${foo()}`//say hello world

  6. 如果大括号中的值不是字符串，将按照一定的规则转化为字符串，比如对象会使用toString()方法。

    1
    2
    3
    4
    5
    6
    7
    8
    var c = true
    var d = null
    `this ${c} and this ${d}`//this true and this null
    function foo(){
     console.log(222)
    }
    `this ${foo()}`//this undefined

  7. 如果模板字符串中的变量没有声明，那么将会报错

特别注意

  1. 如果 ${} 中是一个字符串，将会原样输出
  2. 当我们需要引用模板本身时，可以使用下面的方法
    1
    2
    3
    4
    5
    6
    7
    let str = 'return' + `'hello ${name}!'`;
    let func = new Function('name',str)
    func('jack')//hello jack
    let str = `(name) => 'hello ${name}!'`
    let func = eval.call(null,str)
    func('jack')//hello jack