模板字面量的最简单语法，是使用反引号（ `）（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. FFMPEG 命令行工具-ffprobe

    ffprobe 简介 ffprobe 是一个多媒体流分析工具.它从多媒体流中收集信息,并且以人类和机器可读的形式打印出来. 它可以用来检测多媒体流的容器类型,以及每一个多媒体流的格式和类型.它可以作为 ...

  2. Odoo搜素视图过滤器之筛选与分组

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826168.html 一:过滤器 搜索视图还可以包含<filter>元素,定制过滤器. 过滤器 ...

  3. CentOS7 编译安装MySQL5.6.38（一）

    一.下载MySQL5.6.38安装包 下载地址:https://www.mysql.com/downloads/  打开网站之后选择Archives 然后再选择开源版本 选择我们要下载的版本: htt ...

  4. python应用-已知三角形的边长求他的面积和周长

    """ 已知三角形的边长求他的面积和周长 Author:罗万财 Date:2017-3-3 """ import math a=float( ...

  5. Easyui Datagrid扩展fixRownumber方法 转载

    $.extend($.fn.datagrid.methods, { fixRownumber : function (jq) { return jq.each(function () { var pa ...

  6. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  7. http 和 https（通俗原理了解）

    超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂 ...

  8. 去除WordPress分类描述P标签

    我们知道栏目页调用栏目描述直接用<?php echo category_description(); ?>就ok了,但是使用上面的代码调用Wordpress分类描述,会自动出现P标签,如& ...

  9. sublime中文解决

    1.写好文件sublime_imfix.c并保存. #include <gtk/gtkimcontext.h> void gtk_im_context_set_client_window ...

  10. mr-jobhistory-daemon.sh 查看mr的历史任务

    这个脚本的服务是实现web查看作业的历史运行情况.有些情况下,作业运行完了,在web端就无法查看运行情况. 可以通过开启这个的守护进程来达到查看历史任务. 启动命令为 mr-jobhistory-da ...