ES6 模板字面量
模板字面量 解决的问题
1.多行字符串 一个正式的多行字符串的概念
2.基本的字符串格式化 将变量的值嵌入字符串的能力
3.HTML转义 向HTML插入安全转换后的字符串的能力
(1)基础语法
相当于使用` ` 反撇号代替了单/双引号,和普通字符串无差异
(2)多行字符串
ES6之前换行:
在新行最前方添加反斜杠(\)承接上一行的代码,
但是字符串并没有换行显示,因为反斜杠只是代表该行的延续,这是JavaScript的一个语法bug
如果想输出新的一行,需手动加换行符
\n 后面的反斜杠依然代表该行延续;但由于这是JavaScript的bug,不推荐使用
数组或字符串拼接换行
ES6 中简化多行字符串
使用反撇号修饰,只需要直接换行就行,在反撇号中所有空白符为字符串一部分,message长度为16
也可以使用\n来指明插入新行的位置
let message = `Multiline\nstring`;
字符串占位符
在模板字面量中,可以把任何合法的JavaScript表达式嵌入到占位符并将其作为字符串的一部分输出到结果中
占位符由一个左侧的${ 和右侧的 } 符号组成,中间可以包含任意的JavaScript表达式
模板字面量可以访问作用域中所有可访问的变量,无论在严格模式还是非严格模式下,嵌入未定义的变量都会抛出错误
嵌入模板字面量
标签模板
标签指的是在模板字面量的第一个反撇号(`)前方标注的字符串
标签可以是一个函数
接收参数:
首先是一个literals数组,包含以下元素:
(1)第一个占位符前的空字符串("
(2)第一、二个占位符之间的字符串
(3)第二个占位符后面的字符串,
之后所有的参数都是每一个占位符的解释值。
在模板字面量中使用原始值String.raw
获取\n的原生形式"\\n" (反斜杠与n字符,n字符需要\转义)
ES6 模板字面量的更多相关文章
- ES6模板字面量
前面的话 JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出自己JS已 ...
- ES6入门四:对象字面量扩展与字符串模板字面量
简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...
- ES6躬行记(4)——模板字面量
模板字面量(Template Literal)是一种能够嵌入表达式的格式化字符串,有别于普通字符串,它使用反引号(`)包裹字符序列,而不是双引号或单引号.模板字面量包含特定形式的占位符(${expre ...
- ES6里关于模板字面量的拓展
JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出JS已有的字符串体系 ...
- es6对象字面量增强
相对于ES5,ES6的对象字面量得到了很大程度的增强.这些改进我们可以输入更少的代码同时语法更易于理解.那就一起来看看对象增强的功能.对象字面量简写(Object Literal Shorthand) ...
- 学习熟悉箭头函数, 类, 模板字面量, let和const声明
箭头函数:https://blog.csdn.net/qq_30100043/article/details/53396517 类:https://blog.csdn.net/pcaxb/articl ...
- ES6:字面量的增强写法
以前对象字面量的写法: 属性的增强写法: ES6中可以写成: 方法的增强写法 ES6中可以写成: ~~~~~ END ~~~~~
- JS:关于JS字面量及其容易忽略的12个小问题
简要 问题1:不能使用typeof判断一个null对象的数据类型 问题2:用双等号判断两个一样的变量,可能返回false 问题3:对于非十进制,如果超出了数值范围,则会报错 问题4:JS浮点数并不精确 ...
- [译]ES6新特性:八进制和二进制整数字面量
原文:http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binar ...
随机推荐
- SVG 图像入门教程
http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector ...
- 17/11/24 05:08:44 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable
2017-11-24 21:20:25 1:什么叫失望,什么叫绝望.总之是一脸懵逼的继续...... 之前部署的hadoop都是hadoop-2.4.1.tar.gz,这几天换成了hadoop-2.6 ...
- 一脸懵逼学习Struts数据校验以及数据回显,模型驱动,防止表单重复提交的应用。
1:Struts2表单数据校验: (1)前台校验,也称之为客户端校验,主要是通过Javascript编程的方式进行数据的验证. (2)后台校验,也称之为服务器校验,这里指的是使用Struts2通过xm ...
- asp.net core 创建允许跨域请求的api, cors.
配置应用方域名. 在webapi中引用cors包,在startup的Configure\ConfigServices中增加启动项配置,在api中增加EnableCors的Attribute属性.即可. ...
- 次小生成树(POJ1679/CDOJ1959)
POJ1679 首先求出最小生成树,记录权值之和为MinST.然后枚举添加边(u,v),加上后必形成一个环,找到环上非(u,v)边的权值最大的边,把它删除,计算当前生成树的权值之和,取所有枚举加边后生 ...
- select2插件 多选框动态初始化值
转自https://blog.csdn.net/yiyiwyf/article/details/53521980 上一篇讲了select2的多选和大标题设置. 这周做到了修改的功能,需要将旧数据的选项 ...
- sdoi2017苹果树
题解: 非常奇妙的一题.. 没有免费操作我都不会$nk$....考试打个暴力就可以走人了 树上有依赖背包问题的正确做法是(为啥我之前学的不是这样的啊) 按照后续遍历做背包 做到一个点的时候 枚举它选不 ...
- Flink-- 数据输出Data Sinks
flink在批处理中常见的sink 1.基于本地集合的sink(Collection-based-sink) 2.基于文件的sink(File-based-sink) 基于本地集合的sink(Coll ...
- net core体系-web应用程序-4asp.net core2.0 项目实战(1)-6项目缓冲方案
Asp.Net Core2.0下使用memcached缓存. Memcached目前微软暂未支持,暂只支持Redis,由于项目历史原因,先用博客园开源项目EnyimMemcachedCore,后续用到 ...
- redis 在 php 中的应用
一.redis 在 php 中的应用(Key篇) 二.redis 在 php 中的应用(String篇) 三.redis 在 php 中的应用(Hash篇) 四.redis 在 php 中的应用(Li ...