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

1. 概念理解

A.老式做法

var ohello='good good day, day day good'
var oworld='please look ' + '"' + ohello + '"' + ', cool style, please enjoy it'
console.info(oworld)

B.新式做法

var hello='good good day, day day good'
var world=`please look "${hello}", cool style, please enjoy it`
console.info(world)

是不是新式做法简单了很多,这种表达方式是ES6提出的模板字符串方式。

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。变量的获取方式是${varName},使得字符串模板定义简单化。

2. 模板字符串中有没有变量不是刚需

var str1 = `hello world`
console.log(str1)

字符串模板方便了将变量的值嵌入到模板字符串中

3. 如果使用模版字符串输出多行字符串,所有的空格和缩进都会被保存在输出中!!

console.log(`No matter\` what you do,

I trust you.
。。。。
呵呵`)

4. 在${}中的大括号里可以放入任意的JavaScript表达式,及引用对象属性(类似Spring SpEL表达式),还可以进行运算。

var x=;
var y=;
console.log(`x=${x++},y=${x+y}`);

ES6模板字符串【${}配合反单引号一起用】的更多相关文章

  1. ES6模板字符串

    ES6支持模板字符串,简单写法如下 //html界面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  2. es6 模板字符串

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

  3. linux 在执行命令过程中,反单引号(`)这个符号代表的意义为何?

    在一串命令中,在`之内的命令将会被先执行,而且执行出来的结果将作为外部的输入信息.例如:uname -r 会显示出目前的内核版本,而我们的内核版本在/lib/modules里面,因此.你可以先执行un ...

  4. ES6 -- 模板字符串(反单引号)

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

  5. es6 模板字变量和字符串占位符

    开发者一直在寻找一种创建多行字符串的形式,但要使用单引号双引号字符串一定要在同一行才行. 老办法: 还有其他办法,虽然能实现,但是太啰嗦 es6模板自变量 使用反撇好(`)替换了单双引号 反撇好中的所 ...

  6. 粗看ES6之字符串

    标签: javascript es6 字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一 ...

  7. vue 事件监听和es6模板语法

    es6模板语法的反引号是通过左上角的飘字符弄出来了,学废了吗?

  8. 深入浅出ES6(四):模板字符串

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...

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

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

随机推荐

  1. java往MongDB导入大量数据

    好几月没写博客了~~~ --------------------- 在公司最近在搞用java往MongDB导入数据 现在是我刚导入2000W条数据了 所以就先写上吧,废话也不多说了 MongDB 我本 ...

  2. Traceur

    直接插入网页 <!-- 加载Traceur编译器 --> <script src="http://google.github.io/traceur-compiler/bin ...

  3. 安装oracle11g INS-30131执行安装程序验证所需的初始设置失败的解决方法

    安装oracle11g [INS-30131] 执行安装程序验证所需的初始设置失败. 解决方法 第一步:控制面板>所有控制面板项>管理工具>服务>SERVER 启动 TCP/I ...

  4. NIO 概述 与 通信实例

    NIO 简述: NIO是在jdk1.4之后加入的一种基于缓冲区(buffer)和通道(channel)的I/O方式, nio是同步非阻塞的i/o模式,同步是指线程不断地轮询i/o事件,非阻塞是在处理i ...

  5. JAVA8集合之List

    目录: 一.ArrayList概述 二.ArrayList的实现 1)成员变量 2)构造方法 3)元素添加 4)元素删除 5)元素修改 6)集合容量调整 7)集合转数组 三.总结 一.ArrayLis ...

  6. java版数据结构与算法第二章数组

    数组由一组具有相同类型的数据元素组成,并存储在一组连续存储单元中.一维数组是常量. 二维数组:若一维数组中的数据元素又是一堆数据结构,我们称之为二维数组.二维数组可以看成是n个列向量组成的线性表. 数 ...

  7. list映射

    例 1 List 解析介绍 >>> li = [1, 9, 8, 4] >>> [elem*2 for elem in li] [2, 18, 16, 8] > ...

  8. 修改权限linux

    1.更改目录所有者命令:chown -R 用户名称 目录名称2.更改目录权限命令:chmod -R 755 目录名称 nginx在不同目录下需要给与全部权限才可以

  9. Matlab R2015b_@Ubuntu 16_安装备忘

    1.下载解压包解压 2.cd 进入文件夹,使用 sh 打开,安装过程中不要使用“网络激活” 3.mv Crack文件中的 /R2015b/bin/glnxa64 里面的三个lib*.so 到Matla ...

  10. iOS保持待续连接

    当iphone应用程序进行网络编程时,切到后台后,socket连接会断掉,ios的设计就是这样. 但是好在apple公司也没有那么绝,还是有一些东西可以在后台运行的(backgroundmodes), ...