ES6学习笔记之字符串模板(巩固复习)

ES6字符串模板
这个举个例子，先大概了解一下什么是字符转模板

    <script>let name='Kobe Bryant'let birthday="1978.8.23";let age= 41;let res = `他叫${name},生日是${birthday},今年${age}岁了`alert(res)</script>

字符串模板在``中（ESC下面的这个键）

字符串模板的优点是可以随意的换行，读取数据只需要写在${}中就OK了，非常的简单。而且不容易出错,不会再出现被 + 号的连接方法产生混乱

let data=[{name:'Michael Jordan',body:"前美国职业篮球运动员，司职得分后卫，绰号“飞人”（Air Jordan）"},{name:'Wilt Chamberlain',body:"出生于美国宾夕法尼亚州费城，前美国职业篮球运动员，司职中锋"},{name:'Isiah Thomas',body:"前美国职业篮球运动员，司职控球后卫，绰号“微笑刺客”（Baby-Faced Assassin）"},{name:'Julius Erving',body:"前美国职业篮球运动员，司职小前锋，绰号“J博士”（Dr.J），开创了现代篮球在空中、篮筐之上表演的先河"},{name:'Karl Malone',body:"前美国职业篮球运动员，司职大前锋，绰号“邮差”（The Mailman）"},]

现在我们有上面的data数据，接下来我们用字符串模板的方式来遍历它们

<ul id="uli"></ul>
window.onload =function(){let oul =document.querySelector('#uli');for(let i= 0;i<data.length;i++){var oli =document.createElement('li')oli.innerHTML=`<span>姓名:${data[i].name}</span>//注意这里<span>介绍:${data[i].body}</span>//注意这里`oul.appendChild(oli)}}

这样一来就不会被非常多的+号连接方式而困扰

ES6学习笔记之字符串模板(巩固复习)相关推荐

ES6学习笔记（字符串扩展）
1.模板字符串模板字符串的优点在于对长串的字符串进行处理时,不需要使用多个引号去进行处理,只需要在最外层使用间隔号`,中间所有的变量使用${}则可进行替换先举一个简单的例子: const xiao ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
ES6学习笔记（五）：轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
ES6学习笔记04：Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...
ES6学习笔记03：变量的解构赋值
ES6学习笔记03:变量的解构赋值如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值其实,Python也 ...
ES6学习笔记01：Symbol数据类型
ES6学习笔记01:Symbol数据类型 1.Symbol定义浏览demo01.html: 2.Symbol作对象属性名 Symbol函数可以接收一个字符串作为参数,表示对Symbol实例的描述,输 ...
ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

ES6学习笔记之字符串模板(巩固复习)

ES6学习笔记之字符串模板(巩固复习)相关推荐

最新文章

热门文章