当前位置:网站首页>模板字符串
模板字符串
2022-08-03 20:58:00 【抱小猫】
模板字符串---反引号
定义
模板字符串使用反引号(`)来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法( $ {expression} )的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来,如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,它会在模板字符串处理后被调用,在输出最终结果前,你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号(`)时,需要在它前面加转义符(\)。
语法
直接嵌入字符串
嵌入多行字符串
插入表达式
带标签的模板字符串
模板标签
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。 但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
toString方法
函数中有toString方法,所以将1变成字符串进行执行
eval函数
eval:会将传入的字符串当中JavaScript代码执行,如果传入的不是字符串会原封不动的返回
eval会在全局变量下找变量,如果字符串在全局没有定义会报没有定义--> undefined
为什么输出的是一个空数组?
我们通过几个例子了解eval、反引号、模板字符串
<script>eval`${prompt(1)}`</script>
可以执行弹窗函数, 里面执行的函数,先由模板字符串执行函数(模板字符串中可以调用函数),再由eval执行能否传递参数。但是eval只能接受第一个值,然而题中第一个参数是由模板字符串中执行函数${}左右的字符串组合而成的数组,由于${}左右没有值,所以返回两个空字符组成的数组。eval在题中只接受前一个值-->空数组,无法返回后面函数中传递的返回值,所以弹窗无论输入什么值都不会返回。eval原样输出空数组。
<script>eval`${`prompt(1)`}`</script>
不能执行弹窗函数,eval接收的第一个是空数组,第二个为模板字符串打印的函数,因为使用的反引号相当于将{}中的字符串prompt(1)这个函数打印出来传递给eval,但是eval仅接受第一个值,所以第二个函数没有被接受,也就没有执行prompt这个函数。
<script>eval`${`prompt\x281\x29`}`</script>
与第二个例子相同,不能执行弹窗函数,但是可以返回空数组。 虽然题中把括号进行了编码,但是效果和没有编码是相同的,反引号将prompt函数打印后传给eval但是eval仅接受第一个参数-->空数组,所以prompt函数没有执行。
<script>eval.call`${`prompt\x281\x29`}`</script>
因为eval是一个危险函数,所以浏览器对eval有限制,换一个浏览器试试
可以执行弹窗函数,且能输出弹窗中输入的内容。由于call中第一个值为空数组指向null,所以eval被call改变指向后,指向全局(window),第二个值为prompt(1)字符串,这时eval就能在全局(window)中找到这个函数并执行。执行函数返回什么这个函数就返回什么
cell函数的作用:可以改变this的指向
第一个参数this,如果第一个参数为null或为underfined,就将eval绑定到全局变量中
第二个为传递的参数
<script>eval.call`${prompt(1)}`</script>
执行了弹窗函数 ,模板字符串会先执行函数,函数执行后会输入一个没有定义的字符串,eval接受的是这个字符串,这时eval在全局找不到这个字符串,就会返回字符串未定义。当输入的字符串被定义后会返回定义的内容。
<script>eval.call`prompt(1)`</script>
没有执行弹窗函数,里面没有表达式,call方法会将eval直接指向prompt,因为window对eval这个危险函数有设置,eval为别名调用,官方JS都强制eval指向全局,所以eval无法被指向prompt,此时又没有第二个参数,所以eval什么都没有执行。
eval的别名调用的形式五花八门,只要不是直接调用,都属于别名调用,因为引擎只能分辨eval()这一种形式是直接调用,都会被指向window。
eval.call`$alert(1)`
得到的值为空的原因:alert(1)返回的值就是为空的,所以eval最后接受到的值也为空,得到的值就是undefined。
边栏推荐
猜你喜欢
tidyverse based on data.table?
化算力为战力:宁夏中卫的数字化转型启示录
华为设备配置VRRP与BFD联动实现快速切换
leetcode 231. 2 的幂
开源一夏 |如何优化线上服务器
Advantages and Disadvantages of Blind and Buried Via PCB Stacked Via Design
函数,递归以及dom简单操作
3种圆形按钮悬浮和点击事件
15 years experience in software architect summary: in the field of ML, tread beginners, five hole
详解虚拟机!京东大佬出品 HotSpot VM 源码剖析笔记(附完整源码)
随机推荐
2022-8-3 第七组 潘堂智 锁、多线程
How can a cloud server safely use local AD/LDAP?
error: C1083: 无法打开包括文件: “QString”: No such error: ‘QDir‘ file not found
力扣206-反转链表——链表
From September 1st, my country has granted zero-tariff treatment to 98% of tax items from 16 countries including Togo
leetcode 2119. 反转两次的数字
太香了! 阿里 Redis 速成笔记, 从头到尾全是精华!
博士申请 | 美国明尼苏达大学葛畅教授招收隐私数据管理方向全奖博士/硕士/博后/访问学者...
ES6--residual parameters
关于shell脚本的一些思考
canvas螺旋动画js特效
《QDebug 2022年7月》
Why BI software can't handle correlation analysis
【HiFlow】经常忘记签到怎么办?使用腾讯云场景连接器每天提醒你。
基于data.table的tidyverse?
尚医通项目总结
glusterfs 搭建使用
ES6 - Arrow Functions
2022年1~7月语音合成(TTS)和语音识别(ASR)论文月报
盲埋孔PCB叠孔设计的利与弊