ES6扩展——模板字符串
${ } 模板字符串占位符 需要用反引号` `
1、模板字符串 `${变量}`
const xiaoming = {
name:'xiaoming',
age:14,
say1:function(){
console.log('我叫'+ this.name + ',我今年'+this.age +'岁!');
},
say2:function(){
console.log(`我叫${`Mr.${this.name.toUpperCase()}`},我今年${this.age}岁!`);
}
} xiaoming.say1();
xiaoming.say2();
2、模拟从服务端拿数据,把数据渲染成一个ul列表
//模拟从服务端拿数据,把数据渲染成一个ul列表
const getImoocCourseList = function(){
//ajax
return {
status:true,
msg:'获取成功',
data:[{
id:1,
title:'vue入门',
date:'xxxx-01-09'
},{
id:2,
title:'es6入门',
date:'xxxx-01-10'
},{
id:3,
title:'react入门',
date:'xxxx-01-11'
}]
}
} const {data:listData, status, msg} = getImoocCourseList(); function foo(val){
return val.replace('xxxx','xoxo');
} if(status){
//声明一个数组,用来存放每个li的html字符串
let arr = []; listData.forEach(function({date,title}){
// arr.push(
// '<li>'+
// '<span>' + title + '</span>' +
// '<span>' + date + '</span>' +
// '</li>'
// ); arr.push(
`
<li>
<span>${ `课程名:${title}` }</span>
<span>${ foo(date).toUpperCase() }</span>
`
);
});
let ul = document.createElement('ul');
ul.innerHTML = arr.join('');
document.body.appendChild(ul);
}else{
alert(msg);
}
3、使用反引号的模板字符串还可以嵌套反引号,并且还可以在花括号内写一些简单的表达式(比如调用方法toUpperCase等):
function foo(val){
return val.replace('xxxx','xoxo');
} arr.push(
`
<li>
<span>${`课程名:${title}`}</span>
<span>${foo(date)}</span>
</li>
`
)
ES6扩展——模板字符串的更多相关文章
- ES6(模板字符串,三点运算符,Symbol,iterator接口)
模板字符串 作用:简化字符串的拼接 模板字符串必须用``包含 变化的部分使用${xxx}包含 对象的简写方式 同名的属性可以省略不写 可以省略函数的function 箭头函数 箭头函数的特点 箭头函数 ...
- ES5-ES6-ES7_字符串扩展—模板字符串
includes(), startsWith(), endsWith() 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法 ...
- ES6-字符串的扩展-模板字符串
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 深入浅出ES6(四):模板字符串
作者 Jason Orendorff github主页 https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...
- ES6模板字符串
ES6支持模板字符串,简单写法如下 //html界面 <!DOCTYPE html> <html> <head> <meta charset="ut ...
- Vue组件template模板字符串几种写法
在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...
- ES6模板字符串及字符串的扩展方法
一.ES6模板字符串 传统定义字符串的方式是: const str='hello es2015,this is a string' ES6新增了一种定义字符串的方式用反引号进行标识 const str ...
- ES6入门四:对象字面量扩展与字符串模板字面量
简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...
- es6字符串的扩展——模板
todo1.模板字符串 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b&g ...
随机推荐
- Tomcat修改最大连接数及查看最大连接数
一.背景 公司进行安全整改, 技术要求:会话限制:应能够对应用系统的最大并发会话连接数进行限制: 提供凭证:提供对系统最大并发会话连接数进行限制的截图,需要将所有被检查系统中间件配置截图,如果不限制最 ...
- spring boot+mybatis plus出现Invalid bound statement (not found)
qlSessionFactory不要使用原生的,请使用MybatisSqlSessionFactory
- python3中的缺省参数和global
关于py中缺省参数: 在声明函数的时候对某些参数(一个或多个)进行赋值,在你调用的时候无需在实参列表中体现该参数,但是在执行的时候会默认加上这个已经在形参中定义好的参数. 但是,缺省参数必须放在最后, ...
- mysql安装简书
mysql下载地址:https://dev.mysql.com/downloads/mysql/ mysql可视化工具下载地址:https://dev.mysql.com/downloads/work ...
- DC-9靶机
仅供个人娱乐 靶机信息 下载地址:http://www.five86.com/downloads/DC-9.zip 一.主机扫描 二.信息收集 三.漏洞查找和利用 发现search的地方可能有sql注 ...
- linux中的dhcp
目录 一.DHCP服务 二.DHCP的租约过程 三.使用DHCP动态配置主机地址 四.安装DHCP服务器 一.DHCP服务 ① DHCP (Dynamic HostConfiguration Prot ...
- python grequest模块使用备忘录
手里上有一批链接,需要检查他们是否已经被删除.本来是想用多线程的,但是考虑了下一个是实现起来稍繁琐.而且性能不理想,单机基本超过10线程基本上就没有太多增益了. 所以考虑了下,还是决定用异步IO. 在 ...
- 洛谷P5691题解
题面 本人用的是暴力分类讨论 + \(unordered\_map\) 存储,与所有的题解都不同. 因为 \(n \leq 6\) ,非常的小,并且我不想写 DFS,所以直接暴力分类讨论 \(n=1, ...
- 从Python到Go:初学笔记
本文记录了我在学习Go的过程时的一些笔记,主要是比较Python和Go之间的差异并作简单描述,以此使Python程序员对Go语言的特性有简略的了解.初学难免有纰漏,欢迎各位批评指正补充交流,谢谢. 数 ...
- MSF+Nmap TCP空闲扫描
MSF+Nmap TCP空闲扫描 前言 TCP空闲扫描是一种高级的扫描技术,可以冒充内网中另一台IP地址来对内网中的目标进行隐秘的扫描. 正文 在进行扫描之前,我们需要了解一个概念,即递增IP帧标识, ...