模板字符串

在传统的JavaScript中,包含在匹配的 " 或 ' 标记内的文本被认为是一个字符串。 " 或 ' 内的文本只能在一行上,没有办法在这些字符串中插入数据,这导致了很多看起来像下面那样丑陋的串联代码:
var name = 'Sam';
var age = 42;
console.log('hello my name is ' + name + ' I am ' + age + ' years old');

ES6引入了一种通过反引号( ` )标记的新的字符串文字类型。 这些字符串文字可以包括换行符,并且有一个新的机制用于将变量插入字符串:

var name = 'Sam';
var age = 42;
console.log(`hello my name is ${name}, and I am ${age} years old`);

这种字符串可以在各种各样的地方派上用场,前端开发是其中之一。

译注

  • 多行字符串
    console.log(`string text line 1
    string text line 2`);
    // "string text line 1
    // string text line 2"
    
  • 嵌入表达式
    console.log(`three is ${1 + 2} not ${2 * 1 + 2}.`);
    // "three is 3 not 4."
    
  • 带标签的模板字符串
    function tag(strings, ...values) {
        console.log(strings); // ["three is ", " not ", raw: Array[2]]
        console.log(values);  // [3, 4]
        return "Hello!";
    }
    tag`three is ${1 + 2} not ${2 * 1 + 2}`;
    // "Hello!"
    
下一节:JavaScript的继承与其他语言中的继承的工作不同,这可能很混乱。 ES6类提供了一种语法糖,试图缓解使用ES5中存在的原型继承的问题。

为了说明这一点,我们创建一个动物园应用,其中创建鸟类。在经典继承中,我们定义一个基类,然后将其子类化以创建一个派生类。