ES6 学习 -- 字符串模板
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>
`;
ES6 学习 -- 字符串模板的更多相关文章
- es6学习笔记--模板字符串
这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...
- es6 学习2 模板字符
es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点. 1.第一个用途,基本的字符串格式化.将表达式嵌入字符串中进行拼接.用${}来界定 //es5 var name = 'lux' ...
- 只为粗暴看一下ES6的字符串模板的性能
网上查找"ES6 字符串模板 +性能"5分钟无果遂写了一个暴力测试. 测试对象: +=方式,字符串累加计算方式 +s1+s2...+sn方式,即传统连加拼接字符串方式 s.push ...
- ES6中字符串模板的使用
反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...
- 前端小白-----ES6之字符串模板
前言:只要坚持就会胜利--Coldfront-小白菜 既是总结也是一种分享 分享内容:ES6 字符串模板 案例1:var Musics=[{music:"六月的雨",singer: ...
- ES6 学习 -- 字符串新增方法
1.检测字符串中是否包含某个字符 ES5方法:string.indexOf("需要检测的字符"),如果返回值为-1,则说明当前字符串中不存在这个字符,返回值不为-1,则 是当前字符 ...
- es6字符串模板总结
我们平时用原生js插入标签或者用node.js写数据库语言时候,经常需要大量的字符串进行转义,很容易出错,有了es6的字符串模板,就再也不用担心会出错了 1.模板中的变量写在${}中,${}中的值可以 ...
- [js]es6语法: 字符串和数组的方法
s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...
- ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set
这篇es6的学习笔记来自于表哥 表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 ES6就是JS6,JS的第 ...
随机推荐
- Flink 编程模型
抽象层次 levels_of_abstraction 最低级的抽象接口是状态化的数据流接口(stateful streaming).这个接口是通过 ProcessFunction 集成到 Data ...
- python将字典列表导出为Excel文件的方法
将如下的字典列表内容导出为Excel表格文件形式: 关于上图字典列表的写入,请参考文章:https://blog.csdn.net/weixin_39082390/article/details/ ...
- C语言指针和字符串
#include <stdio.h> int main() { /********************************************* * 内存: * 1.常量区 * ...
- 网络编程之 OSI七层协议
内容目录: 1.软件开发架构 2.OSI七层协议 3.每层协议介绍 1.软件开发架构 c/s架构: c:客户端 s:服务端 b/s架构: b:浏览器 s:服务器 本质:b/s其实也是c/s 2.OSI ...
- jdk8中map新增的merge方法介绍
1.Map.merge方法介绍 jdk8对于许多常用的类都扩展了一些面向函数,lambda表达式,方法引用的功能,使得java面向函数编程更为方便.其中Map.merge方法就是其中一个,merge方 ...
- 笔记37 Spring Web Flow——流程的组件
在Spring Web Flow中,流程是由三个主要元素定义的:状态.转移和 流程数据. 一.状态 Spring Web Flow定义了五种不同类型的状态.通过选择Spring Web Flow的状态 ...
- vagrant ssh try
Vagrantfile add Vagrant.configure("2") do |config| config.vm.network "private_network ...
- jq-demo-2种吸顶效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java 二叉树遍历相关操作
BST二叉搜索树节点定义: /** * BST树的节点类型 * @param <T> */ class BSTNode<T extends Comparable<T>&g ...
- 区别 |python-pandas库set_index、reset_index用法区别
1.set_index() 作用:DataFrame可以通过set_index方法,将普通列设置为单索引/复合索引. 格式:DataFrame.set_index(keys, drop=True, a ...