字符串模板和dom模板的区别

dom模板就是原先就写在页面上的，能被浏览器识别的 html 结构，会在页面被加载的时候被浏览器渲染，所以要遵循 html 结构和标签命名（大小写不敏感），不然是无法被浏览器解析的，也就获取不到内容了，接着js获取 dom 节点的内容，就形成了 dom 模板。

模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。

字符串模板可能原先放在服务器上啊，script标签里，js 的字符串里，原先不参与页面渲染的一串字符，所以呢 它可以不在乎 html 结构和标签命名，只要你最后根据模板生成内容的结构和命名正确就好。

区别：

这两者其实区别就在于第一次获取到的方式不同，dom 模板参与浏览器解析，而字符串模板不参与，所以 dom 写起来要规范，而字符串模板不用。

所谓的字符串模版，就是一个模子，大部分的字符相等，只是在动态改变的地方不同。举个例子来说

1. function modal(str){
2. return `hollo ${str}`
3. }
4. modal('world') //hello world
6. //或者上面还可以这样写标签
7. return ` <div> Hello <stron> ${str} </ strong></div>`

这样写要比字符串拼接省事很多

1. function modal(str){
2. return `你好 ${str}`
3. }
5. modal('world') //你好 world
6. //或者上面还可以这样写标签
7. return
8. `
9. There are <b>${str} </b> items