JavaScript之es6模板字符串

模板字符串

模板字符串是es6新增加的字符串声明方式，模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号 ，模板字符串声明方式

  let newstr = `这是一个模板字符串`;

模板字符串的特点

1.JavaScript不支持字符串内的变量替换，所以不得不使用拼接字符串来代替。这显然太麻烦了，不得不频繁地在引文内和引文外来回切换。但是在模板字符串中完全不同，模板字符串中可以解析变量 ，不需要用+ 来链接；来看以下案例：(引用变量方式：${})

 let result = {
            name: 'cc',
            age: '15',
            sex: '男'
        }
 let myName = `我的名字是${result.name}`       

2.模板字符串的内容可以换行

let result = {
            name: 'cc',
            age: '15',
            sex: '男'
        }

        let html = `<div> 
            <span>${result.name}</span>
            <span>${result.age}</span>
            <span>${result.sex}</span>
            <div/>`
console.log(html);  //打印出来的字符串也会换行            

3.模板字符串也可以直接调用函数

 let fun = () => {
            return '我是fn函数';
        }

        let hello = `我是hello ${fun()}`;

        console.log(hello);  //我是hello 我是fn函数

4.模板字符串也可以用于直接修改html的内容

const result = {
    name: 'xiaodog',
    age: 22,
    sex: '男',
};

// 模板字符串支持换行
const html = `<div>
	<span>${result.name}</span>
	<span>${result.age}</span>
	<span>${result.sex}</span>
</div>`;
div.innerHTML = html；

总结：模板字符串相对于普通字符串来说优点很多，比较建议大家灵活使用