ES6模板字符串【${}配合反单引号一起用】
先看看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模板字符串【${}配合反单引号一起用】的更多相关文章
- ES6模板字符串
ES6支持模板字符串,简单写法如下 //html界面 <!DOCTYPE html> <html> <head> <meta charset="ut ...
- es6 模板字符串
模板字符串 提供构造字符串的语法糖,在 Prel/python 等语言中也都有类似特性. 1.反引号模板,可以换行 2.反引号模板,可以嵌套 用+``来嵌套 好处:语法更加简洁 var name=&q ...
- linux 在执行命令过程中,反单引号(`)这个符号代表的意义为何?
在一串命令中,在`之内的命令将会被先执行,而且执行出来的结果将作为外部的输入信息.例如:uname -r 会显示出目前的内核版本,而我们的内核版本在/lib/modules里面,因此.你可以先执行un ...
- ES6 -- 模板字符串(反单引号)
1)直接使用变量 // before var str = 'test'; console.log(str + "123"); // now var str = 'test'; co ...
- es6 模板字变量和字符串占位符
开发者一直在寻找一种创建多行字符串的形式,但要使用单引号双引号字符串一定要在同一行才行. 老办法: 还有其他办法,虽然能实现,但是太啰嗦 es6模板自变量 使用反撇好(`)替换了单双引号 反撇好中的所 ...
- 粗看ES6之字符串
标签: javascript es6 字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一 ...
- vue 事件监听和es6模板语法
es6模板语法的反引号是通过左上角的飘字符弄出来了,学废了吗?
- 深入浅出ES6(四):模板字符串
作者 Jason Orendorff github主页 https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...
- es6的新特性--模板字符串
这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...
随机推荐
- Oracle组成介绍
Oracle Database 11g是一些特殊文件的集合,这些文件是用数据库配置助手创建的,然后用OEM Grid Control完成相关工作.这些数据库文件是通过一组共享内存进程来进行访问的,这组 ...
- 如何将plist大图拆分成原来的小图
我们一般为了提升性能和减少包体,大多会使用textpackture将图片打包成大图,有时候我们也需要查看它的原来小图,但是没有原图,这时候我们就可以使用cocos的工具,cocos studio. 预 ...
- Python第六章(北理国家精品课 嵩天等)
一 1.集合类型定义及其操作: 集合用{}表示,元素用逗号分隔,无序,唯一 集合操作符: |:并 -:减 &:交 ^ :补 <= <:判断子集关系 >= >:判断包含关 ...
- Python第五章(北理国家精品课 嵩天等)
函数和代码复用 函数的定义和使用 def <函数名>(<参数(0个或多个)>): <函数体> return <返回值>可选参数放在不可选参数之后*b不定 ...
- Maven Gradle
场景:随着项目越来越规范,对构建工具的要求越来越高,我们从Maven转到了Gradle. 转自:http://www.infoq.com/cn/news/2011/04/xxb-maven-6-gra ...
- java的坦克大战
一个渣渣写坦克大战的步骤: 1.首先创造好一个坦克和一个GAME框架,并且坦克能够跟着键盘键位移动 案例:在我的博客文件中保存,它的名字是:tankwar0100.rar 主要解决了:1.坦克背景框 ...
- MAC Homebrew安装和简单使用
前言: 这个周六日在刚刚买的macbookpro(系统版本是:10.13.5)上面安装angular,一开始是按照windows上的顺序安装的,先安装node.js,然后在安装angular的时候报错 ...
- neutron基础一(网络基本命令)基本命令,包括veth peer
ip addr ip link tcpdump -i veth1 -e -v route -n ip route arp ethtool -S veth0 ip link add type veth ...
- flex 布局 实现电商网页菜单的多级分类展示
用flex,实现多级菜单分类展示,这里记录一下,方便以后查阅. 效果展示如下: 跟上面floor的设计差不多,鼠标hover全部商品分类的时候,将下拉列表展示在指定区域,这个类似鼠标悬浮商品图片期待上 ...
- 《Java编程思想》读书笔记-基本规范、注释、static关键字、import关键字
扫一扫加我的微信公众号,和我一起打好Java的基础 本文作为构建第一个Java程序的番外篇二,主要跟大家伙儿从浅层次的探讨下Java中的关键字import和static,此外为了让我们的代码可读性更强 ...