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 ...
随机推荐
- sqliab刷题笔记-联合注入
Less-1 测试是字符型还是数字型 判断所在字段数 查看显示值 可以看出显示2,3位置.因此我们选择2的位置进行联合注入 查看表名 我们要对admin,users等字符敏感 查看admin表中的字段 ...
- JS文件延迟和异步加载:defer和async属性
-般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件.这意味着必须等到全部 JavaScript 代码都被加载.解析和执行完以 ...
- Socket介绍(五)
套接字(socket)是一个抽象层,应用程序可以通过它发送或接收数据,可对其进行像对文件一样的打开.读写和关闭等操作.套接字允许应用程序将I/O插入到网络中,并与网络中的其他应用程序进行通信.网络套接 ...
- VUE-router-跳转
跳转的 // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路 ...
- cmd MySQL登录
mysql -uroot -p >Mysql -P 3306 -h 0.0.0.0 -u root -p 可远程访问
- SaaS技术栈有多复杂?
[特别声明:本文基于Tools and Services I Use to Run My SaaS进行修改.] 软件SaaS化由于需要考量架构的各个方面,所以需要的技术栈非常全面. 以一个客户管理Sa ...
- 小白的 Python 修炼手册:入门篇
Life is short, you need Python.(人生苦短,我用 Python.) --Bruce Eckel 前言 听说现在是全民 Python 的时代,虽然不知道事实如何,但学会 P ...
- 攻防世界misc——János-the-Ripper
攻防世界misc---János-the-Ripper 附件题目,题目的文件名为:misc100. 下载后,拖入linux中,binwalk发现有隐藏文件.用"strings János- ...
- 音视频开发之H.264 入门知识
大家如果有做过音视频相关的项目,那么肯定对 H.264 相关的概念了解的比较通透,这里我为什么还要写这样一篇文章呢?一来是为了对知识的总结,二来是为了给刚入门音视频的同学一个参考. 基础概念 H.26 ...
- Spring源码阅读-BeanFactory体系结构分析
BeanFactory是Spring中非常重要的一个类,搞懂了它,你就知道了bean的初始化和摧毁过程,对于深入理解IOC有很大的帮助. BeanFactory体系结构 首先看一下使用IDEA生成的继 ...