模板字面量的最简单语法，是使用反引号（ `）（Tab上面那个键）来包裹普通字符串，而不是用双引号或单引号。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="template">

  </div>

</body>

<script>

  //变量

  let name = "Nicholas";

  //方法

  function makeUpperCase(word) {

    return word.toUpperCase();

  }

  let element = `

              <div>

                  Hello, ${name}

              </div>

              <ul>

                  <li>1.${makeUpperCase('tell me!')}</li>

                  <li>2.call me!~</li>

              </ul>

              `.trim();

  document.getElementById("template").innerHTML = element;

</script>

</html>

ES6 - 字符串的扩展（模版字符串）的更多相关文章

  1. ES6箭头函数及模版字符串

    var f = v => v; 等同于: var f = function(v) { return v; }; 箭头函数可以与变量解构结合使用: const full = ({ first, l ...

  2. ES6之模版字符串

    ES6之模版字符串 最近在项目中使用了ES6的模版字符串,在这里加以总结. 1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的: $("#result"). ...

  3. ES6 模版字符串及常用的es6扩展方法

    1.ES6 模版字符串es6 模版字符串主要用于简化字符串的拼接 <script type="text/javascript"> let obj={name:'rdb' ...

  4. es6 字符串的扩展和数值的扩展

    es6字符串的扩展 1. es6新增的一些方法 1.1 includes 判断是否包括在内,返回一个 true or false 1.2 statsWith 判断是否以什么开头,返回一个 true o ...

  5. ES6的新特性（4）——字符串的扩展

    字符串的扩展 ES6 加强了对 Unicode 的支持,并且扩展了字符串对象. 字符的 Unicode 表示法 JavaScript 允许采用\uxxxx形式表示一个字在\u0000~\uFFFF之间 ...

  6. es6中的模版字符串

    目录 字符串拼接 includes() startsWith() endsWith() padStart() es6中的模版字符串替代了原有的字符串拼接功能. 字符串拼接 es5方式 传统的字符串拼接 ...

  7. ES6学习笔记(3)----字符串的扩展

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 字符串的扩展ES6之前只能识别\u0000 - \uFFFF 之间的字符,超过此范围,识别会出错 ...

  8. ES6学习历程(字符串的扩展)

    字符串的扩展 在看这一节的时候前半部分写的都是关于unicode的内容,我个人感觉这部分在实际的开发中用的很少,所以不打算在做记录,等届时用到再有针对性的看,所以就将在ES6里面关于字符串操作的一些新 ...

  9. ES6学习笔记（三）字符串的扩展

    ES6 加强了对 Unicode 的支持,并且扩展了字符串对象. 1.字符的Unicode表示法 JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码 ...

  10. 字符串的扩展(ES6)

    文章目录 字符串的扩展 1. 字符的Unicode表示法 2. codePointAt() 3. String.fromCodePoint() 4. 字符串的遍历器接口 5. at()(提案) 6. ...

随机推荐

  1. MySQL Table--独立表空间

    数据库表空间 独立表空间 在MySQL 5.6 中引入独立表空间的概念,启用独立表空间后,每个表将生成独立的文件来进行存储. 创建表时可以指定表存放的文件路径 ##首选需要确保innodb_file_ ...

  2. Linux普通用户登录后，命令行提示：-bash-4.1$ ，原因分析及解决

    原文 有时候在使用用户登陆Linux系统时会发现,命令行提示符成了:-bash-4.1$,不显示用户名,路径信息. 原因:用户家目录里面与环境变量有关的文件被删除所导致的 也就是这俩文件:.bash_ ...

  3. 国内不fq安装K8S一: 安装docker

    目录 1.安装docker 1.1 准备工作 1.2 安装docker 1.3 修改cgroup 国内不fq安装K8S一: 安装docker 国内不fq安装K8S二: 安装kubernet 国内不fq ...

  4. Redis支持的数据类型

    String字符串: 格式: set key value string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象 . string类型是Redi ...

  5. Linux必知必会--awk

    弱者,是没有资格要求公平的. --<秦时明月>卫庄 参考文献: http://www.ruanyifeng.com/blog/2018/11/awk.html 阮一峰 https://ww ...

  6. Ubuntu不能使用passwd的--stdin的解决办法

    转载请注明来源https://www.cnblogs.com/sogeisetsu/p/11397648.html Ubuntu不能使用passwd的--stdin的解决办法 可以使用chpasswd ...

  7. driver.implicitly_wait()与time.sleep()的区别

    implicitly_wait(5)属于隐式等待,5秒钟内只要找到了元素就开始执行,5秒钟后未找到,就超时: time.sleep(5)表示必须等待5秒定位: 如何灵活运用这两种方式: 当某个页面元素 ...

  8. Locust性能测试6-命令行参数详解

    前言 当我们在linux上使用locust工具压测的时候,会使用no-web模式,然后需要收集运行的日志,方便查找问题. 命令行参数 输入locust --help 查看所有的命令行参数 > l ...

  9. Flash完美跨域访问的方法

    先,你要确定以下几点,否则可能无法实现: 1.你要跨到哪个域,你必须能管理那域上文件,因为这里要放一个通行文件. 2.你的Flash如果只有SWF,那不一定能实现,因为有时,Flash的AS中,要加入 ...

  10. DT企业新闻也叫公司新闻简介调取方案

    今天我们讲的是企业新闻简介的事,由于destoon官方比较懒,企业新闻没有开发这个截字功能,我们就变通思维直接调取内容前100字,但是由于企业新闻是2个不同的 表,所以我们必须做点小事,  就是写点p ...