模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。


传统的JavaScript语言,输出模板通常是这样的

    document.write(
        '<h4>' + title + '</h4>' +
        '<p>' + description + '</p>' +
        '<p>' + date + '</p>'  
     );

上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题

    document.write(`
        <h4>${title}</h4>
        <p>${description}</p>
        <p>${date}</p>
    `);

模板字符串(template string)是增强版的字符串,用反引号(`)标识。他可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量(需要将变量名写在${}之中)。

    //  普通字符串
    let normalStr = `In JavaScript '\n' is a line-feed.`;
    //  多行字符串
    let multiple = `In JavaScript this is not legal.`;
    //  字符串中嵌入变量
    let all = `${normalStr}, ${multiple}`;

上面代码中的模板字符串,都是反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义

    let greeting = `\`Hello\` world`;

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中

    document.write(`
        In JavaScript this is
        not legal
    `);

上面代码中,所有模板字符串的空格和换行,都是被保留的,比如字符串前面会有一个换行,如果你不想要这个换行,可以使用trim函数消除它

    document.write(`
        In JavaScript this is
        not legal
    `.trim());

${}大括号内部可以放任意的JavaScript表达式,可以进行运算、引入对象属性、函数

    //  算数表达式
    let x = 1;
    let y = 2;
    document.write(`${x} + ${y} = ${x + y}`);   // 1 + 2 = 3
    document.write(`${x} + ${y * 2} = ${x + y * 2}`);   //1 + 4 = 5
    //  使用对象属性
    let obj = {x: 1, y: 2};
    document.write(`${obj.x + obj.y}`); // 3
    //  调用函数
    function fn() {
        return "Hello World";
    }
    document.write(`foo:${fn()}`); //foo: Hello World

如果大括号中的值不是字符串,将按照一般的规则转为字符串.比如:大括号中是一对象,将默认调用对象的toString函数。

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

    let error = `Hello, ${msg}`;

模板字符串甚至还能嵌套,举个简单的例子##

    let tmpl = `1 + ${`2} = 3`;
    document.write(tmpl); // 1 + 2 = 3

带标签的模版字面量及转义序列 ##
自ES2016起,带标签的模版字面量遵守以下转义序列的规则:

  • Unicode字符以"\u"开头,例如 \u00A9
  • Unicode码位用"\u{}"表示,例如 \u{2F804}
  • 十六进制以"\x"开头,例如 \xA9
  • 八进制以"\"和数字开头,例如 \251
最后修改:2020 年 07 月 06 日 12 : 30 AM
如果觉得我的文章对你有用,请随意赞赏