JavaScript字符串模板和DOM模板

JavaScript字符串模板和DOM模板

LaoYe - IT 

原文：ES6新特性之模板字符串

作者：樊凡

---

       DOM模板就是原先就写在页面上，能被浏览器识别的HTML结构。DOM模板会在页面加载时被浏览器渲染，通过JavaScript获取DOM节点的内容，就形成了DOM模板。

       在传统的Javascript中，如果我们要对DOM进行操作，字符串模板通常采用加号进行拼接，例如下面的代码：

$(“#Test”).append(‘<li class="list">’ + Str + ’</li>’)

       这样的写法非常的不方便，我们需要很小心的去整理加号两边的字符串，尤其是当字符串长度很大的时候，这是个很繁琐的操作。

       在ES6中，对字符串进行了扩展，提供了一种模板字符串，可以很方便的解决这个问题。

       模板字符串用反引号（`）来代替普通字符串中的双引号和单引号，它可以表示普通的字符串，也可以表示多行字符串，同时还可以插入变量。基本使用方法如下：

1. //普通字符串

2. var Str1 = `String Text 1`;

3. console.log(Str1);

4.  

5. //多行字符串

6. var Str2 = `String Text 1

7. and String Text 2`;

8. console.log(Str2);

9.  

10. //字符串中嵌入变量

11. var name = "Laoye",sex = "male";

12. var Str3 = `My name is ${name} and sex is ${sex}`;

13. console.log(Str3);

14. //控制台输出结果

15. String Text 1

16. String Text 1

17. and String Text 2

18. My name is Laoye and sex is male

       从控制台输出的多行字符串中可以看到，字符串模板可以直接表示多行字符串，而且会保留对应的空格和缩进。如果不想保留模板字符串中的空格和缩进等无效字符，可以使用trim()方法消除掉。例如：

1. var Str2 = "String Text 1 and String Text 2";

2. console.log(Str2.trim()); //String Text 1 and String Text 2

       如果想要在字符串模板中嵌入变量，需要将其写在${}中。通过下面的例子，我们可以看一下潜入变量与传统方法的差异。

1. var contents = "My name is Laoye";

2. //传统写法

3. var oldStr = '<div class="content"> ' + contents + ' </div>';

4. //字符串模板

5. var newStr = `<div class="content"> ${contents} </div>`;

       除此之外，字符串模板中还可以放JavaScript的表达式、对象等等

1. var num=1,sum=2;

2. var result = `${num} + ${sum} = ${num+sum}`;

3. var people = {name:"Laoye",age:"18"};

4. console.log(result); // 1 + 2 = 3

5. console.log(people.name); //Laoye

       注意：如果直接在${}中插入一个对象，默认会调用该对象的toString()方法（因为里面的内容都是字符串形式）。因此，一般情况下要对对象的toString()方法进行重写。例如：

1. var people = {

2. name:"Laoye",

3. age:"18",

4. toString:function(){

5. return `name:${this.name}

6. age:${this.age}`

7. }

8. }

9. console.log(people) //控制台{name: "Laoye", age: "18", toString: ƒ}