es6 模版字符串${}

版权声明：未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/82496482

<div id="template"></div>

let name = "henry";

function makeUppercase(word){
    return word.toUpperCase();
}

let template = `<h1>${makeUppercase(`hello`)}</h1>`;

document.getElementById('template').innerHTML = template;

字符串是JavaScript中基本类型之一，应该算是除了对象之外是使用最为频繁的类型吧，字符串中包含了例如substr，replace，indexOf,slice等等诸多方法，ES6引入了模板字符串的特性，用反引号来表示，可以表示多行字符串以及做到文本插值（利用模板占位符）。

// 以前的多行字符串我们这么写：
console.log("hello world 1\n\
hello cala");
// "hello world
// hello cala"

//有了模板字符串之后
console.log(`hello world
string text line 2`);
// "hello world
// hello cala"

可以用${}来表示模板占位符，可以将你已经定义好的变量传进括弧中，例如：


// 使用es6字符模块
var name = "cala";
var age = 22;
console.log(`Hello I'm  ${name} ,my age is ${age}`)