ES6标签模板
来源:互联网 发布:社会融资规模数据特点 编辑:程序博客网 时间:2024/06/06 01:10
定义:当模板字符串紧跟在一个函数名后面的时候,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
如果没有参数的话,那个普通的调用没什么区别,比如
alert`123`// 等同于 (但是使用模板字符串传入的参数是一个数组,包含一个row属性。注1)alert(123)
但是,如果模板字符串中带有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
let a = 5;let b = 10;tag`Hello ${ a + b } world ${ a * b }`;// 等同于tag(['Hello ', ' world ', ''], 15, 50);
带有变量的模板字符串会被先处理成参数形式,再传入函数中。规则就是: 字符串中的非变量被拆成数组形式,变量作为值紧跟数组后面作为参数传入。
需要注意的是,入股有2个或多个参数相邻,那么其中会被算有一个空字符串,举个栗子:
let { log } = console;let total = 30;let msg = passthru`The total is ${total}${total}${total} (${total*1.05} with tax)`;function passthru(literals) { let result = ''; let i = 0; log(literals); // ["The total is ", "", "", " (", " with tax)"] while (i < literals.length) { result += literals[i++]; if (i < arguments.length) { result += arguments[i]; } } return result;}
上述函数采用rest参数的写法如下:
function passthru(literals, ...values) { var output = ""; for (var index = 0; index < values.length; index++) { output += literals[index] + values[index]; } output += literals[index]; return output;}
这两种写法效果是一样的。因为相邻的变量中间有空字符串,所以变量的长度比字符串的长度少一。
“标签模板”的一个重要应用,就是过滤HTML字符串,防止用户输入恶意内容。通过过滤可以将字符串转码:
function SaferHTML(templateData) { let s = templateData[0]; for (let i = 1; i < arguments.length; i++) { let arg = String(arguments[i]); // 在替换中转义特殊字符 s += arg.replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">"); // 不转义模板中的字符 s += templateData[i]; } return s;}var sender = '<script>alert("abc")</script>'; // 恶意代码var message = SaferHTML`<p>${sender} has sent you a message.</p>`;log(message) // <p><script>alert("abc")</script> has sent you a message.</p>
注1: row 属性指向一个数组,数组中保存的成员和传入的参数中的string一致,举个栗子:
tag`First line\nSecond line`function tag(strings) { console.log(strings.raw[0]); // strings.raw[0] 为 "First line\\nSecond line" // 打印输出 "First line\nSecond line"}
这里会将\n 转义,为了方便取得转义前的原始模板而设计的。
阅读全文
0 0
- ES6标签模板
- ES6-字符串扩展-标签模板
- ES6 标签模板与模板字符串
- ES6之模板字符串
- ES6模板字符串
- ES6模板字面量
- ES6模板字面量
- ES6模板字面量
- 模板标签
- 标签模板
- ES6 Template String 模板字符串
- ES6 反单引号 字符串模板
- ES6折腾记-模板字符串
- es6 javascript的模板字符串
- ES6语法实现模板编译
- ES6 Template String 模板字符串
- ES6-字符串扩展-模板字符串
- ES6模板字符串编译示例
- 基于@AspectJ和Schema的AOP(精通Spring+4.x++企业应用开发实战 第八章)
- 博客竟然被黑了
- 智力题:烧一根不均匀的绳子,从头烧到尾是要1个小时.现在有若干条材质相同的绳子 问如何用烧绳的方法来计时一个小时15分钟.
- 适配IE浏览器的那些坑
- Burp Suite中proxy的简单用法
- ES6标签模板
- 获取本地端口
- 浏览器关闭后,Session就销毁了吗?
- 数据结构-链队列的基本操作
- Unity Shader-法线贴图(Normal)及其原理
- floor()函数与ceil()函数 continue的使用
- openssl编译
- tcpdump使用汇总(转)
- navigator视图右键项目时,菜单不全,需要切换回来