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 ...
随机推荐
- pycharm常用设置和快捷键大全
pycharm常用快捷键 1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + ...
- Atom插件下载失败解决办法
转自:http://www.cnblogs.com/20145221GQ/p/5334762.html#正题 一般方法(Atom自动安装) 打开Atom >> Packages >& ...
- win10远程桌面出现身份验证错误。要求的函数不受支持
打开组策略,依次展开“计算机配置”->“管理模板”->“系统”->“凭据分配”,设置名称: “加密 Oracle 修正” 为已启用,并设置保护级别为“易受攻击”
- ElasticSearch简要总览
今天看了一下ElasticSearch的相关文档,我做了如下总结: 发现越来越喜欢画图归纳总结知识了,看图说话 集群特性说明 健康状况的说明 如何配置分片? 接下来一张图总结下操作相关的总结 接下来, ...
- UE4 ShooterGame Demo的开火的代码
之前一直没搞懂按下鼠标左键开火之后,代码的逻辑是怎么走的,今天看懂了之前没看懂的部分,进了一步 ShooterCharacter.cpp void AShooterCharacter::OnStart ...
- Aho-Corasick算法实现(简单关键字过滤)
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- 【回顾】html链接、头部
1.HTML 链接 HTML 使用超级链接与网络上的另一个文档相连.几乎可以在所有的网页中找到链接.点击链接可以从一张页面跳转到另一张页面. HTML 超链接(链接) HTML使用标签 <a&g ...
- mysql 一张表的多个字段关联另外一张表
SELECT vtiger_orderitem.orderid, ( SELECT vtiger_users.last_name FROM vtiger_users WHERE vtiger_orde ...
- python导入import
1.参考 Python 相对导入与绝对导入 2.Python import 的搜索路径 在当前目录下搜索该模块 在环境变量 PYTHONPATH 中指定的路径列表中依次搜索 在 Python 安装路径 ...
- 自建yum仓库yum源
目的:搭建自己的yum源主要是解决大批量服务器下载更新人互联网带宽占用问题及速度问题以及不能访问的问题. 服务端: 步骤如下: 一.创建一个目录,就是我们yum软件存放的目录 [root@vicwe ...