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. 自己动手修改Robotium代码（下）

    public void takeScreenshot(){   View decorView = viewFetcher.getRecentDecorView(viewFetcher.getWindo ...

  2. iOS学习——如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒

    如题,本文主要研究如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒.做过安卓开发的小伙伴肯定很方便就能像打开资源管理器一样查看我们写到手机本地或应用中的各种资源,但是在iOS开发 ...

  3. 件测试博客日记Day03-11.17日 —— 赵天宇 —— 禅道的使用和配置详细版

    说在维基百科先查找关于禅道相关知识,发现有关于禅道这个项目管理软件的详细介绍,然后将相关的介绍进行整理写入文档,在禅道的介绍中也有下载地址并进行安装. (1)软件的基本情况 a.中文名称:禅道项目管理 ...

  4. markdown简述

     前端开发的工具    编辑器:   1. 轻量级的,依靠插件:sublime:atom(github):vs code(miscrosaft)   2. 集成的:DW:webstorm:hbuild ...

  5. 十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

    上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题.今天我们来重新调整一下列表页面和内容页面,使我们做的后台 ...

  6. C#图片压缩上传

    /// <summary> /// 压缩图片 /// </summary> /// <param name="iSource">图片文件< ...

  7. "逃离北京"的这些年 2

    一  找工作第二阶段 我为了保险,在辞职信还特别写了:特此提前一个月提出辞职. 果然是搞金融的,C公司在我提交辞职信后,一周内就让我整理好工作资料,办好辞职手续. 没关系,都是要走的人.早点离开也是好 ...

  8. js学习笔记（延时器）

    //setTimeout()   //功能:设置一个延时器   //语法:var timer = window.setTimeout(code,millisec);   //参数: code:是任何合 ...

  9. WCF、WebAPI、WCFREST、WebService之间的区别和选择

    转载翻译,原文:http://www.dotnet-tricks.com/Tutorial/webapi/JI2X050413-Difference-between-WCF-and-Web-API-a ...

  10. 数据结构与算法--Boyer-Moore和Rabin-Karp子字符串查找

    数据结构与算法--Boyer-Moore和Rabin-Karp子字符串查找 Boyer-Moore字符串查找算法 注意,<算法4>上将这个版本的实现称为Broyer-Moore算法,我看了 ...