ES6支持模板字符串，简单写法如下

　　

//html界面

<!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title></title>

        </head>

        <body>

            <center>

                <h1 style="color: red;">测试!!!</h1>

            </center>

            <div id="ceshi"> </div>

            <script type="text/javascript" src="test.js" ></script>

        </body>

    </html>
//JS

var age = 12 ;

var name = '小明' ;

var ceshi = document.getElementById('ceshi');

ceshi.innerHTML = ` 我的名字是<h1>${name}</h1>,我今年的年龄是${age-1}周岁，虚岁是${age} `;

ES6模板字符串的更多相关文章

  1. es6模板字符串使用使${} 来包裹一个变量或者一个表达式

    es6模板字符串使用使${} 来包裹一个变量或者一个表达式 2019-04-28 14:33:54 Gabriel_wei 阅读数 1774  收藏 更多 分类专栏: 前端   版权声明:本文为博主原 ...

  2. ES6模板字符串及字符串的扩展方法

    一.ES6模板字符串 传统定义字符串的方式是: const str='hello es2015,this is a string' ES6新增了一种定义字符串的方式用反引号进行标识 const str ...

  3. ES6 模板字符串Template String

    1. 模板字符串简介: 顾名思义,模板字符串是用来定义一个模板是使用的,就像Vue,React中的template语法. 首先,先来了解一下template string的基本用法: 在ES5中,我们 ...

  4. ES6模板字符串之标签模板

    首先,模板字符串和标签模板是两个东西. 标签模板不是模板,而是函数调用的一种特殊形式.“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数. 但是,如果模板字符串中有变量,就不再是简单的调用了,而 ...

  5. ES6模板字符串【${}配合反单引号一起用】

    先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜.高级编程中,例如java里面的string.format就是干这个事情,诸如此类. 1. 概念理解 A ...

  6. es6模板字符串 问题记录

    自古无图无真相,望各位博主在条件允许的情况下,配张图片吧! 界面是用join拼接的,当循环td的时候会产生一个空串,界面就会出现一个逗号, 虽然功能块算实现了,不过始终美中不足,然后想到的办法是替换所 ...

  7. es6 模板字符串

    模板字符串 提供构造字符串的语法糖,在 Prel/python 等语言中也都有类似特性. 1.反引号模板,可以换行 2.反引号模板,可以嵌套 用+``来嵌套 好处:语法更加简洁 var name=&q ...

  8. ES6 -- 模板字符串（反单引号）

    1)直接使用变量 // before var str = 'test'; console.log(str + "123"); // now var str = 'test'; co ...

  9. es6的新特性--模板字符串

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

随机推荐

  1. Centos 6.9 安装 Redis 3.2.9

    依赖包和常用包yum install gcc gcc-c++ make zlib-devel readline readline-devel tkutil tk tkutil-devel tk-dev ...

  2. Nodejs学习笔记（十六）--- Pomelo介绍&入门

    目录 前言&介绍 安装Pomelo 创建项目并启动 创建项目 项目结构说明 启动 测试连接 聊天服务器 新建gate和chat服务器 配置master.json 配置servers.json ...

  3. C/C++中如何接收return返回来的数组元素

    我们知道return语句作为被调用函数的结束,返回给调用者函数值.一般来说,是返回一个函数值,像一个int, double,char等类型的数据,当然也可以是他们的指针.但是当我们遇到要返回很多数怎么 ...

  4. iOS 图片本地存储、本地获取、本地删除

    在iOS开发中.经常用到图片的本地化. iOS 图片本地存储.本地获取.本地删除,可以通过以下类方法实现. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: ...

  5. canvas入门之时钟的实现

    canvas 入门之作: 三步实现一个时钟: 直接上效果:   step 1  : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...

  6. php面向对象(OOP)编程完全教程(转载笔记，有兴趣可以看看）)

    http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/10/1823042.html

  7. 下拉菜单被挡住了，DIV置于最底层的方法

    网站常会用到一些 下拉菜单,,幻灯片,,,飘浮广告等. 但经常会发现.幻灯片会挡住下拉菜单或者飘浮广告等.解决办法有下 第一,可将幻灯片所在DIV 置于最底层.添加CSS如下 style=" ...

  8. HTTP协议之URL

    1.什么是URL URL的全称是Uniform Resoure Locator,统一资源定位器.URL是浏览器寻找信息时所需的资源位置.当一个人将浏览器指向一个URL,浏览器就会在幕后发送适当的协议报 ...

  9. C# Value type vs Reference type

    [MY NOTE]   [转载请注明出处] Reference Source: http://www.albahari.com/valuevsreftypes.aspx http://www.c-sh ...

  10. HTML5标签总结笔记

    HTML5标签笔记 1.格式标签 元素名和属性一般不区分大小写,特殊的如id和class需要区分 格式标签: <acronym> 定义只取首字母的标签 <abbr>定义缩写 & ...