${ } 模板字符串占位符 需要用反引号` `

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扩展——模板字符串的更多相关文章

  1. ES6(模板字符串,三点运算符,Symbol,iterator接口)

    模板字符串 作用:简化字符串的拼接 模板字符串必须用``包含 变化的部分使用${xxx}包含 对象的简写方式 同名的属性可以省略不写 可以省略函数的function 箭头函数 箭头函数的特点 箭头函数 ...

  2. ES5-ES6-ES7_字符串扩展—模板字符串

    includes(), startsWith(), endsWith() 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法 ...

  3. ES6-字符串的扩展-模板字符串

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 深入浅出ES6(四):模板字符串

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...

  5. ES6模板字符串

    ES6支持模板字符串,简单写法如下 //html界面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  6. Vue组件template模板字符串几种写法

    在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...

  7. ES6模板字符串及字符串的扩展方法

    一.ES6模板字符串 传统定义字符串的方式是: const str='hello es2015,this is a string' ES6新增了一种定义字符串的方式用反引号进行标识 const str ...

  8. ES6入门四:对象字面量扩展与字符串模板字面量

    简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...

  9. es6字符串的扩展——模板

    todo1.模板字符串 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b&g ...

随机推荐

  1. Tomcat修改最大连接数及查看最大连接数

    一.背景 公司进行安全整改, 技术要求:会话限制:应能够对应用系统的最大并发会话连接数进行限制: 提供凭证:提供对系统最大并发会话连接数进行限制的截图,需要将所有被检查系统中间件配置截图,如果不限制最 ...

  2. spring boot+mybatis plus出现Invalid bound statement (not found)

    qlSessionFactory不要使用原生的,请使用MybatisSqlSessionFactory

  3. python3中的缺省参数和global

    关于py中缺省参数: 在声明函数的时候对某些参数(一个或多个)进行赋值,在你调用的时候无需在实参列表中体现该参数,但是在执行的时候会默认加上这个已经在形参中定义好的参数. 但是,缺省参数必须放在最后, ...

  4. mysql安装简书

    mysql下载地址:https://dev.mysql.com/downloads/mysql/ mysql可视化工具下载地址:https://dev.mysql.com/downloads/work ...

  5. DC-9靶机

    仅供个人娱乐 靶机信息 下载地址:http://www.five86.com/downloads/DC-9.zip 一.主机扫描 二.信息收集 三.漏洞查找和利用 发现search的地方可能有sql注 ...

  6. linux中的dhcp

    目录 一.DHCP服务 二.DHCP的租约过程 三.使用DHCP动态配置主机地址 四.安装DHCP服务器 一.DHCP服务 ① DHCP (Dynamic HostConfiguration Prot ...

  7. python grequest模块使用备忘录

    手里上有一批链接,需要检查他们是否已经被删除.本来是想用多线程的,但是考虑了下一个是实现起来稍繁琐.而且性能不理想,单机基本超过10线程基本上就没有太多增益了. 所以考虑了下,还是决定用异步IO. 在 ...

  8. 洛谷P5691题解

    题面 本人用的是暴力分类讨论 + \(unordered\_map\) 存储,与所有的题解都不同. 因为 \(n \leq 6\) ,非常的小,并且我不想写 DFS,所以直接暴力分类讨论 \(n=1, ...

  9. 从Python到Go:初学笔记

    本文记录了我在学习Go的过程时的一些笔记,主要是比较Python和Go之间的差异并作简单描述,以此使Python程序员对Go语言的特性有简略的了解.初学难免有纰漏,欢迎各位批评指正补充交流,谢谢. 数 ...

  10. MSF+Nmap TCP空闲扫描

    MSF+Nmap TCP空闲扫描 前言 TCP空闲扫描是一种高级的扫描技术,可以冒充内网中另一台IP地址来对内网中的目标进行隐秘的扫描. 正文 在进行扫描之前,我们需要了解一个概念,即递增IP帧标识, ...