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

  1. es6学习笔记--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  2. es6 学习2 模板字符

    es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点. 1.第一个用途,基本的字符串格式化.将表达式嵌入字符串中进行拼接.用${}来界定 //es5 var name = 'lux' ...

  3. 只为粗暴看一下ES6的字符串模板的性能

    网上查找"ES6 字符串模板 +性能"5分钟无果遂写了一个暴力测试. 测试对象: +=方式,字符串累加计算方式 +s1+s2...+sn方式,即传统连加拼接字符串方式 s.push ...

  4. ES6中字符串模板的使用

    反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...

  5. 前端小白-----ES6之字符串模板

    前言:只要坚持就会胜利--Coldfront-小白菜 既是总结也是一种分享 分享内容:ES6 字符串模板 案例1:var Musics=[{music:"六月的雨",singer: ...

  6. ES6 学习 -- 字符串新增方法

    1.检测字符串中是否包含某个字符 ES5方法:string.indexOf("需要检测的字符"),如果返回值为-1,则说明当前字符串中不存在这个字符,返回值不为-1,则 是当前字符 ...

  7. es6字符串模板总结

    我们平时用原生js插入标签或者用node.js写数据库语言时候,经常需要大量的字符串进行转义,很容易出错,有了es6的字符串模板,就再也不用担心会出错了 1.模板中的变量写在${}中,${}中的值可以 ...

  8. [js]es6语法: 字符串和数组的方法

    s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...

  9. ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set

    这篇es6的学习笔记来自于表哥 表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 ES6就是JS6,JS的第 ...

随机推荐

  1. Java-Class-@I:lombok.extern.slf4j.Slf4j

    ylbtech-Java-Class-@I:lombok.extern.slf4j.Slf4j 1.返回顶部   2.返回顶部 1. package com.ylbtech.api.controlle ...

  2. snmp相关网址

    https://blog.csdn.net/wangcg123/article/details/53837737 https://www.linuxidc.com/Linux/2012-05/6114 ...

  3. asp.net core网关Ocelot的简单介绍& Ocelot集成Identity认证

    文章简介  Ocelot网关简介 Ocelot集成Idnetity认证处理 Ocelot网关简介 Ocelot是一个基于netcore实现的API网关,本质是一组按特定顺序排列的中间件.Ocelot内 ...

  4. Mysql 导入日文数据乱码问题

    做数据迁移后,通过ui发现有日文数据是乱码,通过ui直接修改日文则显示正常. 查了下资料,mysql字符集的作用如下: MySQL字符集设置 • 系统变量:– character_set_server ...

  5. struts2自定义拦截器 设置session并跳转

    实例功能:当用户登陆后,session超时后则返回到登陆页面重新登陆. 为了更好的实现此功能我们先将session失效时间设置的小点,这里我们设置成1分钟 修改web.xml view plainco ...

  6. Webpack4篇

    [Webpack4篇] webpack4 打包优化策略 当前依赖包的版本 1 优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件 ...

  7. 高级Java必看的10本书

    1.深入理解Java虚拟机:JVM高级特性与最佳实践 本书共分为五大部分,围绕内存管理.执行子系统.程序编译与优化.高效并发等核心主题对JVM进行了全面而深入的分析,深刻揭示了JVM的工作原理. 2. ...

  8. python调用tushare获取上市公司管理层人员薪酬和持股

    接口:stk_rewards 描述:获取上市公司管理层薪酬和持股 积分:用户需要2000积分才可以调取,具体请参阅本文最下方积分获取办法 注:tushare包下载和初始化教程,请查阅我之前的文章 输入 ...

  9. CSRF攻击防御方法

    CSRF攻击防御方法 目前防御 CSRF 攻击主要有三种策略: 1. 验证 HTTP Referer 字段: 根据 HTTP 协议,在 HTTP 头中有一个字段叫 Referer,它记录了该 HTTP ...

  10. 43. 守护线程 和 join方法

    1.守护线程(后台线程):            我们在使用一款软件的时候,有的软件会让我们在不知道的情况下下载一些东西,那么这个就是后台线程.            一般用于提高软件的下载量(也就是 ...