es6中的模板字符串

es6中的模板字符串

字符串拼接的两种方式

es6中的字符串代替了原有字符串拼接的功能.
1.传统字符串拼接(es5方式):

let  name  =  '张三';
let  age  =  9;
let  str  =  '我的名字叫'  +  name  +  '我今年'  +  age  +  '岁了';
console.log(str)//我的名字叫张三我今年9岁了

在es5中字符串拼接需要用 ‘++’ ,并且如果你还想在这个字符串中加入空格回车或者其他的特殊字符，那代码就变得更难以维护，因为还需要加入转义字符才能正常显示。较为繁琐.

//我的名字叫'张三'我今年9岁了
let  name  =  '张三';
let  age  =  9;
let  str  =  '我的名字叫\''  +  name  +  '\'我今年'  +  age  +  '岁了';
console.log(str)

2.es6使用模板字符串拼接的方式

let  name  =  '张三';
let  age  =  9;
// let str = '我的名字叫\'' + name + '\'我今年' + age + '岁了';
let  str  =  `我的名字叫'${name}'我今年${age}岁了`
console.log(str)

同一段代码,在使用es6的模板字符串形式代码就变得轻便多了.模版字符串的开始和结束不再使用引号包裹，而是使用‘`’,变量也采用了‘${变量名}’的方式，省去了拼接时的加号和特殊字符的转义。

function show(arr) {
            arr.forEach(function (val, i) {
                

                var tr = `<tr>
                               <td>${val.id}</td>
                               <td>${val.pname}</td>
                               <td>${val.price}</td>
                            </tr>`
            tbody.insertAdjacentHTML('beforeend', tr)
            console.log(tr);
            })
           
        }
        show(data);