ES6 学习 -- 字符串模板
2024-09-02 15:04:10
ES5及以前,动态操作dom结构时,要多个字符串和变量拼接,如果不换行处理,则需要写很长的代码,不利于阅读理解,如果进行换行写入,则需要一堆的"+"号来连接文本与变量,写起来非常麻烦,如下:
var html = "<div>" + my.name + "</div>";
如果有很多个标签,那么需要很多次拼接,写起来很麻烦,并且结构复杂非常臃肿
而在ES6中,通过模板字符串,可以简单快捷的拼接字符串与变量,还可以实现换行写入,且标签的层级结构跟HTML一样,也非常清楚,如下:
let name = 'bob';
let html = `
<div>
<h1>好久不见</h1>
<span>${name}</span>
</div>
`;
**使用反引号``将需要拼接的字符串写在反引号里面,而其中的变量通过${}来引入变量即可,且在反引号的里面还可以继续使用反引号,写入其他的字符串模板,如下:
let hello = "I miss you";
let html1 = `
<div>
<h1>好久不见</h1>
<div>
`<p>${hello}</p>`
</div>
</div>
`;
最新文章
- 基于OWin的Web服务器Katana发布版本3
- HTTP协议基础
- ASP.NET MVC系列:添加控制器
- Input对象的type类型
- shell-bash学习03 别名、日期、函数
- 关于配置服务器(IIS7)(二)
- 用C#.NET调用Java开发的WebService传递int,double问题
- 本地wamp的Internal Server Error错误解决方法
- DOM笔记(一):HTMLDocument接口
- Ajax异步请求PHP数据
- ADO.NET 快速入门(九):使用关系型数据
- 半径无关快速高斯模糊实现(附完整C代码)
- CentOS_7下安装Nginx服务
- fastjson与各类型的转换
- JAVA中的COPYONWRITE容器
- linux 下nginx
- 【java】浅谈swtich
- 纯css导航栏下划线
- [Windows Azure] Load Balancing Virtual Machines
- UGUI Canvas